How can I select all rows in a child grid when its parent row is selected, using a Kendo Grid?

Question

I have a kendo hierarchical grid. When I click a row in the parent grid, the parent row becomes selected and expands to show the child grid. My problem is that I need to be able to change all the children rows into the selected state as well.

This is how I accomplish changing the parent row into the selected state:

$("#gridMasterInfo").delegate('tbody>tr', 'click', function (e) {
     var row = $(this);
     $(this).toggleClass('k-state-selected');                       
});

Here is a JSFiddle sample of the row selection so far

Any help is appreciated, thanks.

do u mean you want to edit sub grid as well, which pops up when u click parent row. if so, what data has to be shown in sub grid. — Dave
no i don't want to edit anything. i just want to highlight all child grid rows when the parent grid row is selected/highlighted — Carlos Mendieta
So you are looking only for standard kendogrid way to highlight it or it is ok to accomplish with custom jquery click event (I meant to inspect and select child grid Id and highlight all rows with jquery by adding css class ) — Dave

OnaBai OnaBai · Accepted Answer · 2014-04-29T20:49:06

You need some little programming and knowing how to select and deselect rows...

The very first thing is creating the detailInit method for your grid, you are probably familiar with this and the only thing here is add a little trick for easily find the details rows in the parent grid.

function detailInit(e) {
    $("<div class='ob-child-grid'/>").appendTo(e.detailCell).kendoGrid({
        ...
    });
}

As you can see, I've added the class ob-child-grid to the container of the grid. I can actually rely on k-secondary (this class is added by Kendo UI to this node) but I prefer not to rely on non documented functionality so the code is less vulnerable to future modifications of KendoUI.

Next is defining a change handler that gets invoked when the row in the parent is selected. This function has to do:

Remove previously selected rows in details grid. I'm assuming that once you select a new row in the parent you want to get the children of the previously selected parent deselected.
Find the child grid of the currently selected row.
Select every element in the child grid.

Lets see how to do it:

// Remove previous selections
$("tr", ".ob-child-grid").removeClass("k-state-selected");

As you can see this step is pretty simple, just remove "k-state-selected" this is all you actually need.

// Find the child grid.
var child = this.select().next().find(".ob-child-grid");

this.select() gets currently selected row and next() gets next row that is where KendoUI places the child grid. With find(".ob-child-grid") we find the node where the grid actually is.

// Select every row
$("tr", child).addClass("k-state-selected");

We add k-state-selected that is the class that marks a row as selected.

You can play with the idea here: http://jsfiddle.net/OnaBai/XaMer/

How can I select all rows in a child grid when its parent row is selected, using a Kendo Grid?

1 Answers