Hi Viji Palanisamy,
Based on your query, you want to maintain the expanded
rows after sorting. We have achieved your requirement at the sample level.
Please refer to the below code snippet for more reference:
|
Index.js
let gridInstance;
let expandedIndexes = [];
const detailDataBound=(args)=>{
const rowElement =
args.detailElement.parentElement.previousSibling;
const rowIndex =
rowElement.getAttribute('data-rowindex');
expandedIndexes.push(rowIndex);
}
|
In this detailDataBound event, it triggers after
the detail row is expanded. This event triggers initially upon expansion. We
can retrieve the expanded row index in this event and store it in one global
variable.
|
Index.js
const load=()=>{
var
grid=document.getElementsByClassName('e-grid')[0].ej2_instances[0]
grid.on('detail-state-change',
(args) => {
if (args.isExpanded) {
const rowElement = args.detailElement.parentElement;
const rowIndex = rowElement.getAttribute('data-rowindex');
if
(!expandedIndexes.includes(rowIndex)) {
expandedIndexes.push(rowIndex);
}
}
else{
const rowElement = args.detailElement.parentElement;
const rowIndex = rowElement.getAttribute('data-rowindex');
const indexToRemove = expandedIndexes.indexOf(rowIndex);
if (indexToRemove !== -1) {
expandedIndexes.splice(indexToRemove, 1);
}
}
});
}
|
Currently, we don't have any event for expanding and
collapsing the child grid. Therefore, we use the internal event of "detail-state-change"
in the grid.on() function and check whether it is in the expanded state
using the isExpanded property. Then, we retrieve the row indexes and
store them in the expandedIndexes variable.
|
Index.js
const actionComplete = (args) => {
if (args.requestType === 'sorting') {
expandedIndexes.forEach(index => {
gridInstance.detailRowModule.expand(parseInt(index));
});
}
};
|
When sorting, we expand the records based on their index
using the expand method in the actionComplete event. Please refer
to the below sample for more reference:
Sample: https://stackblitz.com/edit/react-h4777q-vhwkiz?file=index.js
actionComplete: https://ej2.syncfusion.com/react/documentation/api/grid/#actioncomplete
Load: https://ej2.syncfusion.com/react/documentation/api/grid/#load
detailDataBound: https://ej2.syncfusion.com/react/documentation/api/grid/#detaildatabound
Please let us know if you have any further queries.
Regards,
Vikram S
