CODEWITHSUNDEEP
angularjs
cristianqr
cristianqr

Reputation: 688

How to get row index in angular ui-grid 3.0

I'm working with angular ui-grid version 3.0 and can not find the way to get the index of the row, to add a numeration column to the grid. I would like to help me.

Upvotes: 12

Views: 30606

Answers (6)

Vaimeo
Vaimeo

Reputation: 1128

Use rowRenderIndex in your cell template, it is the native variable available on each row

enter image description here

E.g

columnDefs: [
          {
            enableFiltering: false,
            enableSorting: false,
            field: "sn",
            displayName: "Sn#",
            cellTemplate:
              "<div class=\"ui-grid-cell-contents\" >{{rowRenderIndex}} s</div>"
          }
]

Upvotes: 2

parichehr.mohebbi
parichehr.mohebbi

Reputation: 486

the problem of first solution is that it does not work properly whith pagination. the celltemplate of index column must be something like this to have the right index on each page and not to begin from 1 on each page :

{ field: 'index', displayName: 'Index', width: '50', cellTemplate: '<div class="ui-grid-cell-contents">{{grid.renderContainers.body.visibleRowCache.indexOf(row)+(grid.options.paginationPageSize*(grid.options.paginationCurrentPage-1))+1}}</div>' }

this solution would work even for client-side pagination or for server-side pagination

Upvotes: 4

Uncle Big C
Uncle Big C

Reputation: 43

The following worked for me as I needed to see the index of the row as it related to the entire dataset not just what was visible to the user. It can be cleaned up but this is the raw code that I was able to get to work using the formula 

((0/100)+((2*100)-100))+1 where 

0 = rowIndex (Zero Based)
100 = pagination page size
2 = current page
+1 = because the array is zero based


cellTemplate: '<div class="ui-grid-cell-contents">{{(((grid.renderContainers.body.visibleRowCache.indexOf(row) / grid.options.paginationPageSize)*100)+((grid.options.paginationPageSize * grid.options.paginationCurrentPage) - grid.options.paginationPageSize)) + 1}} </div>'

Hope this helps.

Upvotes: 1

KARTHIKEYAN.A
KARTHIKEYAN.A

Reputation: 20078

by using this way to solve this problem...

$http.get('./api/ioni_users')
        .success(function(data) {
            $scope.gridOptions.data = data;
            angular.forEach(data, function(data, index) {
                data["index"] = index+1;
                //data.push({"index":index+1})
            })
        });

Upvotes: 1

Abhishek kumar
Abhishek kumar

Reputation: 221

cellTemplate: ' {{rowRenderIndex + 1}}'

Upvotes: 22

PaulL
PaulL

Reputation: 6650

There isn't a way to get the index of the row easily, so it depends what you're trying to do. What do you expect the numbering to do when someone sorts the data - do you want the numbers to stay as they were in the original data, or do you want them to change and align to the new sort order?

In the FAQ http://ui-grid.info/docs/#/tutorial/499_FAQ we find:

The question here is what you're really trying to achieve. Do you want the actual row index, or that you want to display a sequential id in all your rows?

If the latter, then you can do it by just adding a counter column to your data:

$scope.myData.forEach( function( row, index){
  row.sequence = index;
});

If you want to show the index of the row within the grid internals, then it depends on which internal you want. You can get the index of the row within grid.rows, which would show the row as it stands in the original rows list (not filtered nor sorted), or the index of the row within grid.renderContainers.body.visibleRowCache (filtered and sorted), or the render index of the row within the currently displayed rows (given virtualisation, this is generally a particularly useless number).

If you're OK that whenever someone sorts or filters then the numbers will change, then you could do it with a cellTemplate, which would be something like:

cellTemplate: '<div class="ui-grid-cell-contents">{{grid.renderContainers.body.visibleRowCache.indexOf(row)}}</div>'

Upvotes: 27

Related Questions