Treegrid with multi column checkbox with priority

[Vinod Prajapati]

Hi Team,

I am working with <ejs-treegrid> in angular version 12.1.4 and to meet requirement which have menu, submenu/nestedmenu with priority p1 to p4 (checkbox column) as below.

On click of menu checkbox all child sub menu will be selected for same menu.

Selecting P1 checkbox will select P1 to P4 menu, submenu/nestedmenu.

Selecting P2 checkbox will select P2 to P4 menu, submenu/nestedmenu.

May I get any help on this

Thanks !

Vinod

[Pon Selva Jeganathan]

Hi Vinod,

Thanks for contacting the syncfusion forum.

Query: Treegrid with multi-column checkbox with priority

We are working on this query with high priority. And we need time to find a feasible solution to your requirement and will update you with further details by 22^nd July 2022.  Until then we value your patience.

In the Meanwhile, we request to share the below details:

Based on your screenshot, we understand if you select the menu checkbox of priority 1 (p1), then it will select p1, p2, p3, and p4 checkboxes with both menu and submenu items. If you select p2, then make the same selection as p1 (select the checkbox of p2 to p4 menu and submenu items). If you select the p3 or p4 column menu checkbox, then it will select the corresponding column menu and sub-menu item checkbox.

If we misunderstand your requirement, kindly share the below details:

1. Detailed explanation of your requirement
2. Confirm whether you want to select the checkbox horizontally, vertically or both.
3. Share the video demo/ screenshot of your requirement
4. Share the code example.

The provided information will be helpful to validate further.

Regards,

Pon selva

[Vinod Prajapati]

Hi Pon selva,

You understand correctly "if you select the menu checkbox of priority 1 (p1), then it will select p1, p2, p3, and p4 checkboxes with both menu and submenu items. If you select p2, then make the same selection as p1 (select the checkbox of p2 to p4 menu and submenu items). If you select the p3 or p4 column menu checkbox, then it will select the corresponding column menu and sub-menu item checkbox."

Further clarification :

We want to select the checkbox horizontally, vertically or both.

And assign priority left to right and top to bottom.

Collapse and expand menu, submenu/ nested menu accordingly.

I have referred below links for code :

https://www.syncfusion.com/forums/162533/multi-column-checkbox-in-treegrid

https://stackblitz.com/edit/angular-multi-checkbox-col?file=app.component.ts

Regards, 

Vinod

[Pon Selva Jeganathan]

Hi Vinod,

Thanks for your patience.

Query: Treegrid with multi-column checkbox with priority

We achieved your query by using the column template feature of Tree Grid and updated Child checkboxes with the checkbox change event of the parent.

Please refer to the below code example,

<ejs-treegrid id='treegrid' #treegrid [dataSource]='data' [treeColumnIndex]='1' childMapping='subtasks' >

    <e-columns>

      …….

          <e-column field='c1'  headerText='CheckBox1' width='90' textAlign='Center'>

      <ng-template #template let-data>

      <ejs-checkbox id='check{{data.taskID}}c1' #checkbox (change)="changeHandler($event, data, data.index)" 

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

      </ng-template>

      </e-column>

                <e-column field='c2'  headerText='CheckBox2' width='90' textAlign='Center'>

      <ng-template #template let-data>

      <ejs-checkbox id='check{{data.taskID}}c2' #checkbox (change)="changeHandler($event, data, data.index)" 

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

      </ng-template>

      </e-column>

                <e-column field='c3'   headerText='CheckBox3' width='90' textAlign='Center'>

      <ng-template #template let-data>

      <ejs-checkbox id='check{{data.taskID}}c3' #checkbox (change)="changeHandler($event, data, data.index)" 

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

      </ng-template>

      </e-column>

    </e-columns>

</ejs-treegrid>

 

 

 

