New to Kendo UI for jQueryStart a free 30-day trial

How to Show Index in Kendo UI ListView

Environment

ProductVersion
Kendo UI ListView2023.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.

In this article
EnvironmentDescriptionSolution
Not finding the help you need?
Contact Support