Expand all rows in a grid

[JoshK131]

Hello.

In a form displaying a grid widget with expanding rows, (cascading query) and "Select first record" is ticked.
This expands the first row when the form is displayed.
However, the requirement we have is to expand all the rows when the form is displayed.


How can this be problem be solved?

To accomplish this, running a javascript render script on the Grid widget looked to be the most appropriate solution.
Some different js scripts have been tried to accomplish this but none of them are working.


Variation 1:

$("#" + parser.m_widgetInfo.wrapperId).find(".k-grid").data("kendoGrid").expandRow(".k-master-row");


Variation 2:

var grid = $("#" + parser.m_widgetInfo.wrapperId).find(".k-grid").data("kendoGrid");
console.log(grid);
var data = grid.dataSource._data;
console.log(data);
var len = data.length;
console.log(len);
for(var i = 0; i < len; i++) {
var row = data;
console.log(row);
grid.expandRow("tr[data-uid='" + row.uid + "']"); // expands the row with the specific uid
}

[Jaymer]

Render script of a Query

Code: Select all

var grid = widget;
grid.bind("dataBound", expand);

function expand(e) {
                var row = $('#'+grid.element.attr('id') + ' tr[class="k-grouping-row"]');
                grid.expandRow(row[0]);
                grid.expandRow(row[1]);
}

In my case, we had 3 Status code for Projects: New,Open,Closed, for example.
The grid was sorted by Status DESC

I hardcoded this to expand Open & New, but not Closed.
Thats why only row[0] & row[1]

The grouping is... OK in Aware/Kendo.
Kinda breaks down if you have to paginate (like only 25,35,etc.) rows per page.
And if you return ALL rows, it can take a while to fill the grid.
But YMMV

good luck
Jaymer...

--> JaymerTip Auto Expand rows in a grid Group

[JoshK131]

Thank you very much Jaymer.

For other users, here is the script that expands all rows, based on Jaymers Script.

Code: Select all

var grid = $("#" + parser.m_widgetInfo.wrapperId).find(".k-grid").data("kendoGrid");
grid.bind("dataBound", expand);

function expand(e) {
    var row = $('#' + grid.element.attr('id') + ' tr[class="k-master-row"]');
    var len = row.length;
    for (var i = 0; i < len; i++) {
        grid.expandRow(row[i]);
    }

    var row = $('#' + grid.element.attr('id') + ' tr[class="k-alt k-master-row"]');
    var len = row.length;
    for (var i = 0; i < len; i++) {
        grid.expandRow(row[i]);
    }
}