App.component.ts

 

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

    var value = args.checked;

    var td = (<any>args.event).target.closest('td');

    var rowIndex = parseInt(td.getAttribute('index')); //get the row index

    var cellIndex = parseInt(td.getAttribute('aria-colIndex'));

    var field = (<any>this.treegrid.columns[cellIndex]).field; // get the field value

    var primaryKeyFieldName = this.treegrid.getPrimaryKeyFieldNames()[0];// get the primary key field value

    var primaryKeyValue = data[primaryKeyFieldName]; //get the primary key value

    var childMappingName = this.treegrid.childMapping;

    var length = (<any>this.treegrid.dataSource).length;

    var dataSource = this.treegrid.dataSource;

    if (

      (<any>this.treegrid.getCurrentViewRecords()[rowIndex]).hasChildRecords

    ) {

      // here we check the field value if priority(c1) then will loop until the c1 to c3

      if (field == 'c1') {

        var field_val = 'c';

        for (var i = 1; i <= 3; i++) {

          //here we check root parent or child parent using level value

          if (

            (<any>this.treegrid.getCurrentViewRecords()[rowIndex]).level == 0

          ) {

            this.checoboxchanged_parent(

              value,

 

              field_val + i.toString(),

              primaryKeyFieldName,

              primaryKeyValue,

              childMappingName,

              length,

              dataSource

            );

          } else if (

            (<any>this.treegrid.getCurrentViewRecords()[rowIndex]).level == 1

          ) {

            this.checoboxchanged_childparent(

              value,

 

              field_val + i.toString(),

              primaryKeyFieldName,

              primaryKeyValue

            );

          }

        }

      }………..

  }

 

  checoboxchanged_childparent(

    value,

 

    field,

    primaryKeyFieldName,

    primaryKeyValue

  ) {

    //updting child parent

    var parentRec = (<ITreeData[]>this.treegrid.flatData).filter(

      (e: ITreeData) => {

        if (e[primaryKeyFieldName] == primaryKeyValue) return e;

      }

    );

    (<any>parentRec[0])[field] = value;

 

    // updating sub child

    var childRec = parentRec[0].subtasks;

    var childRecLength = childRec.length;

    for (var s = 0; s < childRecLength; s++) {

      var subChildRec = (<ITreeData[]>this.treegrid.flatData).filter(

        (e: ITreeData) => {

          if (childRec[s].taskID == e.taskID) return e;

        }

      );

 

      var subChildRecLength = subChildRec.length;

      for (var c = 0; c < subChildRecLength; c++) {

        subChildRec[c][field] = value;

      }

    }

    this.treegrid.refresh();  //here refresh the grid

  }

  checoboxchanged_parent(

    value,

 

    field,

    primaryKeyFieldName,

    primaryKeyValue,

    childMappingName,

    length,

    dataSource

  ) {

    //updating the parent value in grid

    var parentRec = (<ITreeData[]>this.treegrid.flatData).filter(

      (e: ITreeData) => {

        if (e[primaryKeyFieldName] == primaryKeyValue) return e;

      }

    );

    (<any>parentRec[0])[field] = value;

    for (var i = 0; i < length; i++) {

      if (dataSource[i][primaryKeyFieldName] == primaryKeyValue) {

        //updating the child value in grid

        var childRec = (<ITreeData[]>this.treegrid.flatData).filter(

          (e: ITreeData) => {

            if (

              !isNullOrUndefined(e.parentItem) &&

              e.parentItem[primaryKeyFieldName] == primaryKeyValue

            )

              return e;

          }

        );

 

        var childRecLength = childRec.length;

        for (var c = 0; c < childRecLength; c++) {

          childRec[c][field] = value;

        }

 

        // sub child

        for (var s = 0; s < childRecLength; s++) {

          if (childRec[s].hasChildRecords) {

            var subChildRec = (<ITreeData[]>this.treegrid.flatData).filter(

              (e: ITreeData) => {

                for (var i = 0; i < childRec[s].subtasks.length; i++) {

                  if (childRec[s].subtasks[i].taskID == e.taskID) return e;

                }

              }

            );

 

            var subChildRecLength = subChildRec.length;

            for (var c = 0; c < subChildRecLength; c++) {

              subChildRec[c][field] = value;

            }

          }

        }

 

        this.treegrid.refresh();//here refresh the grid

      }

    }

  }

}

 

 

In the above code snippet, in the checkbox change event, we check whether the checked checkbox is a parent or not. Based on the parent check box change, we update the child checkbox value. Also, check whether checkboxes c1, c2, or c3 are selected. If we check the c1 checkbox using a loop, we update the c2 and c3 checkbox’s parent and child values, and so on.

Please refer to the below sample,

https://stackblitz.com/edit/angular-multi-checkbox-col-dpaecd?file=app.component.ts,app.component.html

