It will clear selected checkbox after treegrid.refresh,Change data is not displayed synchronously

[liu]

I directly changed the datasource of treegrid, but the page will not synchronize my changes unless I use treegrid Refresh method, but this method will clear all my selected checkboxes. What should I do.

My requirement is that the page content is updated in real time by changing the datasource, and the checkbox will not be unchecked

This is my example:https://stackblitz.com

Because I need to update a lot of data at one time, I used the method of changing datasource in combination with the method of refresh instead of the method of AddRecord. Is there a way to directly change the datasource, but the checkbox will not be unchecked, and the modified content can be immediately updated to the page.

Attachment: Video_20220618143214_55e2a75.zip

[Pon Selva Jeganathan]

Hi Liu,

Thanks for contacting syncfusion forum.

Query: Is there a way to directly change the datasource, but the checkbox will not be unchecked, and the modified content can be immediately updated to the page.

We achieved your requirement by using getCheckedRowIndexes method and selectCheckboxes method and actionComplete event of the tree grid. The getCheckedRowIndexes method is used to get the checked row index value and using selectCheckboxes method select the checkbox based on index value. 

  

Here we have button click event to get the checked row indexes value using getCheckedRowIndexes method and in actionComplete event we have select the checkbox using selectCheckboxes method. 

Please refer to the below code snippet,

App.Component.html

 <button (click)="editRow()">editRow</button>

salvar

</button>

 

<ejs-treegrid #treegrid [dataSource]="data" height="400" autoCheckHierarchy="true"

[selectionSettings]='selectionSetting' [enablePersistence]="false" childMapping="subtasks" [treeColumnIndex]="1"

 (actionComplete)="complete($event)">

..

 

App.Component.ts

 

editRow() {

    this.treegrid.dataSource[0]['FIELD1'] = 'cccc';

    this.treegrid.dataSource = this.treegrid.dataSource;

    …

    this.treegrid.refresh();

       

    this.selectrec = this.treegrid.getCheckedRowIndexes()[0]; // here we collect the checked row indexes

  }

 

 complete(args) {

    

    if (args.requestType == 'refresh') {

      this.treegrid.selectCheckboxes([this.selectrec]); // here we select the checkbox

    }

  }

 

Please refer to the below sample,

https://stackblitz.com/edit/angular-bcjwyq-2zuvhf?file=app.component.html,app.component.ts,jsontreegriddata.ts

Please refer to the below API documentation:

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

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

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

Note: Using selectCheckboxes method, we can check the checkboxes by passing the desired row Indexes. When we pass the parent record index in the selectCheckboxes method, all children record checkboxes for the corresponding parent record will be selected. So, there is no need to pass the child record index along with the parent record index.

Kindly get back to us for further assistance.

Regards,

Pon selva

[liu]

When enablevitualization is enabled, there are 50K data. After the first and last items are selected, using the method you said, the checkbox selection will be disordered. 。

demo:https://stackblitz.com/edit/angular-nciatr?file=main.ts,app.component.ts,app.component.html

Select the first and last items to execute the refresh method, and select them through the selectcheckboxes method. The selected content is not what I originally selected

So I want to keep the original selected record after refreshing in the case of virtual scrolling

Attachment: Video_20220621092150_366c6e75.zip

[Farveen Sulthana Thameeztheen Basha]

Hi Liu,

Before proceeding with this, we would like to let you know that we don’t have Virtualization support for autoCheckHierarchy feature. So it won’t satisfy the autoCheckHierarchy behavior. In the meanwhile we will check for the feasibility of this requirement and let you know further details by on or before 23^rd June 2022. Until then we appreciate your patience.

Regards,

Farveen sulthana T

[Pon Selva Jeganathan]

Hi Liu,

Sorry for the delayed response.

On further validation, autoCheckHierarchy feature with virutalization cannot be implemented using any workaround in the sample level also and currently we don't have any plan to implement this feature.

Kindly get back to us for further assistance.

Regards,

Pon selva