Jump to specific record in grid

[Gary]

I am using the grid and need to be able to programmatically select a specific row based on the value of one field, and then scroll to that row if it isn't already visible. I can't find any way of doing that. If it matters, I'm not using paging. Is there a way to do this?

[Nikolay]

Hi Gary,

There is a good knowledge base article demonstrating how to programmatically select a row in the Grid and scroll the Grid to the position of the row to ensure it is visible:

https://docs.telerik.com/kendo-ui/knowledge-base/grid-select-row-on-different-page

Hope this helps.

Regards,
Nikolay
Progress Telerik

[Gary]

Since I'm not using paging, I assume I can just remove this part of the code, correct? Is there any other change I would need to make?

// 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
grid.dataSource.page(pageWithRow);

[Nikolay]

Hi Gary,

That is correct. The code in question is to page to the needed page when paging is enabled.

Here is the example without paging: https://dojo.telerik.com/OdEfIziz

Let me know if you have any questions.

Regards,

Nikolay

[Gary]

I was able to simplify it a bit based on another piece of code that I found so this is the code I'm now using.

  var CustData = DataCust.data();  // this is the data source for the grid
  for (var i = 0; i < CustData.length; i++) {
    if (CustData[i].id_no==id_no) {
      gridCust.select("tr:eq(" + i + ")");
      gridCust.content.scrollTop(0); // scroll to the top first - important, otherwise the selected row isn't always visible
      gridCust.content.scrollTop(gridCust.select().position().top);
      break;
    }
  }

In the example Dojo there is this line which I don't understand. What is the "element" property? I couldn't find this in the documentation.

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

[Nikolay]

Hi Gary,

Every row contains a data-uid attribute that corresponds to the model uid property. The line in question finds the row by the uid and later uses it to select the row.

The data item:

The row:

I hope this answers the question.

Regards,

Nikolay