Updating the dataSource of the tree grid does not update it visually

[Vince Orio]

Hi Syncfusion,

TreeGrid is an amazing component and we would like to utilize it in our app however there are a few functionalities that are either not supported or obscure from the documentation.

This was the documentation that I followed for this example.  How to Cascading DropDownList with Tree Grid editing in Angular TreeGrid component - Syncfusion

I've also attached a sample Angular application.

Here are my use cases:

1. I need to update the fields of all the child rows within a parent row when the user makes a change in the parent row. It works at the moment but only visually. I've also tried programmatically updating the dataSource but it does not reflect on the Treegrid component. So my question is,  how do I change the parent row field and programmatically update its children and have it reflect on both the datasource and the treegrid component?
2. I've added an iconclass on the dropdownlist but the icons doesn't show up. How do I add icons to the dropdownlist in the treegrid?

Thank you so much and hoping for a swift reply

[Vince Orio]

Here is the attachment

Attachment: treegridquestion_3987dc16.7z

[Vince Orio]

Any update on this?

[Pon Selva Jeganathan]

Hi Vince,   

 

Thanks for contacting Syncfusion forum. 

 

We have validated your shared sample, we are able to reproduce the issue at our end. And we need time to validate the issue and we will provide further details by 23^rd  July 2021.   

 

Until then we value your patience. 

Regards,   

Pon selva   

 

[Vince Orio]

Hi,

Thanks for the response. Any update on this?

[Farveen Sulthana Thameeztheen Basha]

Hi Vince,  

We appreciate your patience. 

Query#:- how do I change the parent row field and programmatically update its children and have it reflect on both the datasource and the treegrid component? 

 

To achieve your requirement, we suggest to use setCellValue method to update the Child values on changing the value of parent record instead of updateCell method. The updateCell method supports only for Batch edit mode. In your provided sample, you have used Cell mode, so you can use setCellValue method. The setCellValue method updates particular cell value based on the given primary key value. 

 

Refer to the code below:- 

App.Component.ts 

 

setChildren(userId: string, parentEntity: any, newPermission: string): void { 

         

        const rowIndex = parentEntity.index; 

        const childRecords = parentEntity.childRecords; 

        childRecords.forEach((childRecord: { index: number }) => { 

            this.gridObj.setCellValue(childRecord.ID, userId, newPermission); 

        }); 

        this.gridObj.setCellValue(parentEntity.ID, userId, newPermission);  // updates the  

 

    } 

 

Sample Link:- https://stackblitz.com/edit/angular-wxg9fr-ossucd?file=app.component.ts 

Screenshot:-  (In the below screenshot, we changed User1 field value into Restrict which will change the values of the child record. It reflects both on treegrid dataSource and UI ) 

 

 

API Link:- https://ej2.syncfusion.com/angular/documentation/api/treegrid/#setcellvalue 

Query#:-I've added an iconclass on the dropdownlist but the icons doesn't show up. How do I add icons to the dropdownlist in the treegrid? 

 

We have forwarded the query to the corresponding team and update you further details by 26^th July 2021. Until then we appreciate your patience. 

Regards, 

Farveen sulthana T 

[Vince Orio]

Hello, 

This doesn't seem to work as expected. The user column exists multiple times in the Grid. Although they are in different stacked headers, they are still the same column. Updating one cell should also update the other one.

[Farveen Sulthana Thameeztheen Basha]

Hi Vince,  

Query#:- The user column exists multiple times in the Grid. Although they are in different stacked headers, they are still the same column. Updating one cell should also update the other one. 

 

We have checked your query and when we change the value of the cell ( same column multiple times in Grid), by default it won’t update the value of another one. It just assign the value into the dataSource but doesn’t reflect the values into UI. If you want to reflect the changes in UI, we need to refresh the using refresh method of the TreeGrid. 

Refer to the code below:- 

App.Component.ts:- 

 

setChildren(userId: string, parentEntity: any, newPermission: string) : void { 

    // this works visually but does not update the dataSource 

    const rowIndex = parentEntity.index; 

        const childRecords = parentEntity.childRecords; 

        childRecords.forEach((childRecord: { index: number 

    }) => { 

      this.gridObj.setCellValue(childRecord.ID, userId, newPermission);   //update the child values into the dataSource 

    }); 

    this.gridObj.setCellValue(parentEntity.ID, userId, newPermission);   //update parent value 

    this.gridObj.refresh();     //refresh the TreeGrid 

  } 

API Link:- https://ej2.syncfusion.com/angular/documentation/api/treegrid/#refresh 

Sample Link:- https://stackblitz.com/edit/angular-ttzz8c-x3v36a?file=app.component.ts 

 

Query#:-I've added an iconclass on the dropdownlist but the icons doesn't show up. How do I add icons to the dropdownlist in the treegrid?  

 

We have prepared sample with Icons on dropdownList. It has been rendered properly. We suspect that CSS class for corresponding Icons has not been referred properly for the Icons placed in your sample.  

 

Sample Link:- https://stackblitz.com/edit/angular-ttzz8c-x3v36a?file=app.component.ts 

Screenshot:- 

 

 

Reference demo Link for Dropdownlist:- 

https://ej2.syncfusion.com/angular/demos/#/material/drop-down-list/grouping-icon 

 

Please ensure to add Icons as like above sample to overcome the problem.  After following the above still faced Issue please get back to us with further details. 

Regards, 

Farveen sulthana T