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. |
var treeGridObj = new ej.treegrid.TreeGrid({
dataSource: window.sampleData,
childMapping: 'subtasks',
allowSelection: true,
selectionSettings: { type: 'Multiple', mode: 'Row' },
treeColumnIndex: 1,
allowPaging: true,
pageSettings: { pageSize: 10 },
columns: [
{ field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 70 },
{ field: 'taskName', headerText: 'Task Name', width: 200, textAlign:'Left' },
{ field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 100, format: { skeleton: 'yMd', type: 'date' } },
{ field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 90 },
{ field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 90 }
],
height: 260
});
treeGridObj.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.38/material.css">
<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="TreeGrid"></div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
To copy selected rows or cells data into the clipboard with help of external buttons, you need to invoke the copy
method.
var treeGridObj = new ej.treegrid.TreeGrid({
dataSource: window.sampleData,
childMapping: 'subtasks',
allowSelection: true,
selectionSettings: { type: 'Multiple', mode: 'Row' },
treeColumnIndex: 1,
allowPaging: true,
pageSettings: { pageSize: 10 },
columns: [
{ field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 70 },
{ field: 'taskName', headerText: 'Task Name', width: 200, textAlign:'Left' },
{ field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 100, format: { skeleton: 'yMd', type: 'date' } },
{ field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 90 },
{ field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 90 }
],
height: 230
});
treeGridObj.appendTo('#TreeGrid');
var copyBtn = new ej.buttons.Button();
copyBtn.appendTo('#copy');
document.getElementById('copy').addEventListener('click', function(){
treeGridObj.copy();
});
var copyHeaderBtn = new ej.buttons.Button();
copyHeaderBtn.appendTo('#copyHeader');
document.getElementById('copyHeader').addEventListener('click', function(){
treeGridObj.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.38/material.css">
<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<button id="copy">Copy</button>
<button id="copyHeader">Copy With Header</button>
<div id="TreeGrid"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</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.
var treeGridObj = new ej.treegrid.TreeGrid({
dataSource: window.sampleData,
childMapping: 'subtasks',
allowSelection: true,
selectionSettings: { type: 'Multiple', mode: 'Row' },
treeColumnIndex: 1,
copyHierarchyMode: 'Parent',
height: 230,
allowPaging: true,
pageSettings: { pageSize: 10 },
columns: [
{ field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 70 },
{ field: 'taskName', headerText: 'Task Name', width: 200, textAlign:'Left' },
{ field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 100, format: { skeleton: 'yMd', type: 'date' } },
{ field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 90 },
{ field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 90 }
]
});
treeGridObj.appendTo('#TreeGrid');
var dropDownMode = new ej.dropdowns.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: function (e) {
var mode = 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.38/material.css">
<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<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>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</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.
ej.treegrid.TreeGrid.Inject(ej.treegrid.Toolbar, ej.treegrid.Edit, ej.treegrid.Selection);
var treeGridObj = new ej.treegrid.TreeGrid({
dataSource: window.sampleData,
childMapping: 'subtasks',
allowSelection: true,
enableAutoFill: true,
enableHover: false,
toolbar: ['Add', 'Update', 'Cancel'],
selectionSettings: { type: 'Multiple', mode: 'Cell', cellSelectionMode: 'Box' },
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' },
treeColumnIndex: 1,
allowPaging: true,
pageSettings: { pageSize: 10 },
columns: [
{ field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, textAlign: 'Right', width: 70 },
{ field: 'taskName', headerText: 'Task Name', width: 200, textAlign:'Left' },
{ field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 100, format: { skeleton: 'yMd', type: 'date' } },
{ field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 90 },
{ field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 90 }
],
height: 220
});
treeGridObj.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.38/material.css">
<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="TreeGrid"></div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</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.
ej.treegrid.TreeGrid.Inject(ej.treegrid.Toolbar, ej.treegrid.Edit, ej.treegrid.Selection);
var treeGridObj = new ej.treegrid.TreeGrid({
dataSource: window.sampleData,
childMapping: 'subtasks',
allowSelection: true,
enableHover: false,
toolbar: ['Add', 'Update', 'Cancel'],
selectionSettings: { type: 'Multiple', mode: 'Cell', cellSelectionMode: 'Box' },
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' },
treeColumnIndex: 1,
allowPaging: true,
pageSettings: { pageSize: 10 },
columns: [
{ field: 'taskID', headerText: 'Task ID', textAlign: 'Right', width: 70 },
{ field: 'taskName', headerText: 'Task Name', width: 200, textAlign:'Left' },
{ field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 100, format: { skeleton: 'yMd', type: 'date' } },
{ field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 90 },
{ field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 90 }
],
height: 220
});
treeGridObj.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.38/material.css">
<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="TreeGrid"></div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</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.