This is a migrated thread and some comments may be shown as answers.

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

4 Answers 4939 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Gil
Top achievements
Rank 1
Gil asked on 12 Feb 2019, 11:58 PM

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.

4 Answers, 1 is accepted

Sort by
0
Gil
Top achievements
Rank 1
answered on 13 Feb 2019, 12:13 PM

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

 

0
Accepted
Viktor Tachev
Telerik team
answered on 14 Feb 2019, 10:34 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Gil
Top achievements
Rank 1
answered on 14 Feb 2019, 08:12 PM

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); 
}

 

0
Viktor Tachev
Telerik team
answered on 18 Feb 2019, 12:17 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Gil
Top achievements
Rank 1
Answers by
Gil
Top achievements
Rank 1
Viktor Tachev
Telerik team
Share this question
or