How to put Kendo row index on Html tag Id

Question

I'm using a kendo grid to display certain entities. I have an object property in the model of a said entity called action. This action is defined by following kendo template:

template: '# if(true) {# <i id="trashIcon" class="fa fa-trash" ng-click="delete(\\'#:id#\\')"></i>#}'

Currently, every fa-trash icon id is set to "trashIcon." I need to be able to add an index to this trashIcon id every time the model is called to display a new entity on the grid. Similar to {{$index}} in angular for ng-repeats.

Thank you ahead

Answer 1

You need to do the following inside your template.

First (you should have this already)

$scope.yourDataSource = new kendo.data.DataSource(...)

And then

//you can use angular template features here
template: "<i id='trashIcon-{{yourDataSource.indexOf(dataItem) + 1}}'></i>"

I just tested it works with the pagination as well. Here is a working example .