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

Dynamically Select a Row on Any Page in the Grid


Product Progress® Kendo UI® Grid for jQuery


I want to be able to select a row in the Grid dynamically, regardless of the row position in the Grid data. How can I select a row if it is on a different page of the Grid?


  1. Find the row index in the Grid DataSource and use it to determine the page containing the row.
  2. Navigate the Grid to the page containing the row.
  3. Select the row.
  4. Scroll the Grid to the position of the row to ensure it is visible.

This approach works only when the Grid uses client-side operations (paging, sorting, filtering). With server operations, the data from pages different than the current one is not available on the client, so you cannot search for the row index.

The following example demonstrates how to select a row on any page of a client-side paged Grid.

    Select row with ID = <input id="numeric" /> (1-78)
    <button id="searchBtn" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base">Go</button>
    <div id="grid"></div>
      function selectGridRow(searchedId, grid, idField){
        var dataSource = grid.dataSource;
        var filters = dataSource.filter() || {};
        var sort = dataSource.sort() || {};
        var models =;
        // We are using a Query object to get a sorted and filtered representation of the data, without paging applied, so we can search for the row on all pages
        var query = new;
        var rowNum = 0;
        var modelToSelect = null;

        models = query.filter(filters).sort(sort).data;

        // Now that we have an accurate representation of data, let's get the item position
        for (var i = 0; i < models.length; ++i) {
          var model = models[i];
          if (model[idField] == searchedId) {
            modelToSelect = model;
            rowNum = i;

        // If you have persistSelection = true and want to clear all existing selections first, uncomment the next line
        // grid._selectedIds = {};

        // Now go to the page holding the record and select the row
        var currentPageSize = grid.dataSource.pageSize();
        var pageWithRow = parseInt((rowNum / currentPageSize)) + 1; // pages are one-based;

        var row = grid.element.find("tr[data-uid='" + modelToSelect.uid + "']");
        if (row.length > 0) {

          // Scroll to the item to ensure it is visible

      $(document).ready(function () {

          var grid = $("#grid").data("kendoGrid");
          var searchedId = $("#numeric").data("kendoNumericTextBox").value();

          selectGridRow(searchedId, grid, "ProductID");

          min: 1,
          max: 78,
          format: "n0"

          dataSource: {
            type: "odata",
            transport: {
              read: ""
            schema: {
              model: {
                id: "ProductID",
                fields: {
                  ProductID: { type: "number" },
                  UnitPrice: { type: "number" },
                  UnitsInStock: { type: "number" }
            pageSize: 10
          height: 350,
          sortable: true,
          filterable: true,
          selectable: "row",
          pageable: {
            refresh: true,
            pageSizes: true
          columns: [
              field: "ProductID",
              title: "ID",
              width: 100
              field: "ProductName",
              title: "Product Name",
              width: 180
            }, {
              field: "UnitPrice",
              title: "Unit Price"
            }, {
              field: "UnitsInStock",
              title: "Units in Stock"
            }, {
              field: "Discontinued",
              width: 150
        width: 250px;

See Also

In this article