Hi Hamim Jeon,
Greetings from Syncfusion support.
Query #:- How to persist expanded state after edited?
To maintain expanded state after performing CRUD actions,
you can manually expand the row by using expandByKey method in actionComplete
event in Syncfusion treegrid once it updated the values. In the expanded
event, we have collected the expanded record based on PrimaryKey values and
expand the same record using expandByKey method after performing the
action.
Please refer to the following code snippet :
|
function expanded(args) {
if (args.data && !isNullOrUndefined(args.row)) {
primaryKeyList.push(args.data.taskID); //Here we collect the expanded record primary key value
}
}
function actionComplete(args) {
if (args.type === 'save') {
treegridObj.refresh();
// to main the state based on the primary key
if (primaryKeyList.length > 0) {
var task = primaryKeyList;
setTimeout(() => {
for (var i = 0; i < task.length; i++) {
console.log(task[i]);
treegridObj.expandByKey(task[i]); //collapsing row using collapseByKey method
}
}, 100);
}
this.primaryKeyList = [];
}
}
|
Please refer to the following sample : https://stackblitz.com/edit/react-c1eeyg-cubcwf?file=index.html,index.js
Please refer to the following API :
Expanded : https://ej2.syncfusion.com/react/documentation/api/treegrid/#expanded
Action complete : https://ej2.syncfusion.com/react/documentation/api/treegrid/#actioncomplete
KB link for more reference:- https://support.syncfusion.com/kb/article/11977/how-to-maintain-expand-collapsed-state-of-rows-during-page-refresh-in-javascript-treegrid
In case you are using RemoteData, we suggest to refer
the below KB:-
https://support.syncfusion.com/kb/article/11200/how-to-maintain-collapsed-state-while-performing-rowdd-with-remote-data
If the above solution doesn’t meet your requirement, share
details such as Complete TreeGrid code example, Screenshot/Video demo, Type
of dataSource you have used to proceed further.
Regards,
Shek Mohammed Asiq
