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 5284 Views

Grid

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

Dinesh

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

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

Accepted

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

commented on 20 Apr 2022, 04:42 AM

its not working in asp.net core

Stoyan

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.

answered on 01 Feb 2021, 01:14 PM

grid_detail_groups_html.jpg

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.

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:

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

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

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

}

});

}

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

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

commented on 18 May 2022, 03:24 PM

Worked perfectly for me. Thank you.