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