Grid rows collapsed on Grouping ..

[Chris]

I want to Collapse all the rows, when the user drops a column for Grouping... 
I searched for any event for OnGrouping... so that i could add the collapserow api... but there is no such event..
Is there a way to specify the row to be collapsed on grouping?
 

[Dimiter Madjarov]

Hello Chris,


When grouping is performed, only the dataBinding and dataBound events are triggered. I would suggest you to bind to the dataBound event and check if there is a group present at the moment with the group() method of the dataSource. To collapse a group, you should use the collapseGroup() method of the Grid's API.
E.g.

function dataBound(e) {
    if (this.dataSource.group().length > 0) {
        var firstGroup = $(".k-grouping-row").first();
        this.collapseGroup(firstGroup);
    }
}

I hope this information was helpful for you. Wish you a great day!

Regards,
Dimiter Madjarov
Telerik

[Chris]

This solution works great.. but it just collapses the first group. I want to collapse all the group. How do I do that ?  

[Chris]

Never mind.. The following code worked... Is there a better way than this?

if (Grp && Grp.length > 0) {
        var GrpList = $(".k-grouping-row");

        for (var i = 0; i < GrpList.length; i++) {
            var firstGroup = GrpList[i];
            if (firstGroup) {
                ViewGrid.collapseGroup(firstGroup);
            }
        }
    }

[Dimiter Madjarov]

Hello Chris,


I am glad that you liked the example from my previous post. I demonstrated how to collapse the first row, because the question was referring to collapsing a specific Grid row. If you would like to collapse all rows, that the approach from your last post is the correct way to go.

I wish you a great day!

 

Regards,
Dimiter Madjarov
Telerik

[Jeremy]

        dataBound: function () {
            var grid = $("#AccountingGrid").data("kendoGrid");
            grid.collapseGroup(grid.tbody.find(">tr.k-grouping-row"));
            $('tr[role*="row"]').hide();
        }

[Dimiter Madjarov]

Hi Jeremy,


Do you need any assistance regarding this code snippet?
I am looking forward to hearing from you.

Regards,
Dimiter Madjarov
Telerik

[Travis]

01.
@{
02.    string gridName = "RaffleGrid";
03.}
04.<input type="button" onclick="collapseAll()" value="Collapse All" />
05.<input type="button" onclick="expandAll()" value="Expand All" />
06.
07.    <script type="text/javascript">
08.
09.        var grid;
10.
11.        $(document).ready(function () {
12.
13.
14.            grid = $("@string.Format("#{0}", gridName)").data("kendoGrid");
15.            grid.bind("dataBound", collapseAll);
16.
17.        });
18.
19.        function collapseAll() {
20.
21.            grid.tbody.find("tr.k-grouping-row").each(function (index) {
22.                grid.collapseGroup(this);
23.            });
24.
25.        }
26.
27.        function expandAll() {
28.
29.            grid.tbody.find("tr.k-grouping-row").each(function (index) {
30.                grid.expandGroup(this);
31.            });
32.
33.        }
34.
35.    </script>

From an mvc razor view - collapse all after data bind - couple of buttons

[Dimiter Madjarov]

Hello Travis,

Thank you for sharing this with the community.

Regards,
Dimiter Madjarov
Telerik

 

 

[James]

how do i do the same with a number of groups, lets say i have 4 groups, i want the page to load with the groups collapsed.  modyfying above to the snippet below does not work.

    grid.bind("dataBound", function (e) {
        if (this.dataSource.group().length > 0) {
            $(".k-grouping-row").each(function (group) {
                this.collapseGroup(group);
            });
        }
    });
}

 

thanks,
inna

[Dimiter Madjarov]

Hello James,

The following approach is working on our end:

function onDataBound(e) {
    var grid = this;

    if (grid.dataSource.group().length > 0) {
        $(".k-grouping-row").each(function () {
            grid.collapseGroup(this);
        });
    }
}

Regards,
Dimiter Madjarov
Telerik

 

 

[Soni]

Hi,

I need to get specific rows in the grid which are collapsed and make them collapsed even after page refresh. How can i do this?

 

 

[Dimiter Madjarov]

Hello Soni,

You could check the following documentation page, which demonstrates a sample approach to achieve the task.

Regards,
Dimiter Madjarov
Telerik by Progress

 

 

[Raj]

 

Hello

Grouping works fine with the above provided code but the scrollable is not working when having many number of rows(5000). How to fix this making scrollable? 

Thanks

Raj

[Viktor Tachev]

Hello Raj,

When you have a large number of records it is recommended to use paging. This way only the items for the current page can be retrieved from the server. Thus, the performance should be improved. Moreover, paging allows grouping to be enabled for the Grid. Please examine the following article that illustrates how you can have a Grid component with paging bound to remote data.

• http://demos.telerik.com/kendo-ui/grid/remote-data-binding

Alternatively, you can enable Virtual Scrolling for the Grid. However, have in mind that in this mode grouping is not supported. If you would like additional information on virtual scrolling you would find the article below interesting.

• http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#virtual-scrolling

Regards,
Viktor Tachev
Telerik by Progress

[Raj]

Thanks Victor , I will go with paging.