Define column position in Ui grid Angular - angularjs

Question

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

Answer 1

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'
});

Answer 2

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.