Grid rows collapsed on Grouping ..

13 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
    2153 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. Kendo UI is VS 2017 Ready
  4. 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 ?  
  5. 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);
                }
            }
        }
  6. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 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!
  7. Jeremy
    Jeremy avatar
    55 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();
            }
  8. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 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!
  9. 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

  10. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 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!
     
  11. James
    James avatar
    12 posts
    Member since:
    Jun 2015

    Posted 26 Apr 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

  12. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 27 Apr 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!
     
  13. Soni
    Soni avatar
    2 posts
    Member since:
    Feb 2016

    Posted 31 Aug 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?

     

     

  14. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 01 Sep 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.
     
Back to Top
Kendo UI is VS 2017 Ready