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:

html

EditTemplate
<div class="product-view k-widget">
  <dl>
    <div>#:getIndex(data)#</div>
    <!-- Rest of the template -->
  </dl>
  <!-- Edit buttons -->
</div>

javascript

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.