Tree Grid mantain collapsed rows on re render the grid

[Cesar Smerling]

Hello! 

I want to know if there is a way to mantain the state of the collapsed and expanded rows in the tree grid when I update the data source (data source is an object locally).

In my case when I edit one cell could update other values in others rows. Now we are re building the rows and passing to the dataSource attribute of the grid, this recreates all the rows but the collapsed/expanded state are not maintain (I suppose because the grid thinks that there is new rows). So I have some question to understand the grid and how to use it:

1) In this is case is there a way to maintain the collapsed/expanded row in an easy way

2) Is there a way to update only the rows that changed in an updated(they have primaryKey). I tried use the slice and unshift method but doesn't work on tree grid, I tried too the updateRow method but I don't know exactly what to pass to the second argument (ITreeData). Maybe if a manage to update only the rows that change the state of the collapsed/expanded rows are mantain. And could be fast to update if virtualization is not enabled.

Thanks

[Padmavathy Kamalanathan]

Hi Cesar, 

 

Thanks for contacting Syncfusion Forums. 

 

Query: Tree Grid should maintain collapsed row state on updating a row 

 

From your query, we understand that you need to update particular row data and maintain the expand/collapse state even after updating that row. We can achieve your requirement by using the “updateRow” method of Tree Grid as you have mentioned.  

 

Please check the below code snippet, 

 

public clicked(e: MouseEvent): void { 

  this.treegrid.updateRow(1, {taskID: 2, taskName: "Changed"});  

  //calling updateRow method by passing row index and data object to be updated 

} 

 

Please check the below sample, 

https://stackblitz.com/edit/angular-rs9mrs-3xyvdw?file=app.component.ts 

 

In the above sample, we have changed the data of “taskName” column by using the updateRow method in external button click. 

 

Please check the below API help documentation, 

https://ej2.syncfusion.com/angular/documentation/api/treegrid/#updaterow 

 

Kindly get back to us for further assistance. 

Regards, 

Padmavathy Kamalanathan 

[Cesar Smerling]

Hi, thanks!

It seems to work, but I have problem to find the index of the row when some of them are collapsed.

I have rows with id and I could find it by that value, but what is the correct way to find the current index?

Thanks

[Padmavathy Kamalanathan]

Hi Cesar, 

 

Thanks for the update. 

 

Query:  I have rows with id and I could find it by that value, but what is the correct way to find the current index? 

 

If we know the id (any column value), we can find the row index of that record from the method “getCurrentViewRecords” as shown in the below code, 

 

  

  public clicked(e: MouseEvent): void { 

    let index =  this.treegrid.getCurrentViewRecords().filter((item) => item['taskID'] === 7)[0].index;  

    // fiding index of record using taskID value 

    this.treegrid.updateRow(index, {taskID: 7, taskName: "Changed"}); 

    //calling updateRow method by passing row index and data object to be updated 

} 

 

Please check the below sample, 

https://stackblitz.com/edit/angular-rs9mrs-hbaema?file=app.component.ts 

 

In the above sample, we have found the index of the “TaskID 7” from the current view record and changed that record’s “TaskName” column value in external button click. It’s index is 6 and you can find it even it’s in collapsed state. 

 

Please check the below API help documentation, 

https://ej2.syncfusion.com/angular/documentation/api/treegrid/#getcurrentviewrecords 

 

Kindly get back to us for further assistance. 

 

Regards, 

Padmavathy Kamalanathan 

[Cesar Smerling]

Hi! I cannot get it to work it right. I attached the example code.

In the example the "Update Material" button creates new rows and I check difference (there are console.log) this diffs rows are 3 in "Content 2" childs. 

This seems to work well when "Content 1" is not collapsed, but when is collapse I got  problems.

The only difference I see is that I'm using parentId rows. 

Attachment: syncfusiontest_6314cf03.zip

[Padmavathy Kamalanathan]

Hi Cesar, 

 

Sorry for the inconvenience caused. 

 

We have validated the reported scenario. We are facing issue in updating self reference data in collapsed state using updateRow method. So we have logged “Issue in updateRow method when updating collapsed self reference data” as bug. The fix for the issue will be included in our Volume 3 Beta release which is expected to be rolled out in the third week of September 2020. 

 

You can track the current status of your request, review the proposed resolution timeline and contact us for any further queries through this link, 

Feedback link: https://www.syncfusion.com/feedback/17413/issue-in-updaterow-method-when-updating-collapsed-self-reference-data 

Note: To view the above feedback, kindly login into your account. 

 

Kindly get back to us for further assistance. 

 

Regards, 

Padmavathy Kamalanathan