Set default checkbox on a column at the init render

[Ton That Hung]

Hi Syncfusion Team,

I'm using the column checkbox feature on the TreeGrid component and I have 2 requirements on it.

1. Check some rows at the first render: by default, when rendering TreeGrid for the first time, all checkboxes are in the uncheck state, I want some rows to be checked at the first render. I have read the docs but did not find the config section that meets this requirement of mine.
2. In my project, there are 2 columns that are synchronized with each other, which are Taskname and Status, when the checkbox in taskname is checked, then the data in the status column is "Complete", otherwise it is "Not Complete". Is there any way to do this? I tried changing the dataSource passed to TreeGrid but every time I change dataSource, all checkboxes are unchecked.

Link sample: https://stackblitz.com/edit/react-kmgrvy?file=index.js

Thank you in advance for any support.

[Ton That Hung]

Hi Syncfusion Team,

Is there any solution to my requirement? This is critical in my project.

I'm eagerly awaiting your response.

Thanks.

[Shek Mohammed Asiq Abdul Jabbar]

Ton That Hung,

Thanks for your patience.

Query: by default, when rendering TreeGrid for the first time, all checkboxes are in the uncheck state, I want some rows to be checked at the first render. 

We achieved your query by using dataBound event and selectCheckboxes method of the treegrid. In the dataBound event, you can check specific records using the selectCheckboxes method by providing the index values of the rows you want to be initially checked.

Refer to the below code example,

 

 <TreeGridComponent

          dataSource={sampleData}

          treeColumnIndex={1}

          childMapping="subtasks"

          height="410"

          autoCheckHierarchy={true}

          dataBound={dataBound}

          checkboxChange={change}

          editSettings={editsetting}

        >

 

 

const dataBound = function (args) {

    var tree =

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

    tree.selectCheckboxes([2, 3]);//here you can pass index

  };

 

Query: there are 2 columns that are synchronized with each other, which are Taskname and Status, when the checkbox in Taskname is checked, then the data in the status column is "Complete", otherwise it is "Not Complete". Is there any way to do this?

We achieved this query by using the setCellValue method and checkboxChange event of the treegrid. In the checkboxChange event, you can update the value of the other cell (Status) based on the checkbox state in the Taskname column.

Refer to the below code example,

 

 const change = function (args) {

    var tree =

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

    //here update the child records value

    if (!args.rowData.hasChildRecords) {

      tree.grid.setCellValue(args.rowData.taskID, 'approved', args.checked);

    } else {

      //here update the parent and child record when selecting a parent row

      tree.grid.setCellValue(args.rowData.taskID, 'approved', args.checked);

      for (var i = 0; i < args.rowData.childRecords.length; i++) {

        tree.grid.setCellValue(

          args.rowData.childRecords[i].taskID,

          'approved',

          args.checked

        );

      }

    }

  };

  const editsetting = {

    allowAdding: true,

    allowEditing: true,

    allowDeleting: true,

    mode: 'Cell',

  };

  return (

    <div className="control-pane">

      <div className="control-section">

        <TreeGridComponent

          dataSource={sampleData}

          treeColumnIndex={1}

          childMapping="subtasks"

          height="410"

          autoCheckHierarchy={true}

          dataBound={dataBound}

          checkboxChange={change}

          editSettings={editsetting}

        >

 

Note: When using the setCellValue method, you need to enable the editSettings property and specify the primaryKey value.

Refer to the below sample,

https://stackblitz.com/edit/react-kmgrvy-vhpqg3?file=index.js

Refer to the below API documentation,

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

https://ej2.syncfusion.com/react/documentation/api/treegrid#setcellvalue

https://ej2.syncfusion.com/react/documentation/api/treegrid#databound

https://ej2.syncfusion.com/react/documentation/api/treegrid#checkboxchange

Kindly get back to us for further assistance.