CODEWITHSUNDEEP
angularjsangular-ui-grid
Sadeghbayan
Sadeghbayan

Reputation: 1163

Define column position in Ui grid Angular

here's how i defined one of my col in Ui grid : 

getDeviceTypeList = function () {
        BaseInfoService.getDeviceTypeList().then(function (data) {
            debugger;
            $scope.deviceTypeList = data;

            $scope.gridOptions.columnDefs.push(

                        {
                            headerCellTemplate: '<div>{{"common.DeviceType"|translate}}</div>',
                            cellTemplate: '<div>{{getExternalScopes().deviceTypeFormatter(row.entity.DeviceTypeCode)}}</div>',
                            field: 'DeviceTypeCode',
                            enableCellEdit: true,
                            editType: 'dropdown',
                            editDropdownOptionsArray: $scope.deviceTypeList,
                            editableCellTemplate: 'ui-grid/dropdownEditor',
                            editDropdownIdLabel: 'SubCode',
                            editDropdownValueLabel: 'ParamDesc',
                            editModelField: 'DeviceTypeCode'
                        }
                );

        })
    }

but other col defined like : 

 $scope.gridOptions = {

        columnDefs: [
       {
       name:"soheil"},
      { name: 'توضیحات', field: 'Command', headerCellTemplate: '<div>{{"common.Comment"|translate}}</div>', editModelField: 'Command' },
      { name: 'تعداد', field: 'NeededDeviceNumber', headerCellTemplate: '<div>{{"common.NeededDeviceNumber"|translate}}</div>', type: 'number', editModelField: 'NeededDeviceNumber' },

      //{ name: 'نوع وسایل', field: 'DeviceType', headerCellTemplate: '<div>{{"common.DeviceType"|translate}}</div>', cellTemplate: '<select ng-model="neededDiviceViewModel.templateCode" ng-options="item.SubCode as item.ParamDesc for item in dastourKarViewModelList"><option value="" style="display:none" selected="selected">انتخاب</option></select>' }
        ],
    }

how can i defined custom position for column ? Now It's like :
1 3 5 2 4

and that's not what i want , Like : 1 2 3 4

Any Idea ?

Thanks

Upvotes: 2

Views: 3568

Answers (2)

Subhash Kumar
Subhash Kumar

Reputation: 286

columnDef is an array and you need to just push the columns in same sequence in which you want to show. For push dynamically columns, you need to handle these cases through data and code.

Upvotes: 1

kachhalimbu
kachhalimbu

Reputation: 2200

Use the splice function to insert new column definitions at the correct place

$scope.columns.splice(1, 0, { field: 'company', enableSorting: false });

Above code adds a new column at the second position. See the example from the uioo-grid tutorial

UPDATE: For your this requirement "assume the column should be like this : col1 col2 dynamic-col col3 but now it's like : dynamic-col col1 col2 col 3" you need to use following code

$scope.gridOptions.columnDefs.splice(2, 0, { headerCellTemplate: '<div>{{"common.DeviceType"|translate}}</div>',
    cellTemplate: '<div>{{getExternalScopes().deviceTypeFormatter(row.entity.DeviceTypeCode)}}</div>',
    field: 'DeviceTypeCode',
    enableCellEdit: true,
    editType: 'dropdown',
    editDropdownOptionsArray: $scope.deviceTypeList,
    editableCellTemplate: 'ui-grid/dropdownEditor',
    editDropdownIdLabel: 'SubCode',
    editDropdownValueLabel: 'ParamDesc',
    editModelField: 'DeviceTypeCode'
});

Upvotes: 2

Related Questions