[Solved] How can groups be set to collapsed by default when using Groupable?

[Stephen]

Hello,
We are using the inbuilt GroupBy but cannot see an option to make it default to "collapsed" by default. By default groups are rendered pre-expanded - is there a way of changing this? If so, how?

Current:

// Grid definition etc
    .Groupable(groupable => groupable.Enabled(true).Groups(groups =>
        groups.Add(g => g.GroupByField)
   ))

Ideal:

// Grid definition etc
    .Groupable(groupable => groupable
        .Enabled(true)
        .Expanded(false)
        .Groups(groups =>
            groups.Add(g => g.GroupByField)
   ))

Thanks
Stephen

[Peter]

Hi,

Try with Ajax binding only. I don't believe that you can set grid to render groups collapsed with server binding.

Regards,
Peter

[Stephen]

Hi Peter
Thanks for the response. I've checked out AJAX binding and cannot find how to do it that way either... could you be more specific?

Thanks
Stephen

[Peter]

Hi,

Check this online help article and the online demo. You can also review the examples locally to find out how Ajax binding is realized.

Regards,
Peter

[Stephen]

Hi Peter
Sorry, I should have been more specific. I have no difficulties setting up the AJAX binding and associated controller actions (and have done so in our test project).

I do, however, fail to see any difference with the available grouping options when using AJAX binding instead of Server Binding, or how using AJAX binding helps overcome the issue mentioned in my original post. Neither of the help documents you specified shed any light on the subject either, or even mention grouping - and the available documentation on grouping does not contain any clues as to how the groups could be initially rendered as collapsed (I did check before posting).

To rephrase, could you be more specific about how using AJAX binding could be utilized to render groups as "collapsed" instead of "expanded" when the grid is initially loaded?

Thanks
Stephen

[Georgi Krustev]

Hello Stephen,

Currently grid does not support rendering of collapsed groups. Nevertheless we will consider the possibility to implement this feature in one of our future releases. I will forward this issue to our developers for further investigation and consideration.

Regards,
Georgi Krustev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Nikolai]

I succeded by firing up the OnLoad Client event:

.ClientEvents(events => 

{

 

 

    events.OnLoad("collapseMVCGroupedGrids"

);})

and following JavaScript:

 

 

 

function

 

 

collapseMVCGroupedGrids(e) { 

 

 

 

 

var grid = $('#' + e.target.id); 

 

 

$.each(
        grid.find('td.t-group-cell').parent('tr'), 
        function(index, value) { 
                                    $(value).attr('style', 'display: none;');  

 

 

                               }
      );

 

 

 

$.each(
        grid

 

 

.find('.t-icon'), 
        function(index, value) {
                                    if ($(value).hasClass('t-collapse' )) { 
                                        $(value).removeClass('t-collapse').addClass('t-expand'); 

 

 

                                }

 

        });
}

Enjoy!