Unable to get the change event of checkbox in tree grid

[Dileep]

Hi 

please check below code . I have added the checkbox on parent and child level . but when on clicking the checkbox the change handler is not getting triggered . please suggest . 

 <ejs-treegrid [dataSource]='dataUsers' [pageSettings]='pageSetting' allowPaging='true'

                    [editSettings]='editSettings'  [allowSorting]='true' childMapping='children'

                     [treeColumnIndex]='0'  enableCollapseAll="true">

                        <e-columns>

                            <e-column field='iconExpand' headerText='' width='20'></e-column>

                            <e-column field='approved'  type="checkbox"  width='20'>

                            <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-column field='name' headerText='Name' width='90'></e-column>

                           

                            <e-column field='email' headerText='Email ID' width='150'></e-column>

                            <e-column field='role' headerText='Role' width='90'></e-column>

                            <e-column field='childrenCount' headerText='Mapped clients' width='90'></e-column>

                            <e-column field='mappedBy' headerText='Mapped by' width='90'></e-column>

                            <e-column field='mappedOn' headerText='Mapped on' width='90'></e-column>

                            <e-column field='actions' headerText='' width='90' textAlign='right'>

                                <ng-template #template let-data>

                                    <span *ngIf="data.pencil">

                                            <span>

                                            <img src="./assets/images/icons/edit_black.svg" width="18"/>

                                            </span>

                                            </span>

                                    <span *ngIf="data.trash" class="px-2 ">

                                        <span>

                                        <i class="fas fa-trash align-vertical"></i>

                                        </span>

                                    </span>

                                </ng-template>

                            </e-column>

                        </e-columns>

                    </ejs-treegrid>

[Farveen Sulthana Thameeztheen Basha]

Hi Dileep, 

We have checked your reported problem by preparing sample from your provided details. But we are unable to replicate the problem at our end. 

Further analyzing you have used both type checkbox property and ejs-checkbox as template column. change event will be triggered on clicking the template column checkbox. If you use type checkbox column, you can use checkboxChange event of the TreeGrid. 

Sample link:- https://stackblitz.com/edit/angular-gm58iq?file=app.component.html 

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

 

Screenshot:- 

 

We need some more additional details to find the cause of the issue. Share us the following details. 

1. Complete TreeGrid code(both app.component.html and app.component.ts)
2. Detailed Explanation of your requirement(Do you want to use type checkbox or Checkbox as template)
3. Screenshot/Video demo to replicate the issue.
4. If possible replicate the issue in the above sample and revert us back.

 

Regards, 

Farveen sulthana T 

[Dileep]

Thanks for the reply . I have implemented the same and I can get the checkbox event now . 

Next thing I want to remove the check box for children level . The checkbox should be displayed only on parent node not on childern nodes . please help me out on this . 

[Farveen Sulthana Thameeztheen Basha]

Hi Dileep,

Query#:- I want to remove the check box for children level . The checkbox should be displayed only on parent node not on childern nodes.

We have checked your query and achieved your requirement using queryCellInfo event of the TreeGrid. In this event we have hide the checkbox of the children records by adding custom CSS based on condition.

Refer to the code below:-

App.Component.html:-

 

<ejs-treegrid

    [dataSource]="data"

    allowPaging="true"

    height="350"

    childMapping="subtasks"

    [treeColumnIndex]="1"

    [selectionSettings]="selectionsettings"

    (checkboxChange)="checkboxChange($event)"

    (rowSelecting)="rowSelecting($event)"

    (queryCellInfo)="queryCellInfo($event)"

  >

    <e-columns>

      <e-column

        field="taskID"

        headerText="Task ID"

        isPrimaryKey="true"

        width="70"

        textAlign="Right"

      ></e-column>

     .  .   .

    </e-columns>

  </ejs-treegrid>

 

App.Component.ts

    queryCellInfo(args) {

            if (args.column.field == 'approved' && !args.data.hasChildRecords) {

                args.cell.closest('.e-templatecell').classList.add('e-custom'); //remove the checkbox for Parentrow by adding Custom class

            }

        }

 

App.Component.css:-

<style>

      .e-templatecell.e-custom .e-checkbox-wrapper {

        display: none;

      }

    </style>

   

Sample link: https://stackblitz.com/edit/angular-gm58iq-qf5kc2?file=app.component.ts

Screenshot:-

API link:- https://ej2.syncfusion.com/angular/documentation/api/treegrid/#querycellinfo

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

Regards,

Farveen sulthana T

[Dileep]

