How to auto-expand all Detail Rows in a Kendo Grid?

12 posts, 1 answers
  1. Landon
    Landon avatar
    66 posts
    Member since:
    Nov 2010

    Posted 11 Jun 2013 Link to this post

    Hi,

    Is it possible to automatically expand every Detail Row in a Kendo Grid with jQuery? I've seen some demo's regarding expansion but they only apply to single-rows. Is it possible to expand everything at once? 

    Thanks,
    Landon
  2. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2312 posts

    Posted 12 Jun 2013 Link to this post

    Hello Landon,


    Yes this is possible to be achieved. The expandRow method of the Grid accepts a single row or a collection of rows as a parameter, so you could pass all master rows.
    E.g.
    dataBound: function() {
        this.expandRow(this.tbody.find("tr.k-master-row"));
    }

    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!
  3. Landon
    Landon avatar
    66 posts
    Member since:
    Nov 2010

    Posted 12 Jun 2013 Link to this post

    This worked perfect! - Thanks for the help.

    Landon
  4. Bryon
    Bryon avatar
    10 posts
    Member since:
    Mar 2015

    Posted 15 Aug 2019 Link to this post

    How do you do this in MVC?
  5. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 19 Aug 2019 Link to this post

    Hello, Bryon,

    You can use the same function for expanding all detail rows in an MVC project. The only difference is in the Event handler syntax (or how to add the event handler to the grid).

    Here is an example:

    @(Html.Kendo().Grid<OrderViewModel>()
       .Name("grid")
       .Events(e=>e.DataBound("expandDetails"))
        /* other configuration */
    )

    <script>
      function expandDetails(e) {
        this.expandRow(this.tbody.find("tr.k-master-row"));
      }
    </script>

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  6. lalbahadur
    lalbahadur avatar
    4 posts
    Member since:
    Jun 2010

    Posted 30 Jan in reply to Dimiter Madjarov Link to this post

    Its not working for me after upgrading my kendo library version to 2020.3.915.
  7. lalbahadur
    lalbahadur avatar
    4 posts
    Member since:
    Jun 2010

    Posted 30 Jan in reply to Landon Link to this post

    But it will not work if kendo library version upgrades to upper version 2020.3.915. Please do anyone let me know the resolution for it with latest kendo library version 2020.3.915.
  8. Courtenay
    Courtenay avatar
    23 posts
    Member since:
    Oct 2007

    Posted 01 Feb Link to this post

    Use 
    k-grouping-row
     instead of 
    k-master-row
  9. lalbahadur
    lalbahadur avatar
    4 posts
    Member since:
    Jun 2010

    Posted 01 Feb in reply to Courtenay Link to this post

    Thanks. It worked but not expanding all groups automatically as per the requirement. Please suggest the solution. This is the rendered html in my scenario attached as jpeg file.

     

     

     

  10. Nikolay
    Admin
    Nikolay  avatar
    323 posts

    Posted 02 Feb Link to this post

    Hello lalbahadur singh,

    The provided code by my colleague Alex shall be expanding all Grid rows. Furthermore, I tested this myself, and indeed, it is working just fine (Kendo UI version 2021.1.119). Please refer to the below Dojo demo I used for testing:

    In case I am missing something feel free to modify the demo or send an MVC project (for MVC scenario) to showcase the problem so I can investigate further.

    Regards,
    Nikolay
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  11. Magnus
    Magnus avatar
    1 posts
    Member since:
    Oct 2020

    Posted 10 Feb Link to this post

    In my scenario I needed to only expand the rows which was expanded by user before a refresh of the master grid was performed which closes all expanded rows.
    I saved the expanded rows in a global script variable and used it to expand only these rows in the databound event of the grid. 

    MasterGrid Events:

    .Events(events =>
    {
        events.DetailExpand("onChoiceGroupsGridDetailExpand");
        events.DetailCollapse("onChoiceGroupsGridDetailCollapse");
        events.DataBound("onChoiceGroupsGridDataBound");     
    })

    And the Scripts:

    var _ExpChGrpRowsId = [];
     
    //Saves the expanded row id in _ExpChGrpRowsId
    function onChoiceGroupsGridDetailExpand(e) {
     
        var rowId = e.sender.dataItem(e.masterRow).ID;   
     
        //Add expanded row ID if it doesn't already exists.
        if (_ExpChGrpRowsId.includes(rowId) == false) {
            _ExpChGrpRowsId[_ExpChGrpRowsId.length] = rowId;
        }
    }
     
    //Removes the collapsed row id from _ExpChGrpRowsId
    function onChoiceGroupsGridDetailCollapse(e) {
     
        var rowId = e.sender.dataItem(e.masterRow).ID;
     
        //Remove the collapsed row ID from Array   
        for (var i = 0; i < _ExpChGrpRowsId.length; i++) {
            if (_ExpChGrpRowsId[i] === rowId) {
                _ExpChGrpRowsId.splice(i, 1);
            }
        }
    }
     
    //Will check if any saved rowIds are stored in _ExpChGrpRowsId and will expand these rows
    function onChoiceGroupsGridDataBound(e) {
     
        var grid = this;
        var rows = grid.items();
     
        
        $(rows).each(function (e) {
            var row = this;
            var dataItem = grid.dataItem(row);
     
            if (_ExpChGrpRowsId.includes(dataItem.ID)) {
                grid.expandRow(row);
            }
        });
    }

     

  12. Nikolay
    Admin
    Nikolay  avatar
    323 posts

    Posted 12 Feb Link to this post

    Hi Landon,

    Thank you for clarifying the scenario.

    In this case, I suggest utilizing the approach demonstrated in the following article:

    Regards,
    Nikolay
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top