TreeGrid Checkbox selection on Load

[PDev]

Here is the example, where Row does not get checked on Data bound event

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

what will be the right approach to check the checkbox upon loading tree grid.

[Pon Selva Jeganathan]

Hi Parth Rawal,

Thanks for contacting syncfusion forum.

Query: where Row does not get checked on Data bound event

Based on your query and the given example, we understand you want to select the row with the checkbox on initial loading while using the checkbox column with virtualization feature. The checkbox column feature is not supported with the virtual scrolling feature since it is not feasible to maintain the checkbox selected records with this functionality.

Kindly get back to us for further assistance

Regards,  

Pon selva   

[PDev]

Okay. Let's say I will have seperate Checkbox column. Will it be possible to enable auto Hierarchy Check feature in Column.  if that is possible, probably i can pass true/false value at the time of loading grid.  this will help me achieve the same functionality.

[Pon Selva Jeganathan]

Hi Parth Rawal,

Query: Let's say I will have seperate Checkbox column. Will it be possible to enable auto Hierarchy Check feature in Column

You can achieve your requirement by using the column template feature of Tree Grid, and you can handle the auto check hierarchy using the checkbox change event of the parent.

Please refer to the below code snippet,

<ejs-treegrid

    #treegrid

    [dataSource]="vData"

    [enableVirtualization]="false"

    allowPaging="truee"

    childMapping="Crew"

    [treeColumnIndex]="1"

    [editSettings]="editSettings"

    [pageSettings]="pageSettings"

    [toolbar]="toolbar"

    height="600"

  >

    <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="TaskID"

        headerText="Player Jersey"

        [validationRules]="taskidrules"

        width="120"

        textAlign="Right"

        isPrimaryKey="true"

      ></e-column>

      <e-column

 

….

 

 

  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'));

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

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

    var primaryKeyFieldName = (<any>this.treegrid).getPrimaryKeyFieldNames()[0];

    var primaryKeyValue = data[primaryKeyFieldName];

    var childMappingName = (<any>this.treegrid).childMapping;

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

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

    if (

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

    ) {

      //updating the parent value in grid

      var parentRec = (<ITreeData[]>(

        (<any>this.treegrid).grid.dataSource

      )).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[]>(

            (<any>this.treegrid).grid.dataSource

          )).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;

          }

          //updating the parent value in treegrid

          dataSource[i][field] = value;

          var childNodeLength = dataSource[i][childMappingName].length;

          for (var j = 0; j < childNodeLength; j++) {

            //updating the child value in treegrid

            dataSource[i][childMappingName][j][field] = value;

          }

          (<any>this.treegrid).refresh();

        }

      }

    } 

else {

      var gridData = (<ITreeData[]>(<any>this.treegrid).grid.dataSource).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];

      var flag = 0;

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

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

          var childNodeLength = dataSource[i][childMappingName].length;

          for (var j = 0; j < childNodeLength; j++) {

            if (

              dataSource[i][childMappingName][j][primaryKeyFieldName] ==

              primaryKeyValue

            ) {

              dataSource[i][childMappingName][j][field] = value;

              (<any>this.treegrid).refresh();

            }

            if (dataSource[i][childMappingName][j][field] == value) {

              flag++;

            }

          }

          if (flag > 0 && flag == childNodeLength) {

            parentData[field] = value;

            var gridParentData = (<ITreeData[]>(

              (<any>this.treegrid).grid.dataSource

            )).filter((e: ITreeData) => {

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

            });

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

            (<any>this.treegrid).refresh();

          } else {

            parentData[field] = false;

            var gridParentData = (<ITreeData[]>(

              (<any>this.treegrid).grid.dataSource

            )).filter((e: ITreeData) => {

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

            });

            (<any>gridParentData[0])[field] = false;

            (<any>this.treegrid).refresh();

          }

        }

 

Please refer to the below sample,

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

Please refer to the below help documentation,

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

Please refer to the below demo,

https://ej2.syncfusion.com/angular/demos/#/bootstrap5/treegrid/columntemplate

From your query we suspect that , In alternate to autoCheckHierarchy feature, you want to use the template checkbox (for the auto-check hierarchies feature)  to achieve the same functionality with Virtualization enabled scenario.

Note:- We need to let you know that above workaround also not feasible in terms of Virtualization enabled.

Regards,  

Pon selva