I have applied the but it is not working I think the html and data from my side is different . 

I am using below grid : 

 <ejs-treegrid #treegrid [dataSource]='dataUsers'[enableAltRow]="true"  [pageSettings]='pageSetting' allowPaging='true'

                    [selectionSettings]='selectionsettings' [allowSorting]='true' childMapping='children'

                     [treeColumnIndex]='1' enableCollapseAll="true" (checkboxChange)="checkboxChange($event)"

                     (rowSelecting)="rowSelecting($event)"  (queryCellInfo)="queryCellInfo($event)">

                        <e-columns>

                            <e-column field='iconExpand' headerText='' width='20'></e-column>

                            <e-column type="checkbox" field="approved" width='40'>

                                <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-column field='name' headerText='Name' width='120' clipMode='EllipsisWithTooltip'></e-column>

                           

                            <e-column field='email' headerText='Email ID' width='150' clipMode='EllipsisWithTooltip'></e-column>

                            <e-column field='role' headerText='Role' width='90' clipMode='EllipsisWithTooltip'></e-column>

                            <e-column field='childrenCount' headerText='Mapped clients' width='90' clipMode='EllipsisWithTooltip'></e-column>

                            <e-column field='mappedBy' headerText='Mapped by' width='90' clipMode='EllipsisWithTooltip'></e-column>

                            <e-column field='mappedOn' headerText='Mapped on' width='90' clipMode='EllipsisWithTooltip'></e-column>

                            <e-column field='actions' headerText='' width='30' textAlign='right'>

                                <ng-template #template let-data>

                                    <span *ngIf="data.pencil">

                                            <span>

                                            <img src="./assets/images/icons/edit_black.svg" width="18"/>

                                            </span>

                                            </span>

                                    <span *ngIf="data.trash" class="px-2 ">

                                        <span>

                                        <i class="fas fa-trash align-vertical"></i>

                                        </span>

                                    </span>

                                </ng-template>

                            </e-column>

                        </e-columns>

                    </ejs-treegrid>

[Dileep]

I debugged the htm part of checkbox using the query cell info , but how to apply the style for children checkbox.

 <td class="e-rowcell e-gridchkbox e-treerowcell e-gridrowindex0level1" role="gridcell" tabindex="-1" aria-label="checkbox" aria-colindex="1" index="1">

   <div class="e-treecolumn-container">

      <span class="e-icons e-none" style="width: 10px; display: inline-block"></span><span class="e-icons e-treegridcollapse"></span><span class="e-icons e-none" style="width: 7px; display: inline-block;"></span>

      <span class="e-treecell">

         <div class="e-checkbox-wrapper e-css" style="display: none;"><input class="e-checkselect" type="checkbox" aria-label="checkbox" id="checkbox-grid-row231" style="display: none;"><span class="e-frame e-icons"></span><span class="e-label"> </span></div>

      </span>

   </div>

</td>

[Farveen Sulthana Thameeztheen Basha]

Hi Dileep,

Query#:- I debugged the htm part of checkbox using the query cell info , but how to apply the style for children checkbox.

From your provided details we suspect that you need to hide the checkbox(i.e.type checkbox) of the children records. To achieve this, we  have apply the Customization to .e-checkbox-wrapper on queryCellInfo event.

Refer to the code below:-

App.Component.ts

 

queryCellInfo(args) {

                   if (args.column.field == 'approved' && !args.data.hasChildRecords) {

                       args.cell.querySelector('.e-checkbox-wrapper').classList.add('e-custom'); // use this solution if you are using type checkbox

                       // args.cell.closest('.e-templatecell').classList.add('e-custom'); //remove the checkbox for Parentrow by adding Custom class   //use this solution if you are using template cell

                   }

  }

 

App.component.css

 

<style>

      .e-checkbox-wrapper.e-custom {

        display: none;

      }

 

</style>

Modified Sample link:- https://stackblitz.com/edit/angular-gm58iq-8sdcmb?file=app.component.html

If the above solution doesn’t meet the above requirement, share us the following details

1. Confirm whether you want to hide type checkbox or Checkbox on Template column
2. Purpose of using both checkbox in one column to proceed further.
3. If possible replicate it in the above sample and revert us.

Regards,

Farveen sulthana T

[Dileep]

Thanks for the support 

This issue is resolved and it is working now . I am able to hide the checkbox for childers level 

[Farveen Sulthana Thameeztheen Basha]

Hi Dileep,

Thanks for your update. Please get back to us if you need any further assistance. We are happy to assist you.

Regards,

Farveen sulthana T