This is a migrated thread and some comments may be shown as answers.

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

12 Answers 2123 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Landon
Top achievements
Rank 2
Landon asked on 11 Jun 2013, 06:07 PM
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
Dinesh
Top achievements
Rank 1
commented on 01 Jun 2021, 03:29 PM

I have one kendo grid and also one child grid inside that

So how to expand that child grid without pressing + icon when some conditions met

In angular 8
Nikolay
Telerik team
commented on 03 Jun 2021, 08:25 AM

Hi Dinesh,

This thread discusses Kendo UI Grid for jQuery. For inquiries concerning Grid for Angular please submit a new one so the respective team and users using the same suite can respond accordingly.

Regards,

Nikolay

12 Answers, 1 is accepted

Sort by
0
Accepted
Dimiter Madjarov
Telerik team
answered on 12 Jun 2013, 07:26 AM
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!
0
Landon
Top achievements
Rank 2
answered on 12 Jun 2013, 04:16 PM
This worked perfect! - Thanks for the help.

Landon
0
Bryon
Top achievements
Rank 2
Iron
answered on 15 Aug 2019, 09:06 PM
How do you do this in MVC?
0
Alex Hajigeorgieva
Telerik team
answered on 19 Aug 2019, 12:25 PM
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.
samee
Top achievements
Rank 1
commented on 20 Apr 2022, 04:42 AM

its not working in asp.net core 

Stoyan
Telerik team
commented on 21 Apr 2022, 02:25 PM

Hi Samee,

If you need to expand the first row, I would suggest to utilize the approach from the Grid Detail template Demo:

    function expandDetails() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }

Alternatively, if you'd like to expand all child rows, then get all k-master-row elements, iterate through them and pass the rows to the expandRow method:

function expandDetails(e){ 
       $(".k-master-row").each(function (index) {
            grid.expandRow(this);
        });
}

I hope the information above is useful.

0
lalbahadur
Top achievements
Rank 1
answered on 30 Jan 2021, 06:56 PM
Its not working for me after upgrading my kendo library version to 2020.3.915.
0
lalbahadur
Top achievements
Rank 1
answered on 30 Jan 2021, 07:09 PM
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.
0
Courtenay
Top achievements
Rank 1
answered on 01 Feb 2021, 06:11 AM
Use 
k-grouping-row
 instead of 
k-master-row
0
lalbahadur
Top achievements
Rank 1
answered on 01 Feb 2021, 01:14 PM

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.

 

 

 

0
Nikolay
Telerik team
answered on 02 Feb 2021, 10:07 PM

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/.

0
Magnus
Top achievements
Rank 1
answered on 10 Feb 2021, 12:35 PM

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);
        }
    });
}

 

0
Nikolay
Telerik team
answered on 12 Feb 2021, 10:22 AM

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/.

1
Rob
Top achievements
Rank 1
Veteran
Iron
answered on 02 Dec 2021, 06:04 AM

The answers in this question did not work for me. 

After upgrading my version , only the first detail would open and somehow the next detail grid would be destroyed. 

Not sure what was happening , an obvious symptom is that the template uses the id to make the Name unique

@(Html.Kendo().Grid(Of TELE2_MiCCScheduler.WeekSummary).Name("Office_#=id#")

But if I tried to expand all details on Databound, the names were all the same name ( using the first id) 

If I just commented out the single line to "expand " then the grid worked perfectly  ( but you need to manually expand each master.

In the end I found if I step through each master row and expend that, then grid works fine

This works

 function expand(e) {        
           grid = $("#Grid").data("kendoGrid");
            $(".k-master-row").each(function (index) {
                grid.expandRow(this);
            });          
        }

But trying to do all of them at once , even with adding a delay broke my grid


FYI, my product has been used by many customers for many years.. it just stopped when I upgraded to 2021.1.330.545

Hopefully this helps someone.

Eyup
Telerik team
commented on 03 Dec 2021, 06:16 PM

Hi Rob,

Thanks for sharing your solution and experience with this. I hope it will prove helpful to other devs as well.

There was some point between the version when it was decided that the .k-master-row class should be assigned to detail rows as well. Previously, only the main level rows had this class. It is possible that this change caused this kind of issue.

The solution in this article is very similar to your approach and it should work in newer versions, too:
https://docs.telerik.com/kendo-ui/knowledge-base/grid-how-to-expand-and-collapse-details-rows

Jennifer
Top achievements
Rank 1
commented on 18 May 2022, 03:24 PM

Worked perfectly for me. Thank you.
Tags
Grid
Asked by
Landon
Top achievements
Rank 2
Answers by
Dimiter Madjarov
Telerik team
Landon
Top achievements
Rank 2
Bryon
Top achievements
Rank 2
Iron
Alex Hajigeorgieva
Telerik team
lalbahadur
Top achievements
Rank 1
Courtenay
Top achievements
Rank 1
Nikolay
Telerik team
Magnus
Top achievements
Rank 1
Rob
Top achievements
Rank 1
Veteran
Iron
Share this question
or