How to expand a group with a client click on the group header row instead of clicking on icon- Angular

[kishan]

Hello,

After doing Group By on a grid. I'd like to expand/collapse a group in a Grid by clicking the entire row of the group header, not just the litte arrow on the left.

Currently, if we click on little group by arrow on the left side it will expand/collapse the group. Instead, need to expand/collapse by clicking the entire row of the group header. 

I have attached a screenshot for better clarification. 

Any help would be appreciated. Thanks in advance. 

[Martin]

Hi Kishan,

Thank you for the provided screenshot.

The desired functionality is not supported out-of-the-box, but it can be achieved, by using a custom JavaScript implementation.

The developer can handle the DOM click event on the Grid tag and programmatically click the expand/collapse icon of the clicked row. Here is an example:

https://stackblitz.com/edit/angular-1jcuvn-w9byrh

I hope this helps.

Regards,
Martin
Progress Telerik

[Daniel Mettler]

In Kendo Version 13 you must replace .k-icon with .k-svg-icon

[Martin]

Hi Daniel,

Correct. Here is the updated example using Angular v13 and v13.0.3 of the packages:

https://stackblitz.com/edit/angular-sxdgmc

Regards,
Martin
Progress Telerik