Check box selection in React TreeGrid

19 Nov 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.

app.jsx

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;

app.tsx

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.

Modes:

• 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.

app.jsx

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;

app.tsx

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 using isRowSelectable

The TreeGrid supports conditional row selection through the isRowSelectable property. This feature enables dynamic business logic to determine which rows can be selected, ensuring that only rows meeting specific conditions are selectable. The isRowSelectable property accepts a function that evaluates each row’s data and returns true to enable selection or false to disable it. The function is executed for the entire data source before rendering, making it suitable for scenarios where selection must be restricted based on criteria.

app.jsx

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;

app.tsx

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;