ExpandRow on groupHeader click

[Gaetano]

Hi,
I have  a grid  and when grouped I can expand/collapse a group clicking on a small arrow on the left of the group header. I would like to expand/collapse the group clicking on any point of  the groupHeader not only on the small arrow.
There's some settings that i can use in order ti obtain that effect? or some workaround?

thanks

Fabio  

[Iliana Dyankova]

Hi Fabio,

There are expandGroup() /  collapseGroup() methods from the Grid's API which can be used for this scenario.

Regards,
Iliana Nikolova
Telerik

[Fred]

I'm sorry but this answer doesn't help.

A groupHeader need to be expanded/collapsed, how to know the current state ? How to call collapseGroup() ?

A toggle function would have been a smarter approach.

I even have tried to call the click event attached to the groupHeader icon but it generate a stack overflow.

This doesn't work:

var grid = $("#grid").data("kendoGrid");
   grid.table.find(".k-grouping-row").each(function () {
    $(this).click(function(){    $(this).find('a.k-icon').trigger('click');   });
   });

 

I've wasted my day trying to enable a feature that should has been native.

I've asked arround and all my users have come with the same feedback: by default the full text of the group header is expected to be clickable !

 

So how am I supposed to solve this case ?

[Konstantin Dikov]

Hi Fred,

For your convenience, following is a dojo example with the requirement that you have:

• http://dojo.telerik.com/ijeVo

Please note that if you are using an older version you might need to change the jQuery selector for the collapse icon.


Best Regards,
Konstantin Dikov
Telerik by Progress

[Robert Madrian]

Hello Konstantin,

I use the Code in the sample here http://dojo.telerik.com/ijeVo to expand/collapse grouped rows - the only Problem with this solution is that it isn't possible to expand/collapse by click on the "arrow" which is use to expand/collapse without the Code here:

 

$(".k-grouping-row").click(function () {
                   var expanded = $(this).find(".k-i-collapse").length > 0;
                   if (expanded) {
                       e.sender.collapseGroup(this);
                   }
                   else {
                       e.sender.expandGroup(this);
                   }
               })

 

how to have the expand/collapse on the Group row and the arrow?

robert

[Konstantin Dikov]

Hello Robert,

Since the arrow will still execute the toggling of the group, you need to add a condition that will not execute the custom logic when the arrow is clicked:

• http://dojo.telerik.com/ijeVo/24

Hope this helps.


Regards,
Konstantin Dikov
Progress Telerik

[Robert Madrian]

Perfect - Thank's