Check box selection in React TreeGrid

19 Dec 202514 minutes to read

Checkbox selection enables selecting multiple TreeGrid records using a checkbox in each row.

To render a checkbox in each TreeGrid row, add a column with the type property set to CheckBox.

import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Page } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';

import { sampleData } from './datasource';
function App() {
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={2} childMapping='subtasks' allowPaging={true}>
        <ColumnsDirective>
            <ColumnDirective type='checkbox' width='50'/>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
            <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
            <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date'/>
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
        </ColumnsDirective>
        <Inject services={[Page]}/>
    </TreeGridComponent>;
}
;
export default App;
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Page } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';

import { sampleData } from './datasource';

function App() {
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={2} childMapping='subtasks' allowPaging={true}>
        <ColumnsDirective>
            <ColumnDirective type='checkbox' width='50'/>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
            <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
            <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
        </ColumnsDirective>
        <Inject services={[Page]}/>
    </TreeGridComponent>
};
export default App;

By default, selection is allowed by clicking a TreeGrid row or its checkbox. To allow selection only through checkboxes, set selectionSettings.checkboxOnly to “true”.
Selection can be persisted on all the operations using selectionSettings.persistSelection. To enable persistence, define at least one column as a primary key using columns.isPrimaryKey property.

Checkbox selection mode

In checkbox selection, rows can also be selected by clicking anywhere on the row. Configure the behavior using selectionSettings.checkboxMode. The modes are:

  • Default: Multiple rows can be selected by clicking rows one by one.
  • ResetOnRowClick: Clicking a row clears the previously selected rows. Multiple selection is still available by holding CTRL and clicking additional rows. To select a contiguous range, hold SHIFT and click the end row.
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Page } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';

import { sampleData } from './datasource';
function App() {
    const settings = { checkboxMode: 'ResetOnRowClick' };
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={2} childMapping='subtasks' allowPaging={true} selectionSettings={settings}>
        <ColumnsDirective>
            <ColumnDirective type='checkbox' width='50'/>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
            <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
            <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date'/>
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
        </ColumnsDirective>
        <Inject services={[Page]}/>
    </TreeGridComponent>;
}
;
export default App;
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Page, SelectionSettingsModel } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';

import { sampleData } from './datasource';

function App() {
    const settings: SelectionSettingsModel = { checkboxMode: 'ResetOnRowClick'};
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={2} childMapping='subtasks' allowPaging={true} selectionSettings={settings}>
        <ColumnsDirective>
            <ColumnDirective type='checkbox' width='50'/>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
            <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
            <ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
        </ColumnsDirective>
        <Inject services={[Page]}/>
    </TreeGridComponent>
};
export default App;

Checkbox selection applies to row selection only and is not compatible with cell selection mode.

Conditional row selection

The TreeGrid supports conditional row selection through the isRowSelectable callback. This feature enables dynamic business logic to determine which rows can be selected, ensuring that only rows meeting specific conditions are selectable. The callback accepts a function that evaluates each row’s data and returns “true” to enable selection or “false” to disable it.

Local data: The callback runs once when the TreeGrid initializes and evaluates all records because the full dataset is already available on the client.

Remote data: The callback runs only for the rows displayed on the current page when the TreeGrid first loads. It runs again whenever the grid fetches new data such as during paging, filtering, or sorting to re-evaluate the newly visible rows.

In the following sample, selection is disabled for rows where the “Progress” column has the value “Completed”.

import {
  TreeGridComponent, ColumnsDirective, ColumnDirective, Inject, Selection, VirtualScroll,
} from '@syncfusion/ej2-react-treegrid';
import { taskData } from './datasource';

import * as React from 'react';

function App() {
    let treegridInstance;

  const selectionSettings = { persistSelection: true };

  const isRowSelectable = (data,columns)  => {
    return data.Progress !== 'Completed';
  };
    return <TreeGridComponent
          id="TreeGrid"
          ref={(treegrid) => { treegridInstance = treegrid }}
          dataSource={taskData}
          idMapping='TaskID'
          parentIdMapping='ParentID'
          treeColumnIndex={1}
          height={600}
          enableVirtualization={true}
          selectionSettings={selectionSettings}
          isRowSelectable= {isRowSelectable}
                >
        <ColumnsDirective>
          <ColumnDirective type="checkbox" width="50" />
          <ColumnDirective field="Task" headerText="Task" width="300" />
          <ColumnDirective field="TaskID" isPrimaryKey={true} visible={false} />
          <ColumnDirective field="AssignedTo" headerText="Assigned To" width="140" />
          <ColumnDirective field="StartDate" headerText="Start" format='yMd' width="180" />
          <ColumnDirective field="DueDate" headerText="Due" format='yMd' width="180" />
          <ColumnDirective field="Priority" headerText="Priority" width="90" />
          <ColumnDirective field="Progress" headerText="Status" width="110" />

        </ColumnsDirective>
        <Inject services={[Selection,VirtualScroll]} />
      </TreeGridComponent>
}
;
export default App;
import {
    TreeGridComponent, ColumnsDirective, ColumnDirective, Inject, Selection, VirtualScroll,
} from '@syncfusion/ej2-react-treegrid';
import { taskData } from './datasource';

import * as React from 'react';

function App() {
    let treegridcs10: TreeGridComponent;

    const selectionSettings: any = { persistSelection: true };

    const isRowSelectable = (data: any,columns:any): boolean => {
        return data.Progress !== 'Completed';
    };
    return <TreeGridComponent
        id="TreeGrid"
        ref={(treegrid) => { treegridcs10 = treegrid }}
        dataSource={taskData}
        idMapping='TaskID'
        parentIdMapping='ParentID'
        treeColumnIndex={1}
        height={600}
        enableVirtualization={true}
        selectionSettings={selectionSettings}
        isRowSelectable={isRowSelectable}
    >
        <ColumnsDirective>
            <ColumnDirective type="checkbox" width="50" />
            <ColumnDirective field="Task" headerText="Task" width="300" />
            <ColumnDirective field="TaskID" isPrimaryKey={true} visible={false} />
            <ColumnDirective field="AssignedTo" headerText="Assigned To" width="140" />
            <ColumnDirective field="StartDate" headerText="Start" format='yMd' width="180" />
            <ColumnDirective field="DueDate" headerText="Due" format='yMd' width="180" />
            <ColumnDirective field="Priority" headerText="Priority" width="90" />
            <ColumnDirective field="Progress" headerText="Status" width="110" />

        </ColumnsDirective>
        <Inject services={[Selection, VirtualScroll]} />
    </TreeGridComponent>
}
;
export default App;