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. |
import { TreeGrid, Page, Selection } from '@syncfusion/ej2-treegrid';
import { sampleData } from './datasource.ts';
TreeGrid.Inject(Page, Selection);
let treegrid: TreeGrid = new TreeGrid(
{
dataSource: sampleData,
childMapping: 'subtasks',
treeColumnIndex: 1,
allowSelection: true,
allowPaging: true,
pageSettings: { pageSize: 10 },
selectionSettings: { type: 'Multiple', mode: 'Row' },
columns: [
{ field: 'taskID', headerText: 'Task ID', width: 70, textAlign: 'Right' },
{ field: 'taskName', headerText: 'Task Name', width: 200, textAlign: 'Left' },
{ field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },
{ field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },
{ field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' },
],
height: 260
});
treegrid.appendTo('#TreeGrid');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Tree Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Tree Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<!-- Syncfusion Essential JS 2 Styles -->
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/20.4.48/material.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='TreeGrid'></div>
</body>
</html>
To copy selected rows or cells data into the clipboard with help of external buttons, you need to invoke the copy
method.
import { TreeGrid, Page, Selection } from '@syncfusion/ej2-treegrid';
import { sampleData } from './datasource.ts';
TreeGrid.Inject(Page, Selection);
let treegrid: TreeGrid = new TreeGrid(
{
dataSource: sampleData,
childMapping: 'subtasks',
treeColumnIndex: 1,
allowSelection: true,
selectionSettings: { type: 'Multiple', mode: 'Row' },
allowPaging: true,
pageSettings: { pageSize: 10 },
columns: [
{ field: 'taskID', headerText: 'Task ID', width: 70, textAlign: 'Right' },
{ field: 'taskName', headerText: 'Task Name', width: 200, textAlign: 'Left' },
{ field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },
{ field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },
{ field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' },
],
height: 230
});
treegrid.appendTo('#TreeGrid');
let copyBtn: Button = new Button();
copyBtn.appendTo('#copy');
document.getElementById('copy').addEventListener('click', () => {
treegrid.copy();
});
let copyHeaderBtn: Button = new Button();
copyHeaderBtn.appendTo('#copyHeader');
document.getElementById('copyHeader').addEventListener('click', () => {
treegrid.copy(true);
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Tree Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Tree Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<!-- Syncfusion Essential JS 2 Styles -->
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/20.4.48/material.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<button id="copy">Copy</button>
<button id="copyHeader">Copy With Header</button>
<div id='TreeGrid'></div>
</div>
</body>
</html>
Tree Grid provides support for a set of copy modes with copyHierarchyMode
property.
The below are the type of filter mode available in TreeGrid.
import { TreeGrid, Page, Selection } from '@syncfusion/ej2-treegrid';
import { DropDownList, ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
import { sampleData } from './datasource.ts';
TreeGrid.Inject(Page, Selection);
let treegrid: TreeGrid = new TreeGrid(
{
dataSource: sampleData,
childMapping: 'subtasks',
treeColumnIndex: 1,
copyHierarchyMode: 'Parent',
allowSelection: true,
selectionSettings: { type: 'Multiple', mode: 'Row' },
allowPaging: true,
pageSettings: { pageSize: 10 },
columns: [
{ field: 'taskID', headerText: 'Task ID', width: 70, textAlign: 'Right' },
{ field: 'taskName', headerText: 'Task Name', width: 200, textAlign: 'Left' },
{ field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },
{ field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },
{ field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' },
],
height: 230
});
treegrid.appendTo('#TreeGrid');
let dropDownMode: DropDownList = new DropDownList({
dataSource: [
{ id: 'Parent', mode: 'Parent' },
{ id: 'Child', mode: 'Child' },
{ id: 'Both', mode: 'Both' },
{ id: 'None', mode: 'None' },
],
fields: { text: 'mode', value: 'id' },
value: 'Parent',
change: (e: ChangeEventArgs) => {
let mode: any = <string>e.value;
treeGridObj.copyHierarchyMode = mode;
}
});
dropDownMode.appendTo('#mode');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Tree Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Tree Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<!-- Syncfusion Essential JS 2 Styles -->
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/20.4.48/material.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div>
<div style="padding-top: 7px; display: inline-block">Hierarchy Mode</div>
<div style="display: inline-block">
<input type="text" id='mode' />
</div>
</div>
<div id='TreeGrid'></div>
</div>
</body>
</html>
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.
import { TreeGrid, Page, Selection, Edit, Toolbar } from '@syncfusion/ej2-treegrid';
import { sampleData } from './datasource.ts';
TreeGrid.Inject(Page, Selection, Edit, Toolbar );
let treegrid: TreeGrid = new TreeGrid(
{
dataSource: sampleData,
childMapping: 'subtasks',
treeColumnIndex: 1,
enableAutoFill: true,
enableHover: false,
allowSelection: true,
toolbar: ['Add', 'Update', 'Cancel'],
selectionSettings: { type: 'Multiple', mode: 'Cell', cellSelectionMode: 'Box' },
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' },
allowPaging: true,
pageSettings: { pageSize: 10 },
columns: [
{ field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, width: 70, textAlign: 'Right' },
{ field: 'taskName', headerText: 'Task Name', width: 200, textAlign: 'Left' },
{ field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },
{ field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },
{ field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' },
],
height: 220
});
treegrid.appendTo('#TreeGrid');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Tree Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Tree Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<!-- Syncfusion Essential JS 2 Styles -->
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/20.4.48/material.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='TreeGrid'></div>
</body>
</html>
- 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 beCell
,cellSelectionMode
to beBox
and also Batch Editing should be enabled.
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.
import { TreeGrid, Page, Selection, Edit, Toolbar } from '@syncfusion/ej2-treegrid';
import { sampleData } from './datasource.ts';
TreeGrid.Inject(Page, Selection, Edit, Toolbar );
let treegrid: TreeGrid = new TreeGrid(
{
dataSource: sampleData,
childMapping: 'subtasks',
treeColumnIndex: 1,
enableHover: false,
allowSelection: true,
toolbar: ['Add', 'Update', 'Cancel'],
selectionSettings: { type: 'Multiple', mode: 'Cell', cellSelectionMode: 'Box' },
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' },
allowPaging: true,
pageSettings: { pageSize: 10 },
columns: [
{ field: 'taskID', headerText: 'Task ID', width: 70, textAlign: 'Right' },
{ field: 'taskName', headerText: 'Task Name', width: 200, textAlign: 'Left' },
{ field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },
{ field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },
{ field: 'progress', headerText: 'Progress', width: 80, textAlign: 'Right' },
],
height: 220
});
treegrid.appendTo('#TreeGrid');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Tree Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Tree Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<!-- Syncfusion Essential JS 2 Styles -->
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/20.4.48/material.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='TreeGrid'></div>
</body>
</html>
To perform paste functionality, it requires the selection
mode
to beCell
,cellSelectionMode
to beBox
and also Batch Editing should be enabled.
You can refer to our
JavaScript Tree Grid
feature tour page for its groundbreaking feature representations. You can also explore our JavaScript Tree Grid exampleJavaScript Tree Grid example
to knows how to present and manipulate data.