Checkbox in treegrid

[Puneet]

Hi,

I want to use checkbox as template in treegrid, which should be editable by clicking and I want to get the grid data as an array of row objects to save values.

Can you please guide me how to do this ?

I am using Angular 8.

Thanks & Regards,

Puneet

[Padmavathy Kamalanathan]

Hi Puneet, 

  

Thanks for contacting Syncfusion Forums. 

  

QUERY: edit checkbox inside template in single click 

  

We have rendered checkbox in column template of Tree Grid and achieved the single click editing and also updated the data back to Tree Grid as described below, 

1. We have binded the change event to the checkbox in the column template.
2. On checking/unchecking the checkbox, checkbox change event will be triggered. In that event, we have passed the row data along with the index of the corresponding row. Also the arguments of the change event will contain the changed value of checkbox.  
3. Using the "UpdateRow" method of Tree Grid , we have updated the value back to Tree Grid .

Please check the below code snippet, 

  

  

    <ejs-treegrid #treegrid [dataSource]='data' childMapping='subtasks' 

      [treeColumnIndex]='1'  [editSettings]='editSettings' [toolbar]='toolbar'> 

        <e-columns> 

            <e-column field='taskID' headerText='Task ID' isPrimaryKey='true' 

            width='90' textAlign='Right'></e-column> 

             ---------- 

           <e-column field='approved'  headerText='CheckBox'  

            width='90'  textAlign='Center'> 

            <ng-template #template let-data> 

              <ejs-checkbox id='check{{data.taskID}}' #checkbox  

                (change)="changeHandler($event, data)" 

                 [checked]=data.approved></ejs-checkbox> 

            </ng-template> 

            </e-column> 

        </e-columns> 

    </ejs-treegrid> 

    

  public changeHandler(args: ChangeEventArgs, data: any) : void { 

    console.log(data); // row's data 

    data.approved = args.checked; // setting the changed value to checkbox field 

    var index = data.index; // row's index 

    this.treegrid.updateRow(index, data); 

    // updating the changed value to dataSource 

    console.log(this.treegrid.dataSource); 

  

  } 

  

  

  

Please check the below sample, 

https://stackblitz.com/edit/angular-wua78l-mv3hht 

  

Please check the below help documentation, 

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

https://ej2.syncfusion.com/angular/documentation/api/check-box/#change 

  

Kindly get back to us for further assistance. 

  

Regards, 

Padmavathy Kamalanathan 

[Puneet]

Hi Puneet, 

  

Thanks for contacting Syncfusion Forums. 

  

QUERY: edit checkbox inside template in single click 

  

We have rendered checkbox in column template of Tree Grid and achieved the single click editing and also updated the data back to Tree Grid as described below, 

1. We have binded the change event to the checkbox in the column template.
2. On checking/unchecking the checkbox, checkbox change event will be triggered. In that event, we have passed the row data along with the index of the corresponding row. Also the arguments of the change event will contain the changed value of checkbox.  
3. Using the "UpdateRow" method of Tree Grid , we have updated the value back to Tree Grid .

Please check the below code snippet, 

  

  

    <ejs-treegrid #treegrid [dataSource]='data' childMapping='subtasks' 

      [treeColumnIndex]='1'  [editSettings]='editSettings' [toolbar]='toolbar'> 

        <e-columns> 

            <e-column field='taskID' headerText='Task ID' isPrimaryKey='true' 

            width='90' textAlign='Right'></e-column> 

             ---------- 

           <e-column field='approved'  headerText='CheckBox'  

            width='90'  textAlign='Center'> 

            <ng-template #template let-data> 

              <ejs-checkbox id='check{{data.taskID}}' #checkbox  

                (change)="changeHandler($event, data)" 

                 [checked]=data.approved></ejs-checkbox> 

            </ng-template> 

            </e-column> 

        </e-columns> 

    </ejs-treegrid> 

    

  public changeHandler(args: ChangeEventArgs, data: any) : void { 

    console.log(data); // row's data 

    data.approved = args.checked; // setting the changed value to checkbox field 

    var index = data.index; // row's index 

    this.treegrid.updateRow(index, data); 

    // updating the changed value to dataSource 

    console.log(this.treegrid.dataSource); 

  

  } 

  

  

  

Please check the below sample, 

https://stackblitz.com/edit/angular-wua78l-mv3hht 

  

Please check the below help documentation, 

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

https://ej2.syncfusion.com/angular/documentation/api/check-box/#change 

  

Kindly get back to us for further assistance. 

  

Regards, 

Padmavathy Kamalanathan 

Hi Padmavathy Kamalanathan,

I tried to update my treeGrid datasource by using the same example as you given but my treegrid datasource is not updating by it.

Please help me regarding this issue

Warm regards

Puneet

[Padmavathy Kamalanathan]

Hi Puneet,  

  

Thanks for your update. 

 

QUERY: Tree Grid data source is not updating  

 

We had issue in updating data source of Tree Grid using "updateRow" method and this issue has been resolved already. We request you to upgrade to the latest version 18.1.48 in order to resolve the issue.  

  

If you face the same issue even after updating to the latest version, we request you to share us the below details, 

  

1. Complete Tree Grid rendering code.
2. Please share your Essential Studio version details.
3. If possible, please share us issue reproducible sample or reproduce the issue in the sample shared by us in our previous update.
4. Share us screenshot of error with stack trace (if any)
5. Share us video demonstrating the issue.

Regards, 

Padmavathy Kamalanathan