How to Show Index in Kendo UI ListView
Environment
Product | Version |
---|---|
Kendo UI ListView | 2023.3.1114 |
Description
I want to show the index of an item when editing in the Kendo UI ListView.
Solution
To display the index of an item in the Kendo UI ListView, you can create a template function within the editTemplate that returns the index from the ListView's dataSource. Here is an example:
EditTemplate
<div class="product-view k-widget">
<dl>
<div>#:getIndex(data)#</div>
<!-- Rest of the template -->
</dl>
<!-- Edit buttons -->
</div>
JavaScript
function getIndex(data){
//Get ListView
var listView = $("#listView").data("kendoListView");
//Get its DataSource
var lvDataSource = listView.dataSource;
//Return Index
return "Index: " + lvDataSource.indexOf(data);
}
The following Progress Kendo UI Dojo demonstrates the above steps in action.