Clipboard in React TreeGrid

8 Oct 202524 minutes to read

The clipboard feature copies selected rows or cells to the system clipboard.

The following keyboard shortcuts are supported for copying rows or cells data.

Interaction keys	Description
`Ctrl + C`	Copy selected rows or cells to the clipboard.
`Ctrl + Shift + H`	Copy selected rows or cells with column headers.

app.jsx
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() {
    const settings = { type: 'Multiple', mode: 'Row' };
    const pageSettings = { pageSize: 10 };
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' allowPaging={true} pageSettings={pageSettings} selectionSettings={settings}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right' isPrimaryKey={true}/>
            <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, PageSettingsModel } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';

function App() {
    const settings: SelectionSettingsModel = { type: 'Multiple', mode: 'Row' };
    const pageSettings: PageSettingsModel = { pageSize: 10 };

    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' allowPaging={true} pageSettings={pageSettings} selectionSettings={settings}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right' isPrimaryKey={true}/>
            <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;

Copy to clipboard by external buttons

Invoke the copy method to copy selected rows or cells using external buttons.

app.jsx
app.tsx
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ColumnDirective, ColumnsDirective, Inject, Page, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
    let treegrid;
    const settings = { type: 'Multiple', mode: 'Row' };
    const copy = () => {
        if (treegrid) {
            treegrid.copy();
        }
    };
    const copyHeader = () => {
        if (treegrid) {
            treegrid.copy(true);
        }
    };
    return (<div>
        <ButtonComponent onClick={copy}>Copy</ButtonComponent>
        <ButtonComponent onClick={copyHeader}>CopyHeader</ButtonComponent>
        <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' ref={g => treegrid = g} allowPaging={true} selectionSettings={settings}>
            <ColumnsDirective>
                <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right' isPrimaryKey={true}/>
                <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>
    </div>);
}
;
export default App;
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ColumnDirective, ColumnsDirective, TreeGrid, Inject, Page, TreeGridComponent, SelectionSettingsModel } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';

function App() {
  
  let treegrid: TreeGridComponent | null;
  const settings: SelectionSettingsModel = { type: 'Multiple', mode: 'Row' };
  const copy = () =>{
    if (treegrid) {
      treegrid.copy();
    }
  }
  
  const copyHeader = () => {
    if (treegrid) {
      treegrid.copy(true);
    }
  }
  
    return (<div>
        <ButtonComponent onClick= { copy }>Copy</ButtonComponent>
        <ButtonComponent onClick= { copyHeader }>CopyHeader</ButtonComponent>
        <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
        ref={g => treegrid = g} allowPaging={true} selectionSettings={settings}>
            <ColumnsDirective>
                <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right' isPrimaryKey={true}/>
                <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>
    </div>)
};
export default App;

Copy Hierarchy Modes

TreeGrid supports multiple copy modes via the copyHierarchyMode property.

Parent : Default mode. Copies the selected records along with their parent records. If no parent exists, only the selected records are copied.
Child : Copies the selected records along with their child records. If no child exists, only the selected records are copied.
Both : Copies the selected records along with both parent and child records. If neither exists, only the selected records are copied.
None : Copies only the selected records.

app.jsx
app.tsx
import { DropDownListComponent } from "@syncfusion/ej2-react-dropdowns";
import { ColumnDirective, ColumnsDirective } from '@syncfusion/ej2-react-treegrid';
import { TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
    let treegrid;
    const data = ['Parent', 'Child', 'Both', 'None'];
    const settings = { type: 'Multiple', mode: 'Row' };
    const onChange = (sel) => {
        const mode = sel.value.toString();
        if (treegrid) {
            treegrid.copyHierarchyMode = mode;
        }
    };
    return (<div>
    <DropDownListComponent popupHeight="250px" dataSource={data} value="Parent" change={onChange} width="150px"/>
        <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='225' allowFiltering={true} selectionSettings={settings} ref={g => treegrid = g}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='75' 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>
    </TreeGridComponent>
    </div>);
}
;
export default App;
import { ChangeEventArgs, DropDownListComponent } from "@syncfusion/ej2-react-dropdowns";
import { ColumnDirective, ColumnsDirective } from '@syncfusion/ej2-react-treegrid';
import { Inject, TreeGrid, TreeGridComponent, SelectionSettingsModel } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';

