Expand Master-Detail Grid Row by Clicking Anywhere on Row Instead of Just the + / - Icon

[Dale]

I've been trying to find a way to expand a row in a master-detail grid by clicking on the row instead of just via the icon without much success. Can someone please point me in the right direction?

https://www.telerik.com/kendo-angular-ui/components/grid/advanced-features/hierarchy/

[Chris]

Include this in your jquery document ready section:

 

//handel TR click to show hide row detail grid
$("#grid").on("click", ".k-master-row", function(e) {
    var $target = $(e.target);
    // if you have links or other things in your rows that you don't want to
    // trigger the detail row expansion, use an if statement to ignore them.
    if (!$target.hasClass("sample-link")) {
        var $this = $(this);
        var $link = $this.find(".k-icon");
        $link.click(); // just fire the click event of the kendo detail row icon
        //$this.next().find(".k-hierarchy-cell").hide(); //fix detail row spacing due to missing icon
    }
});

[Chris]

oops - that was for the jQuery grid...

 

Look at this example

https://www.telerik.com/kendo-angular-ui/components/grid/selection/

selectableSettings

 

This might point in the right direction

 

[Svet]

Hi Dale,

We can use the built-in expandRow and collapseRow methods of the grid. Basically on (cellClick) event we can call the respective method for the desired row. We can further persist the expanded rows indexes, so that we know when to expand or collapse a row.

I hope this helps. Let me know in case further assistance is required for this case. 

Regards,
Svetlin
Progress Telerik