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

[Landon]

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]

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]

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

[Dimiter Madjarov]

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

[Landon]

This worked perfect! - Thanks for the help.

Landon

[Bryon]

How do you do this in MVC?

[Alex Hajigeorgieva]

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

[samee]

its not working in asp.net core 

[Stoyan]

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.

[lalbahadur]

Its not working for me after upgrading my kendo library version to 2020.3.915.

[lalbahadur]

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.

[Courtenay]

Use 

k-grouping-row

 instead of 

k-master-row

[lalbahadur]

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.

 

 

 

[Nikolay]

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:

• https://dojo.telerik.com/EYuwiLOQ

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

[Magnus]

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

 

[Nikolay]

Hi Landon,

Thank you for clarifying the scenario.

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

• https://docs.telerik.com/kendo-ui/knowledge-base/grid-persist-expanded-rows

Regards,
Nikolay
Progress Telerik

[Rob]

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]

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]

Worked perfectly for me. Thank you.