Jump to specific record in grid

1 Answer 35 Views
Grid
Gary
Top achievements
Rank 1
Gary asked on 21 Apr 2022, 01:53 AM
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?

1 Answer, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 25 Apr 2022, 08:21 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Gary
Top achievements
Rank 1
commented on 25 Apr 2022, 05:56 PM

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
Telerik team
commented on 28 Apr 2022, 07:48 AM

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
Top achievements
Rank 1
commented on 28 Apr 2022, 06:41 PM | edited

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
Telerik team
commented on 03 May 2022, 12:44 PM

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

Tags
Grid
Asked by
Gary
Top achievements
Rank 1
Answers by
Nikolay
Telerik team
Share this question
or