Angular UI grid unable to sort column which has row index

Question

I have a grid with columns for name,price etc. To this grid I have added another column that depicts serial nos. i.e. 1,2,3... . In order to generate this I have used cellTemplate: '{{rowRenderIndex+1}}'

Now I want to sort based on this column with serial numbers. But the sorting does not work. I tried adding a type:'number' to the column definition. Still the sorting does not happen on the column which has the serial numbers.

Here is my fiddle link http://plnkr.co/edit/zgQKyaS7KbJeZoyzPLKf?p=preview

My html

<div ng-controller="MainCtrl">
  <div id="grid1" ui-grid="gridOptions1" class="grid"></div>
</div>

My jS var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
  $scope.gridOptions1 = {
    enableSorting: true,
    columnDefs: [
       { name: 'SL NO' ,cellTemplate: '<div>{{rowRenderIndex+1}}</div>', type:'number'},
      { field: 'name' },
      { field: 'gender' },
      { field: 'company', enableSorting: false }
    ],
    onRegisterApi: function( gridApi ) {
      $scope.grid1Api = gridApi;
    }
  };


 $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
    .success(function(data) {
      $scope.gridOptions1.data = data;
    });
}]);

I want to sort column with the name SL NO here which contains the row indexes.

Vibhu Vibhu · Accepted Answer · 2016-12-05T12:07:01

Firstly, rowRenderIndex is not apt for the sorting purposes because it displays the rows index after rendering hence if you scroll down the grid you will notice the numbers automatically adjust.

Second, You could use IndexOf function to get your row indeces but it wont solve the sorting problem,

// { name: 'SL NO' ,field:'index',cellTemplate: '<div class = "ui-grid-cell-contents">{{grid.renderContainers.body.visibleRowCache.indexOf(row)}}</div>', type:'number'},

Here is the final working code snippet:-

 columnDefs: [
  {field:'index'},
  { field: 'name' },
  { field: 'gender' },
  { field: 'company', enableSorting: false }
],
onRegisterApi: function( gridApi ) {
  $scope.grid1Api = gridApi;
}
 };
 $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function(data) {
  $scope.gridOptions1.data = data;
   angular.forEach(data, function(data, index) {
            data["index"] = index+1;

Here is the plunkr : http://plnkr.co/edit/LiDWg8ozwdEo290xUqNe?p=preview

Angular UI grid unable to sort column which has row index

1 Answers