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.
2
-
I would like to help you too, but first you need to show us what you have tried so we can help you improve it.David says Reinstate Monica– David says Reinstate Monica2015-04-14 20:56:01 +00:00Commented Apr 14, 2015 at 20:56
-
@DavidGrinberg I want to get the index of the row from CellTemplate. ng-grid is obtained in this way row.rowIndex, but not how to do it in ui-grid 3.0cristianqr– cristianqr2015-04-14 21:04:47 +00:00Commented Apr 14, 2015 at 21:04
Add a comment
|
6 Answers
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>'
3 Comments
Jay
I want to show the sequence... can you explain how to map the counter value from the above forEach iteration ? Thanks
N.A
this works for me but when i export table,it missed these index numbers.any idea.
PaulL
Exporter works off the underlying data, not the rendered version. If you want an index that works with export as well, you'll need to put a numbered sequence column into your data.
cellTemplate: ' {{rowRenderIndex + 1}}'
3 Comments
Shishir Gupta
This works, but remember rowRenderIndex starts from 0 for each page. If you have 15 items per page, and user goes to 3rd page, first element on that page will have
rowRenderIndex = 0 and not 30
Phil3992
@ShishirGupta I am noticing this with scroll bars. Have row 99 at the bottom of the view, scroll down one place and what would be row 100 is showing as 0
Cesar
Doesn't work. rowRenderIndex is the index of the the rows out of the currently visible rows and not the real index.
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
Comments
Use rowRenderIndex in your cell template, it is the native variable available on each row
E.g
columnDefs: [
{
enableFiltering: false,
enableSorting: false,
field: "sn",
displayName: "Sn#",
cellTemplate:
"<div class=\"ui-grid-cell-contents\" >{{rowRenderIndex}} s</div>"
}
]
1 Comment
Cesar
rowRenderIndex doesn't seem to work because of virtualizationThreshold which is enabled by default, it resets on every virtual page change
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})
})
});
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.