function App() {
    let treegrid: TreeGridComponent | null;
    const data: string[] = ['Parent', 'Child', 'Both', 'None']
    const settings: SelectionSettingsModel = { type: 'Multiple', mode: 'Row' };
    const onChange = (sel: ChangeEventArgs): void => {
        const mode: any = sel.value.toString();
        if (treegrid) {
            treegrid.copyHierarchyMode = mode;
        }
    }

    return(
    <div>
    <DropDownListComponent popupHeight="250px" dataSource={data} value="Parent" change={onChange} width="150px" />
        <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='225' allowFiltering={true} selectionSettings={settings}
        ref={g => treegrid = g}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='75' 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>
    </TreeGridComponent>
    </div>)
};
export default App;

AutoFill

AutoFill copies the data of selected cells and pastes it into adjacent cells by dragging the AutoFill handle. Enable this feature by setting enableAutoFill to true.

app.jsx
app.tsx
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent, Edit, Toolbar } from '@syncfusion/ej2-react-treegrid';
import { Page } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
    const editOptions = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' };
    const settings = { cellSelectionMode: 'Box', type: 'Multiple', mode: 'Cell' };
    const toolbarOptions = ['Add', 'Update', 'Cancel'];
    const pageSettings = { pageSize: 10 };
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' allowPaging={true} enableAutoFill={true} pageSettings={pageSettings} selectionSettings={settings} editSettings={editOptions} toolbar={toolbarOptions}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right' isPrimaryKey={true}/>
            <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, Edit, Toolbar]}/>
    </TreeGridComponent>;
}
;
export default App;
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent, Edit, Toolbar } from '@syncfusion/ej2-react-treegrid';
import { Page, SelectionSettingsModel, PageSettingsModel, EditSettingsModel, ToolbarItems } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';

function App() {
    const editOptions: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' };
    const settings: SelectionSettingsModel = { cellSelectionMode: 'Box', type: 'Multiple', mode: 'Cell'};
    const toolbarOptions: ToolbarItems[] = ['Add', 'Update', 'Cancel'];
    const pageSettings: PageSettingsModel = { pageSize: 10 };

    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' allowPaging={true} enableAutoFill={true} pageSettings={pageSettings} selectionSettings={settings} editSettings = {editOptions} toolbar={toolbarOptions}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right' isPrimaryKey={true}/>
            <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, Edit, Toolbar]}/>
    </TreeGridComponent>
};
export default App;

When enableAutoFill is true, the AutoFill handle appears on cell selection.

It requires the selection mode to be Cell, cellSelectionMode to be Box and also Batch Editing should be enabled.

Limitations of AutoFill

Since the string values are not parsed to number and date type, so when the selected string type cells are dragged to number type cells then it will display as NaN. For date type cells, when the selected string type cells are dragged to date type cells then it will display as an empty cell.
Linear series and sequential data generation are not supported.

Paste

Copy the content of a cell or a group of cells with Ctrl + C and paste into another set of cells with Ctrl + V.

app.jsx
app.tsx
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent, Edit, Toolbar } from '@syncfusion/ej2-react-treegrid';
import { Page } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
    const editOptions = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' };
    const settings = { cellSelectionMode: 'Box', type: 'Multiple', mode: 'Cell' };
    const toolbarOptions = ['Add', 'Update', 'Cancel'];
    const pageSettings = { pageSize: 10 };
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' allowPaging={true} pageSettings={pageSettings} selectionSettings={settings} editSettings={editOptions} toolbar={toolbarOptions}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right' isPrimaryKey={true}/>
            <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, Edit, Toolbar]}/>
    </TreeGridComponent>;
}
;
export default App;
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent, Edit, Toolbar } from '@syncfusion/ej2-react-treegrid';
import { Page, SelectionSettingsModel, PageSettingsModel, EditSettingsModel, ToolbarItems } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';

function App() {
    const editOptions: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' };
    const settings: SelectionSettingsModel = { cellSelectionMode: 'Box', type: 'Multiple', mode: 'Cell'};
    const toolbarOptions: ToolbarItems[] = ['Add', 'Update', 'Cancel'];
    const pageSettings: PageSettingsModel = { pageSize: 10 };

    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' allowPaging={true} pageSettings={pageSettings} selectionSettings={settings} editSettings = {editOptions} toolbar={toolbarOptions}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right' isPrimaryKey={true}/>
            <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, Edit, Toolbar]}/>
    </TreeGridComponent>
};
export default App;

To perform paste functionality, it requires the selection mode to be Cell, cellSelectionMode to be Box and also Batch Editing should be enabled.

Limitations of Paste Functionality

Since the string values are not parsed to number and date type, so when the copied string type cells are pasted to number type cells then it will display as NaN. For date type cells, when the copied string format cells are pasted to date type cells then it will display as an empty cell.

Refer to the React TreeGrid feature tour page for highlights. Explore the React TreeGrid example to learn how to present and manipulate data.

Search docs

Ask HelpBot