Select Grid row based on grid column ID value matching a client javascript variable.

[Gil]

Would someone be able to provide a code snippet of how to programmatically select a row in the Kendo MVC Grid? 

We have the value for the ID (a column in the Grid) in a javascript variable.  We want to display the matching row in our grid and mark it as selected.  I saw the Kendo demos on how to select the row using grid.select(n), where n is the index into the row on the page.  But the demo example doesn't solve this problem.

Note, my data contains several thousand rows and my pageSize is limited to 10 rows per page.

@(Html.Kendo().Grid<ReportViewer.Models.EntityModels.tblTreeView>()
   .Name("grid")
   .Columns(columns =>
   {
     columns.Bound(c => c.Name).Title("Report Name");
     columns.Bound(c => c.Path).Title("Path");
     columns.Bound(c => c.Id).Title(string.Empty).Width("200px");
   })
   .Pageable(pageable => pageable.Refresh(true).PageSizes(true).ButtonCount(3))
   .Selectable()
   .Events(e => e.Change("showInTree"))
   .Sortable(sortable => { sortable.SortMode(GridSortMode.SingleColumn); })
   .DataSource(dataSource => dataSource
   .Ajax()
   .Model(model => model.Id(p => p.Id))
   .Sort(sort => sort.Add("Name").Ascending())
   .PageSize(10)
   .Read(read => read.Action("ReportsGridRead", "Home"))
)
)

 

Any help is greatly appreciated.

[Gil]

Here's an article that ALMOST works but fails if the row is on a different page.

https://stackoverflow.com/questions/17740249/how-to-select-a-row-in-kendo-grid-by-data-item-id

The code snippet works but only if the row is on the same page:
var grid = $("#grid").data("kendoGrid");
var dataItem = grid.dataSource.get(key);
var row = grid.tbody.find("tr[data-uid='" + dataItem.uid + "']");
grid.select(row);

 

Alternatively, I could create and apply a filter to display the row in the grid, but if possible, I'd prefer to just load the correct page containing the matching row and also have the row selected.

Any ideas or sample code would be helpful.

 

Thanks,

Gil

 

[Viktor Tachev]

Hello Gil,

Based on the described scenario I would say it consists of two separate things - navigating the Grid to a page where specific item is and selecting that item.

The first part would be harder because it requires calculating where the item is. You can use client-side logic to calculate the page number where the specific item is located. Alternatively, you can send $.ajax request to the server to retrieve that information. Once you have that information call the page() method for the Grid's DataSource in order to navigate to that page. 

When the Grid is showing the correct page selecting the item can be done via select() like described in the stackoverflow thread you are referring to.

Give the approach a try and let me know how it works for you.


Regards,
Viktor Tachev
Progress Telerik

[Gil]

Thanks for the help.

Here's what worked for me. The key was setting ServerOperation(false).

function gridGoToItemBasedOnTreeNodeSelection() {
var treeData = getTreeData();
var el = $("#grid"),
grid = el.data("kendoGrid"),
dataSource = grid.dataSource,
model = dataSource.get(treeData.id),
index = dataSource.indexOf(model);
dataSource.page(index / dataSource.pageSize() + 1);
var row = el.find("tbody>tr[data-uid=" + model.uid + "]");
grid.select(row); 
}

 

[Viktor Tachev]

Hello Gil,

I am glad that you have the required functionality working. 

Thank you for sharing your approach with the community. This can help someone looking for a similar feature. 

Regards,
Viktor Tachev
Progress Telerik