Set checked records

[Benjamim Goulart Bessa]

Hi

I am using TreeGrid to list the features available to my users.

In my TreeGrid I set the property "showCheckbox" to true, this property works very well for my purpose, but when the data is loaded, into the TreeGrid, I need to check the records that were marked before, I save previous selections in database.

I tried some approches but without success, can you help me?

Below I paste my definition of TreeGrid and use, as "dataSource", a data manager with WebApiAdaptor.

thanks

Benjamin Bessa

 <ejs-treegrid #gridRecursosPerfil

                        (checkboxChange)='onCheckboxChange($event)'

                        (dataBound)='onDataBound($event)'

                        (rowDataBound)='rowDataBound($event)'

                        [dataSource]='resourcesItemsSource'

                        [treeColumnIndex]='0'

                        autoCheckHierarchy='true'

                        idMapping="Id"

                        hasChildMapping='isParent'

                        parentIdMapping="RecursoId"

                        height="100%">

            <e-columns>

              <e-column field="Titulo"

                        headerText='Recurso'

                        showCheckbox='true'

                        width="85%"></e-column>

            </e-columns>

          </ejs-treegrid>

[Farveen Sulthana Thameeztheen Basha]

 

Hi Benjamim, 

Thanks for contacting Syncfusion Support. 

Query#:- showCheckbox" to true, this property works very well for my purpose, but when the data is loaded, into the TreeGrid, I need to check the records that were marked before, I save previous selections in database. 

We have checked your query and we can save the checked records from getting the checkrecords index from getCheckedRowIndexes method of the TreeGrid.  CheckboxChange event get triggers while on changing the checkbox state. Using the event we can get the checkedRowIndexes and apply on reloading the data using selectCheckboxes method on DataBound event of the TreeGrid.  

Refer to the code below:- 

App.Component.html 

<ejs-treegrid #treeGridComponent [allowRowDragAndDrop]="true" 

    [autoCheckHierarchy]="true" 

    (checkboxChange)="checkboxChange($event)" 

    [dataSource]="data" 

    [treeColumnIndex]="1" 

   parentIdMapping='ParentItem' hasChildMapping='isParent'  

    (dataBound)="dataBound($event)" 

    idMapping="TaskID" 

> 

    <e-columns> 

      <e-column 

        field="TaskID" 

        headerText="Task ID" 

        width="90" 

        textAlign="Right" 

        [isPrimaryKey]="true" 

        [showCheckbox]="true" 

      ></e-column> 

          .  .  .  .  

    </e-columns> 

</ejs-treegrid> 

 

App.Component.ts 

 

export class AppComponent { 

              public data: DataManager; 

              public pageSetting: Object; 

              @ViewChild("treeGridComponent", { static: true }) treeGridComponent; 

              public selIndex: number[] = []; 

              ngOnInit(): void { 

                  .  .  . 

             } 

              checkboxChange(args) { 

                  this.selIndex = this.treeGridComponent.getCheckedRowIndexes();//get the checkedRowIndexes 

 

              } 

              dataBound(args: any) { 

                  this.treeGridComponent.selectCheckboxes(this.selIndex);   //pass the checkedRowIndex on selectCheckbox method on data reload 

              }    

Refer to the API Link:- 

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

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

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

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

Also share us the details about have faced the same data on Reloading or any other dataSource, have you faced issue on any specific scenario. Based on the details we will proceed further. 

Regards, 

Farveen sulthana T 

[Benjamim Goulart Bessa]

Hi Farveen,

I think I didn't explain myself in right way.

When my TreeGrid source is loaded, I recovery records from my database, exist in this records a property called "Ativo", this property show me that the checkbox related the record must be checked, in rowDataBound event I check the value of the property "Ativo", if value is true, I recovery the row index and add that index in my "selectedIndex" array, like code bellow.

  public rowDataBound(args: RowDataBoundEventArgs): void {

    // Obtêm o id da item que foi clicado

    if (args.data["Ativo"]) {

      var rowIndex = +closest(args.row, ".e-row").getAttribute("aria-rowindex");

      this.treeSelectedIndexs.push(rowIndex);

    }

  }

and in "dataBound" event, I try to set my "selectedIndexes" array like selectCheckboxes TreeGrid method parameter , like code below, but that approche doesn't work propertly, beacuse the checkboxes doesn't change the value in view.

  public onDataBound(args) {

    this.gridRecursosPerfil.selectCheckboxes(this.treeSelectedIndexs);

  }

[Farveen Sulthana Thameeztheen Basha]

Hi Benjamim, 

We are able to replicate the problem at our end from your code example. We understood that you need to select the checkbox by default on Initial rendering based on some condition with dataBound event of the TreeGrid and need to persist while on data-reload. 

From using your code example, while on data re-loading already selected Index gets persisted in selectedIndex variable which leads to reported problem. For example, like [1,1] same values has been passed into the selectCheckboxes method which deselects the checkbox on reload.  To overcome this  we suggest to clear the global variable(i.e this.treeSelectedIndexs) on dataBound after selection or else while on reloading the data(with button Click or some other function). 

Refer to the code below:- 

export class AppComponent { 

  public  treeSelectedIndexs: number[] = []; 

  @ViewChild("treeGridComponent", { static: true }) treeGridComponent; 

   

  updateRow() { 

    this.treeGridComponent.dataSource = projectData;    //clear the global variable on reloading the data 

  } 

   

  dataBound(args: any) { 

    if (this.treeSelectedIndexs !== null &&  this.treeSelectedIndexs.length > 0) 

      this.treeGridComponent.selectCheckboxes(this.treeSelectedIndexs); 

    this.treeSelectedIndexs = [];   //or clear on dataBound event 

  } 

  rowdataBound(args: any) { 

    if (args.data["TaskID"] == 2) { 

      var rowIndex = parseInt(args.row.getAttribute("aria-rowindex")); 

      this.treeSelectedIndexs.push(rowIndex); 

    } 

  } 

</script> 

Please get back to us if you need any further assistance on it. 

Regards, 

Farveen sulthana T 

[Benjamim Goulart Bessa]

Thank you for your answer Farveen,

I changed my approche to this sample https://stackblitz.com/edit/angular-wua78l-mv3hht?file=app.component.ts

Works fine to me, but, if I instead of  use "updateRow" method, use updateCell, throw this error 

core.js:4442 ERROR TypeError: this.editModule.updateCell is not a function

    at Edit.updateCell (ej2-grids.es2015.js:31528)

    at TreeGridComponent.updateCell (ej2-treegrid.es2015.js:3952)

Can you tell me why?

[Farveen Sulthana Thameeztheen Basha]

 

Hi Benjamim, 

Query#:- if I instead of  use "updateRow" method, use updateCell, throw this error  

 

In your provided Stackblitz, you have used updateCell method for Row EditMode(which is applicable only for Cell mode). So the reported problem occurs.  If you want to update any particular row value in case of (Row EditMode) you can use updateRow method. 

Please confirm whether you need to use Row or Cell EditMode in your sample. Also Share us the purpose of using updateCell method. Based on your details we will provide you solution accordingly. 

Regards, 

Farveen sulthana T