manually check/uncheck checkbox in treegrid

[Jinchuan DU]

Hi Syncfusion team,

I want to add a custom button to check the certain records. How to scan all the records and check if meet certain criteria? For example below screenshot, check the records under Clause(s).

Regards

[Pon Selva Jeganathan]

Hi Jinchuan DU,

Query:  I want to add a custom button to check the certain records

To achieve this requirement, we suggest using the selectCheckboxes method of the TreeGrid. You can call this method inside your button click event and pass the record indexes of the rows that you want to check as a parameter. The selectCheckboxes method will check the checkboxes for the specified rows.

Please refer to the below code snippet,

 

   <ejs-button id="show" content="SHOW"></ejs-button>

<ejs-treegrid id="TreeGrid" dataSource="ViewBag.dataSource" height="400" autoCheckHierarchy="true" childMapping="Children" treeColumnIndex="1">

            <e-treegrid-columns>

                <e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="95"></e-treegrid-column>

                <e-treegrid-column field="TaskName" headerText="Task Name" showCheckbox="true" width="220"></e-treegrid-column>

                …..

        </ejs-treegrid>

document.getElementById('show').addEventListener('click', () => {

  var treegrid =

    document.getElementsByClassName('e-treegrid')[0].ej2_instances[0];

  treegrid.selectCheckboxes([2]);//Here pass the rowindex value as array

});

 

 

Please refer to the below screenshot,

Please refer to the below API documentation,

https://ej2.syncfusion.com/documentation/api/treegrid#selectcheckboxes

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.

[Jinchuan DU]

Hi  Pon selva,

it only works on current page. Any other method to check in all pages.

Thanks.

Regards

[Pon Selva Jeganathan]

Hi Jinchuan DU,

Query it only works on current page. Any other method to check in all pages.

Based on your query, we suspect that you are trying to check some records across all pages in a grid using a specific condition. To achieve your requirement by using the actionComplete event with args.requestType as ‘paging’ to select records in all pages based on a condition.

In the actionComplete event, you can use the getCurrentViewRecords() method to get the current page records, and then loop through each record to check if it meets your condition. If the record meets your condition, you can collect the index of this records and select the records using selectCheckboxes method of the treegrid.

Please refer to the below code snippet,

 

<ejs-treegrid id="TreeGrid" dataSource="ViewBag.dataSource" height="400" autoCheckHierarchy="true" childMapping="Children" treeColumnIndex="1" actionComplete=”actioncomplete”>

            <e-treegrid-columns>

                <e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="95"></e-treegrid-column>

                <e-treegrid-column field="TaskName" headerText="Task Name" showCheckbox="true" width="220"></e-treegrid-column>

                …..

        </ejs-treegrid>

 

actionComplete (args) {

  if (args.requestType == 'paging') {

      SelectedNodeIndex = [];

 

      var recs = treegrid.getCheckedRecords();

      var indx = treegrid.getCheckedRowIndexes();

      var currentData = treegrid.getCurrentViewRecords();

      if (recs.length != 0) {

        if (

          currentData.length >

          treegrid.pageSettings.pageSize * treegrid.pageSettings.pageCount

        ) {

          var index2 = 0;

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

            alreadyChecked2 = false;

            for (var j = 0; j < recs.length; j++) {

              if (currentData[i].taskID == recs[j].taskID) {

                alreadyChecked2 = true;

              }

            }

            if (!alreadyChecked2) {

              if (recs.Result[j]) {

                SelectedNodeIndex.push(index2);

              }

            }

            index2++;

          }

          alreadyChecked2 = false;

        } else {

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

            for (var j = 0; j < recs.length; j++) {

              if (currentData[i].taskID == recs[j].taskID) {

                alreadyChecked = true;

              }

            }

          }

          if (!alreadyChecked) {

            var dtaSource = treegrid.getCurrentViewRecords();

            var index = 0;

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

              if (dtaSource[i].progress == 50) {

                SelectedNodeIndex.push(index);

              }

              index++;

            }

          }

        }

      } else {

        var dtaSource = treegrid.getCurrentViewRecords();

        var index = 0;

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

          if (dtaSource[i].progress == 50) {

            SelectedNodeIndex.push(index);

          }

          index++;

        }

      }

      if (!alreadyChecked) {

        treegrid.selectCheckboxes(SelectedNodeIndex);

      }

      alreadyChecked = false;

    }

  }

 

In the above code example, we have checked particular column’s value (field value) and selected the record based on its value while performing paging action in the actionComplete event of Tree Grid.

Please refer to the below sample,

https://stackblitz.com/edit/2qh7dd-wzjmjv?file=index.html,index.ts

Please refer to the below API documentation,

https://ej2.syncfusion.com/documentation/api/treegrid/#actioncomplete

https://ej2.syncfusion.com/documentation/api/treegrid/#getcurrentviewrecords

https://ej2.syncfusion.com/documentation/api/treegrid/#selectcheckboxes

If the above solution does not meet your requirement, kindly share the below details which is helpful to proceed further.

1. Complete treegrid code example
2. Data binding details( whether you are using a local data binding or remote data binding)
3. Share the issue reproducible sample.
4. Stacktrace details(if face any)

Kindly get back to us for further assistance.

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

[Jinchuan DU]

Thanks for your reply and sample.

[Suganya Gopinath]

Jinchuan, 

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

[Jinchuan DU]

Hi Suganya,

Yes. I accepted. Thanks for your support.