Grid rows collapsed on Grouping ..

16 posts, 1 answers
  1. Chris
    Chris avatar
    29 posts
    Member since:
    Feb 2013

    Posted 22 May 2013 Link to this post

    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?
     
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2207 posts

    Posted 23 May 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Chris
    Chris avatar
    29 posts
    Member since:
    Feb 2013

    Posted 28 May 2013 Link to this post

    This solution works great.. but it just collapses the first group. I want to collapse all the group. How do I do that ?  
  4. Answer
    Chris
    Chris avatar
    29 posts
    Member since:
    Feb 2013

    Posted 28 May 2013 Link to this post

    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);
                }
            }
        }
  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2207 posts

    Posted 28 May 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Jeremy
    Jeremy avatar
    56 posts
    Member since:
    Nov 2011

    Posted 05 Dec 2013 Link to this post

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

    Posted 06 Dec 2013 Link to this post

    Hi Jeremy,


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

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Travis
    Travis avatar
    8 posts
    Member since:
    Jul 2013

    Posted 01 May 2015 Link to this post

    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

  9. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2207 posts

    Posted 04 May 2015 Link to this post

    Hello Travis,

    Thank you for sharing this with the community.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  10. James
    James avatar
    12 posts
    Member since:
    Jun 2015

    Posted 26 Apr 2016 in reply to Dimiter Madjarov Link to this post

    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

  11. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2207 posts

    Posted 27 Apr 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  12. Soni
    Soni avatar
    2 posts
    Member since:
    Feb 2016

    Posted 31 Aug 2016 in reply to Dimiter Madjarov Link to this post

    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?

     

     

  13. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2207 posts

    Posted 01 Sep 2016 Link to this post

    Hello Soni,

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

    Regards,
    Dimiter Madjarov
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  14. Raj
    Raj avatar
    21 posts
    Member since:
    Nov 2016

    Posted 23 Feb in reply to Dimiter Madjarov Link to this post

     

    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

  15. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1667 posts

    Posted 27 Feb Link to this post

    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.


    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.



    Regards,
    Viktor Tachev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  16. Raj
    Raj avatar
    21 posts
    Member since:
    Nov 2016

    Posted 28 Feb in reply to Viktor Tachev Link to this post

    Thanks Victor , I will go with paging.
Back to Top