keep the level of rows when refresh data
8 Replies
Hi Toan,
Query#:- My data is remote data. When I insert new data, this treemap expands all. I don't want it to happen.
From your provided Video demonstration, we conclude that you have used LoadChildOnDemand property to render all rows in Expanded state while using RemoteData.
After collapsing the certain records, If you are performing Add action within CurrentView data, we can maintain the state of the records with the help of getCurrentViewRecords method. We have achieved this using actionBegin and beforeDataBound event of the TreeGrid.
- On inserting new record actionBegin event of the TreeGrid will get trigger. When requestType as Add, Using getCurrentViewRecords method, we have checked the “expanded” property of each record from current view data. If a record is in collapsed state, it’s expanded property will be “false”. We have collected the “primary key” of the collapsed records in those events.
2. After performing add action beforeDataBound event will be triggered. In this event, we have updated the “expanded” state of the records(with the help of saved Primary key). Thus collapsed state will be maintained after add action.
Refer to the code below:-
|
App.Component.html:-
<ejs-treegrid #treegridObj [dataSource]='data' idMapping='TaskID' parentIdMapping='parentID' hasChildMapping='isParent' [treeColumnIndex]='1' loadChildOnDemand='true' [height]='280' (beforeDataBound)="dataBound($event)" (actionBegin)="actionBegin($event)">
<e-columns>
<e-column field='TaskID' headerText='Task ID' width='70' textAlign='Right'></e-column>
. . .
</e-columns>
</ejs-treegrid>
App.Component.ts
export class AppComponent {
@ViewChild('treegridObj')
public treegridObj: TreeGridComponent;
public primaryKeyList: any = [];
public data: Object[] = [];
dataBound(args) {
if (!this.initialRender && this.primaryKeyList.length) {
for (var key = 0; key < this.primaryKeyList.length; key++) { //looping saved primary key list
var iD = this.primaryKeyList[key];
var record = args.result.filter((e) => e["TaskID"] === iD); // filtering record of task id which matched saved primary key
if (record && record.length) {
if (record[0].expanded) { // checking if the expanded property is true
record[0].expanded = false; // resetting it to false to maintain expanded state
}
}
}
}
}
actionBegin(args): void {
if (args.requestType == "add") {
var currentViewRecord = this.getCurrentViewRecords();
this.primaryKeyList = [];
for (var i = 0; i < currentViewRecord.length; i++) { //looping current view data to check which records are in collapsed state
if (currentViewRecord[i].isParent && !currentViewRecord[i].expanded) { // if any record is in collapsed state
this.primaryKeyList.push(currentViewRecord[i].TaskID); // saving that record's primary key using which we can maintain state after adding new data
}
}
}
}
} |
Screenshot:-
API Link:-
The above suggested solution is not applicable when we perform Paging action.i.e,( If you perform Collapse action in one Page and add new record in another Page the collapsed state will not be maintained). While using remote data, on performing page action records has been newly rendered so that we cannot map the records with collapsed state with the saved Primarykey list.
Please get back to us if you need any further assistance.
Regards,
Farveen sulthana T
SIGN IN To post a reply.
