New to Kendo UI for jQuery? Download free 30-day trial

Adding New Item at the Bottom of Kendo UI ListView


Product Version
Progress® Kendo UI® ListView for jQuery 2023.3.1114


I want to add a new item at the bottom of a Kendo UI ListView instead of at the top. How can I achieve this?


You can achieve this by using the following approach:

  1. Get the ListView's dataSource, the last item in the view, and its index.
  2. Place the new item in the appropriate position based on the dataSource's total.
  3. Insert the new item at the calculated index in the dataSource.
  4. Edit the newly inserted item at the bottom of the page.

Here's an example implemented in JavaScript:

$("#add-new-button").click(function(e) {

  // Get dataSource, last item in the view, and its index
  var dataSource = listView.dataSource,
      lastItemInView = dataSource.view()[dataSource.view().length - 1],
      index = dataSource.indexOf(lastItemInView);

  // Place new item in appropriate position on page
  // If at the end of the ListView
  if (index + 1 === {
    index += 1;

  // Insert item
  dataSource.insert(index, {});

  // Edit newly inserted item at bottom of page

Please refer to the following Progress Kendo UI Dojo for a working example: ListView - Add New Item at the Bottom

In this article