How to check parents when all sibling items are checked

[???]

html : 

<ejs-treegrid #grdR02

                       locale="ko"

                       ngClass="bg-none"

                       [dataSource]="grdR02Data"

                       [height]="grdR02Height"

                       idMapping="menuCd"

                       parentIdMapping="upMenuCd"

                      [treeColumnIndex]="2"

                       [allowResizing]="true"

                       (keydown)="keydown($event)"

                      [allowExcelExport]="true"

                       [allowSelection]="true"

                       [selectionSettings]="selectionSettings"

                       (rowSelected)='grdR02RowSelected($event)'>

  <e-columns>

<e-column field="idx"      headerText="idx"         headerTextAlign="Center"  width="50"  textAlign="Center"></e-column>

<e-column field="chk" headerTextAlign="Center" width="40" minWidth="30" maxWidth="50" textAlign="Center" [headerTemplate]="template_chk_header" [template]="template_chk">

<ng-template #template_chk_header let-data>

          <ejs-checkbox [(checked)]="headerChk" (change)="grdR02HeaderChkChange($event)"></ejs-checkbox>

          </ng-template>

          <ng-template #template_chk let-data>

               <a2m-checkbox [checked]="grdR02Data[data.index]?.chk" (change)="grdR02ChkChange($event, data)"></a2m-checkbox>

          </ng-template>

      </e-column>

      <e-column field="menuNm"   headerText="menuNm"       headerTextAlign="Center"  width="230" textAlign="Left"></e-column>

      <e-column field="pgmCd"     headerText="pgmCd" headerTextAlign="Center"  width="70"  textAlign="Center"></e-column>

      <e-column field="pgmNm"     headerText="pgmNm"   headerTextAlign="Center"  width="150" textAlign="Left"></e-column>

      <e-column field="lvlSn"    headerText="level"         headerTextAlign="Center"  width="40"  textAlign="Center"></e-column>

      <e-column field="useYnNm"  headerText="useYn"         headerTextAlign="Center"  width="40"  textAlign="Center"></e-column>

      </e-columns>

</ejs-treegrid>

ts :

grdR02ChkChange(event: any, data: any) {

    this.checkTree(data, event.checked);

    this.headerChk = this.commonGridService.gridDataChkChange(this.grdR02Data);

  }

  checkTree(data: any, checked: boolean) {

    const childrenRecords = data.childRecords;

    if ( childrenRecords ) {

      for ( let i = 0; i < childrenRecords.length; i++ ) {

        const index = childrenRecords[i].index;

        this.grdR02Data[index].chk = checked;

        if ( childrenRecords[i].childRecords && childrenRecords[i].childRecords.length > 0 ) {

          this.checkTree(childrenRecords[i].childRecords, checked);

        }

      }

    }

  }

We have implemented the logic to check all child items when checking, but on the contrary,

it is difficult to have the parent checked when all siblings are checked.

[Pon Selva Jeganathan]

Hi Customer,

Query: We have implemented the logic to check all child items when checking, but on the contrary, it is difficult to have the parent checked when all siblings are checked.

We achieved your requirement by below way,

Method1:

You can use the autoCheckHierarchy feature of the TreeGrid to automatically check parent items when all child items are checked. This feature enables hierarchical checkbox selection, meaning that when you check a parent record's checkbox, it will also check all its child records' checkboxes.

We have already discussed same in our help documentation. Refer to the below help documentation,

https://ej2.syncfusion.com/angular/documentation/treegrid/columns/columns#checkbox-column

Refer to the below demo,

https://ej2.syncfusion.com/angular/demos/#/material3/treegrid/checkbox-column

Method2:

Upon using checkbox as Template column(on custom approach), you can use your existing code logic with some modifications. Your current code is almost correct, but you can make some adjustments to ensure that when all childs are checked, the parent is also checked.

Refer to the below code example,

grdR02ChkChange(event: any, data: any) {

    this.checkTree(data, event.checked);

    //this.headerChk = event.checked;

    this.treegrid.dataSource[data.index].c1 = event.checked;

 

    //here handle the header checkbox hanges

    for (var i = 0; i < (this.treegrid.dataSource as any).length; i++) {

      if ((this.treegrid.dataSource[i] as any).c1 == true) {

        this.header_inx.push(i);

      }

    }

    console.log(this.header_inx.length);

    if (this.header_inx.length == (this.treegrid.dataSource as any).length) {

      this.headerChk = true;

    } else {

      this.headerChk = false;

    }

 

    this.treegrid.refresh();

    this.header_inx = [];

  }

 

 

checkTree(data: any, checked: boolean) {

    const childrenRecords = data.childRecords;

    

    if (childrenRecords) {

      for (let i = 0; i < childrenRecords.length; i++) {

        const index = childrenRecords[i].index;

        (this.treegrid.dataSource[index] as any).c1 = checked;

 

        if (

          childrenRecords[i].childRecords &&

          childrenRecords[i].childRecords.length > 0

        ) {

          this.checkTree(childrenRecords[i].childRecords, checked);

        }

      }

    } else {

      this.inx.push(data.index);

 if (data.parentItem != undefined) {

      if (data.parentItem.c1 != checked) {

        this.parent_inx.push(data.parentItem.index);

        var child = (this.treegrid.flatData[data.parentItem.index] as any)

          .childRecords;

        for (let i = 0; i < child.length; i++) {

          if (child[i].c1 == checked) {

            this.select_inx.push(i);

          }

        }

        if (this.select_inx.length == child.length - 1 && checked == true) {

          //here we have update the value when all the child records are checked

          this.treegrid.dataSource[data.parentItem.index].c1 = checked;

          this.select_inx = [];

        } else {

          this.treegrid.dataSource[data.parentItem.index].c1 = false;

        }

      }

      this.select_inx = [];

 

In the above code example, when checking the child record, we have checked the parent checkbox and update the value.

Refer to the below sample,

https://stackblitz.com/edit/angular-e6t7ct-yqzdh8?file=src%2Fapp.component.ts

Kindly get back to us for further assistance.

Regards,

Pon selva

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.