React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Cell Selection in React TreeGrid component

02 Feb 2023 / 1 minute to read

Cell Selection can be done through simple Mouse down or Arrow keys(up, down, left and right).

TreeGrid supports two types of cell selection mode which can be set by using selectionSettings.cellSelectionMode. They are:

  • Flow - It is set by default. Select range of cells between the start index and end index which includes in between cells of rows.
  • Box - Select range of cells within the start and end column indexes which includes in between cells of rows within the range.
Source
Preview
App.jsx
App.tsx
Copied to clipboard
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Page } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
function App() {
    const settings = {
        cellSelectionMode: 'Box',
        mode: 'Cell',
        type: 'Multiple'
    };
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' allowPaging={true} selectionSettings={settings}>
    <ColumnsDirective>
        <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;
Copied to clipboard
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Page, SelectionSettingsModel } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';

function App() {
const settings: SelectionSettingsModel = {
    cellSelectionMode: 'Box',
    mode: 'Cell',
    type: 'Multiple'
};

return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' allowPaging={true}
    selectionSettings={settings}>
    <ColumnsDirective>
        <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;
Previous
Next