Clipboard in React Treegrid component

16 Sep 202324 minutes to read

The clipboard provides an option to copy selected rows or cells data into the clipboard.

The following list of keyboard shortcuts is supported in the Tree Grid to copy selected rows or cells data into the clipboard.

Interaction keys	Description
`Ctrl + C`	Copy selected rows or cells data into clipboard.
`Ctrl + Shift + H`	Copy selected rows or cells data with header into clipboard.

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

To copy selected rows or cells data into the clipboard with help of external buttons, you need to invoke the copy method.

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

Tree Grid provides support for a set of copy modes with copyHierarchyMode property.
The below are the type of copy modes available in TreeGrid.

Parent : This is the default copy hierarchy mode in Tree Grid. Clipboard value have the selected records with its parent records, if the selected records not have any parent record then the selected record will be in clipboard.
Child : Clipboard value will have the selected records with its child record. If the selected records do not have any child record, then the selected records will be in clipboard.
Both : Clipboard value will have the selected records with its both parent and child record. If the selected records do not have any parent and child record then the selected records alone in clipboard.
None : Only the Selected records will be in clipboard.

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 Feature allows you to copy the data of selected cells and paste it to another cells by just dragging the autofill icon of the selected cells up to required cells. This feature is enabled by defining enableAutoFill property as 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;

If enableAutoFill is set to true, then the autofill icon will be displayed on cell selection to copy cells.

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 the sequential data generations are not supported in this autofill feature.

Paste

You can able to copy the content of a cell or a group of cells by selecting the cells and pressing Ctrl + C shortcut key and paste it to another set of cells by selecting the cells and pressing Ctrl + V shortcut key.

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.

You can refer to our React Tree Grid feature tour page for its groundbreaking feature representations. You can also explore our React Tree Grid example to knows how to present and manipulate data.