Highlight the parent row of the selected detail row in a kendo hierarchical grid

1
votes

Mostly, I would like to know how to obtain a handle on the parent row once I click on a child row in the detail grid.

I have a code sample here, the end goal being to highlight the parent row if a child row is checked:

$("#gridMasterInfo").delegate('tbody>tr .childcheckbox', 'click', function (e) {    
    var parentcheckbox = $(this).closest("tbody>tr");
    var parentrow = $(this).closest("tbody").next().find("tr");  // Tried this, but no go.  What here?
    var childrow = $(this).closest("tr");     

    if (childrow.hasClass('k-state-selected')) {        
        childrow.removeClass("k-state-selected");         
    } else {                
        childrow.addClass("k-state-selected");
        parentrow.addClass("k-state-selected");
}

})

Here's my css:

.childcheckbox, .parentcheckbox {}

Thanks for the help,

1
jquerykendo-uikendo-grid

1 Answers

2
votes

The grid is using the k-detail-row and k-master-row classes, so this should select the parent row in your click handler:

var parentRow = $(this).closest(".k-detail-row").prev(".k-master-row");
$(parentRow).addClass(".k-state-selected");