We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

TreeGrid Checkbox selection on Load

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.


3 Replies

PS Pon Selva Jeganathan Syncfusion Team October 31, 2022 09:02 AM

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   



PD PDev November 1, 2022 03:01 AM

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.



PS Pon Selva Jeganathan Syncfusion Team November 2, 2022 10:13 AM

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(argsChangeEventArgsdataanyindexany): 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((eITreeData=> {

        if (e[primaryKeyFieldName] == primaryKeyValuereturn e;

      });

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

      for (var i = 0i < lengthi++) {

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

          //updating the child value in grid

          var childRec = (<ITreeData[]>(

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

          )).filter((eITreeData=> {

            if (

              !isNullOrUndefined(e.parentItem) &&

              e.parentItem[primaryKeyFieldName] == primaryKeyValue

            )

              return e;

          });

          var childRecLength = childRec.length;

          for (var c = 0c < childRecLengthc++) {

            childRec[c][field] = value;

          }

          //updating the parent value in treegrid

          dataSource[i][field] = value;

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

          for (var j = 0j < childNodeLengthj++) {

            //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(

        (eITreeData=> {

          if (e[primaryKeyFieldName] == primaryKeyValuereturn e;

        }

      );

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

      var parentData = data['parentItem'];

      var parentPrimaryValue = parentData[primaryKeyFieldName];

      var parentPrimaryValue = parentData[primaryKeyFieldName];

      var flag = 0;

      for (var i = 0i < lengthi++) {

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

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

          for (var j = 0j < childNodeLengthj++) {

            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((eITreeData=> {

              if (e[primaryKeyFieldName] == parentPrimaryValuereturn e;

            });

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

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

          } else {

            parentData[field] = false;

            var gridParentData = (<ITreeData[]>(

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

            )).filter((eITreeData=> {

              if (e[primaryKeyFieldName] == parentPrimaryValuereturn 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   


Loader.
Live Chat Icon For mobile
Up arrow icon