Kindly get back to us for further assistance.

Regards,

Pon selva

[Vinod Prajapati]

Hi Pon selva,

I referred sample URL,

I test with one case :

If I select checkbox1 , Taskname =  Sub Menu Child and taskid = 4,

It should be tikced and checkbox2 and checkbox3 will be auto checked for the same row.

It should assign permission left to right (in case of child menu checked) which is not operationally working.

And will it work with nested sub menu ?

Let me know if you have any doubt in requirement.

Thanks,

Vinod

[Pon Selva Jeganathan]

Hi Vinod,

 

Thanks for the update.

 

Query: If I select checkbox1 , Taskname =  Sub Menu Child and taskid = 4, It should be tikced and checkbox2 and checkbox3 will be auto checked for the same row. It should assign permission left to right (in case of child menu checked) which is not operationally working. And will it work with nested sub menu ?

 

We achieved your query(The checkbox for the nested submenu needs to be updated. If checkbox1 is checked, the values of checkbox2 and checkbox3 are automatically updated, and so on.) by using the below code example.

 

Please refer to the below code example,

 

..

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

    var value = args.checked;

    var td = (<any>args.event).target.closest('td');

    var rowIndex = parseInt(td.getAttribute('index')); //get the row index

    var cellIndex = parseInt(td.getAttribute('aria-colIndex'));

    var field = (<any>this.treegrid.columns[cellIndex]).field; // get the field value

    var primaryKeyFieldName = this.treegrid.getPrimaryKeyFieldNames()[0]; // get the primary key field value

    var primaryKeyValue = data[primaryKeyFieldName]; //get the primary key value

    var childMappingName = this.treegrid.childMapping;

    var length = (<any>this.treegrid.dataSource).length;

    var dataSource = this.treegrid.dataSource;

    // here we checked the selected checbox row is whether parent or not

    if (

      (<any>this.treegrid.getCurrentViewRecords()[rowIndex]).hasChildRecords

    ) {

      ….

    }// this is handle the nested sub child value

 else {

      var gridData = (<ITreeData[]>this.treegrid.flatData).filter(

        (e: ITreeData) => {

          if (e[primaryKeyFieldName] == primaryKeyValue) return e;

        }

      );

      (<any>gridData[0])[field] = value;

      var parentData = data['parentItem'];

      var parentPrimaryValue = parentData[primaryKeyFieldName];

      //var parentPrimaryValue = parentData[primaryKeyFieldName];

 

      if (field == 'c1') {

        // here we check the field value if priority(c1) then will loop until the c1 to c3

        var field_val = 'c';

        for (var i = 1; i <= 3; i++) {

          this.nest_child(

            field_val + i.toString(),

            primaryKeyFieldName,

            primaryKeyValue,

            value

          );

        }

      } else if (field == 'c2') {

        // here we check the field value if priority(c2) then will loop until the c2 to c3

        var field_val = 'c';

        for (var i = 2; i <= 3; i++) {

          //here we check root parent or child parent using level value

          this.nest_child(

            field_val + i.toString(),

            primaryKeyFieldName,

            primaryKeyValue,

            value

          );

        }

      } else {

        this.nest_child(

          field_val + i.toString(),

          primaryKeyFieldName,

          primaryKeyValue,

          value

        );

      }

    }

  }

  …

// for updating the nested sub child value

  nest_child(field, primaryKeyFieldName, primaryKeyValue, value) {

    var Rec = (<ITreeData[]>this.treegrid.flatData).filter((e: ITreeData) => {

      if (e[primaryKeyFieldName] == primaryKeyValue) return e;

    }); // here filter the nested sub child value

 

    // here we update the nested value

    Rec[0][field] = value;

 

    this.treegrid.refresh();

  }

}

 

 

 

In the above code snippet, in the checkbox change event, we check whether the checked checkbox is parent or not. Also, check whether checkboxes c1, c2, or c3 are selected. If we check the c1 checkbox using a loop, we update the c2 and c3 checkbox’s nested child values, and so on.

 

Please refer to the below sample,

https://stackblitz.com/edit/angular-multi-checkbox-col-nzwudf?file=app.component.ts,app.component.html

 

Kindly get back to us for further assistance.

    

Regards,  

Pon selva