Define column position in Ui grid Angular

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

Can you be more clear about what positions for columns you want? Also are you dynamically adding new columns to the grid? — kachhalimbu
– kachhalimbu, Commented May 11, 2015 at 8:45
assume the column should be like this : col1 col2 dynamic-col col3 but now it's like : dynamic-col col1 col2 col 3 — Sadeghbayan
– Sadeghbayan, Commented May 11, 2015 at 9:02

kachhalimbu · Accepted Answer · 2015-05-11 10:51:14Z

2

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

edited May 11, 2015 at 10:51

answered May 11, 2015 at 8:53

kachhalimbu

2,20017 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sadeghbayan Over a year ago

that's ok , but i can't move static column ?

kachhalimbu Over a year ago

columDef is just a JS array. Arrange it anyway you want and the columns will show up accordingly. I'm not sure what else you are expecting. You are in control of creating the order in which the columns should display.

Subhash Kumar · Accepted Answer · 2015-05-12 05:01:01Z

1

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.

edited May 12, 2015 at 5:01

answered May 11, 2015 at 9:08

Subhash Kumar

2862 silver badges10 bronze badges

3 Comments

Sadeghbayan Over a year ago

so you mean it's not possible ?

Subhash Kumar Over a year ago

Yes.. you just need to set the array according to your requirements.. There is no another way to change the sequence..

Subhash Kumar Over a year ago

In above answer, just changing the array positions not anything else.. there are many ways in code you can change the array but there is no option where you can set the showing sequence.. if you know then please share with me..

Collectives™ on Stack Overflow

Define column position in Ui grid Angular

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related