The row represents record details fetched from data source.
You can customize the appearance of a row by using the rowDataBound
event.
The rowDataBound
event triggers for every row. In the event handler, you can get the
RowDataBoundEventArgs
that contains details of the row.
import { TreeGrid, RowDataBoundEventArgs } from '@syncfusion/ej2-treegrid';
import { sampleData } from './datasource.ts';
let treeGridObj: TreeGrid = new TreeGrid({
dataSource: sampleData,
childMapping: 'subtasks',
height: 275,
treeColumnIndex: 1,
rowDataBound: rowBound,
enableHover: false,
columns: [
{ field: 'taskID', headerText: 'Task ID', width: 90, textAlign: 'Right' },
{ field: 'taskName', headerText: 'Task Name', width: 180 },
{
field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date',format: 'yMd'
},
{ field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' }
]
});
treeGridObj.appendTo('#TreeGrid');
function rowBound(args: RowDataBoundEventArgs) {
if (args.data['duration'] == 0 ) {
args.row.style.background= '#336c12';
} else if (args.data['duration'] < 3) {
args.row.style.background= '#7b2b1d';
}
}
#container {
visibility: hidden;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-treegrid/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<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 id='TreeGrid'></div>
</div>
</body>
</html>
You can change the treegrid’s alternative rows’ background color by overriding the .e-altrow
class.
.e-treegrid .e-altrow {
background-color: #fafafa;
}
Please refer to the following example.
import { TreeGrid, RowDataBoundEventArgs } from '@syncfusion/ej2-treegrid';
import { sampleData } from './datasource.ts';
let treeGridObj: TreeGrid = new TreeGrid({
dataSource: sampleData,
childMapping: 'subtasks',
height: 275,
treeColumnIndex: 1,
enableHover: false,
columns: [
{ field: 'taskID', headerText: 'Task ID', width: 90, textAlign: 'Right' },
{ field: 'taskName', headerText: 'Task Name', width: 180 },
{
field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date',format: 'yMd'
},
{ field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' }
]
});
treeGridObj.appendTo('#TreeGrid');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-treegrid/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<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 id='TreeGrid'></div>
</div>
</body>
</html>
You can customize the row height of treegrid rows through the rowHeight
property. The rowHeight
property
is used to change the row height of entire treegrid rows.
In the below example, the rowHeight
is set as ‘60px’.
import { TreeGrid } from '@syncfusion/ej2-treegrid';
import { sampleData } from './datasource.ts';
let treeGridObj: TreeGrid = new TreeGrid({
dataSource: sampleData,
childMapping: 'subtasks',
height: 275,
rowHeight: 60,
treeColumnIndex: 1,
columns: [
{ field: 'taskID', headerText: 'Task ID', width: 90, textAlign: 'Right' },
{ field: 'taskName', headerText: 'Task Name', width: 180 },
{
field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date',format: 'yMd'
},
{ field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' }
]
});
treeGridObj.appendTo('#TreeGrid');
#container {
visibility: hidden;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-treegrid/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<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 id='TreeGrid'></div>
</div>
</body>
</html>
Grid row height for particular row can be customized using the rowDataBound
event by setting the rowHeight
in arguments for each row based on the requirement.
In the below example, the row height for the row with Task ID as ‘3’ is set as ‘90px’ using the rowDataBound
event.
import { TreeGrid, RowDataBoundEventArgs } from '@syncfusion/ej2-treegrid';
import { sampleData } from './datasource.ts';
let treeGridObj: TreeGrid = new TreeGrid({
dataSource: sampleData,
childMapping: 'subtasks',
height: 275,
rowDataBound: rowBound,
treeColumnIndex: 1,
columns: [
{ field: 'taskID', headerText: 'Task ID', width: 90, textAlign: 'Right' },
{ field: 'taskName', headerText: 'Task Name', width: 180 },
{
field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date',format: 'yMd'
},
{ field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' }
]
});
treeGridObj.appendTo('#TreeGrid');
function rowBound(args: RowDataBoundEventArgs) {
if((args.data as TasKDetails).taskID === 3){
args.rowHeight = 90;
}
}
interface TasKDetails {
taskID ?: number;
}
#container {
visibility: hidden;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Grid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Grid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-treegrid/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<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 id='TreeGrid'></div>
</div>
</body>
</html>
The rowTemplate
has an option to customise the look and behavior of the treegrid rows. The rowTemplate
property accepts either the template string or HTML element ID.
import { TreeGrid } from '@syncfusion/ej2-treegrid';
import { textdata } from './datasource.ts';
let treegrid: TreeGrid = new TreeGrid(
{
dataSource: textdata,
childMapping: 'Children',
treeColumnIndex: 0,
rowTemplate: '#rowtemplate',
height: 250,
width: 'auto',
rowHeight: 83,
columns: [
{ field: 'EmpID', headerText: 'Employee ID', width: '150' },
{ field: 'Name', headerText: 'Employee Name', width: '150' },
{ field: 'Address', headerText: 'Employee Details', width: '350' }
]
});
treegrid.appendTo('#TreeGrid');
.border {
border-color: #e0e0e0;
border: 1px solid #e0e0e0;
border-width: 1px 0 0 0;
}
img {
width: 60px;
height: 60px;
vertical-align: baseline;
border-radius: 50px;
margin-left: 20px;
background-repeat: no-repeat;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 TreeGrid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript TreeGrid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-treegrid/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<script id="rowtemplate" type="text/x-template" >
<tr>
<td class="border" style='padding-left:18px;' >
<div>${EmpID}</div>
</td>
<td class="border" style='padding: 10px 0px 0px 20px;'>
<div style="font-size:14px;">
${Name}
<p style="font-size:9px;">${Designation}</p>
</div>
</td>
<td class="border">
<div>
<div style="position:relative;display:inline-block;">
<img src="${FullName}.png" alt="${FullName}" />
</div>
<div style="display:inline-block;">
<div style="padding:5px;">${Address}</div>
<div style="padding:5px;">${Country}</div>
<div style="padding:5px;font-size:12px;">${Contact}</div>
</div>
</div>
</td>
</tr>
</script>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='TreeGrid'></div>
</div>
</body>
</html>
The rowTemplate
property accepts only the TR element.
If the rowTemplate
is used, the value cannot be formatted inside the template using the columns.format
property. In that case, a function should be defined globally to format the value and invoke it inside the template.
import { TreeGrid } from '@syncfusion/ej2-treegrid';
import { textdata } from './datasource.ts';
import { Internationalization } from '@syncfusion/ej2-base';
let instance: Internationalization = new Internationalization();
(window as DateFormat).format = (value: Date) => {
return instance.formatDate(value, { skeleton: 'yMd', type: 'date' });
};
interface DateFormat extends Window {
format?: Function;
}
let treegrid: TreeGrid = new TreeGrid(
{
dataSource: textdata,
childMapping: 'Children',
treeColumnIndex: 0,
rowTemplate: '#rowtemplate',
height: 250,
width: 'auto',
rowHeight: 83,
columns: [
{ field: 'EmpID', headerText: 'Employee ID', width: '150' },
{ field: 'Address', headerText: 'Employee Details', width: '350' },
{ field: 'DOB', headerText: 'DOB', width: '150' }
]
});
treegrid.appendTo('#TreeGrid');
.border {
border-color: #e0e0e0;
border: 1px solid #e0e0e0;
border-width: 1px 0 0 0;
}
img {
width: 60px;
height: 60px;
vertical-align: baseline;
border-radius: 50px;
margin-left: 20px;
background-repeat: no-repeat;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 TreeGrid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript TreeGrid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-treegrid/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<script id="rowtemplate" type="text/x-template" >
<tr>
<td class="border" style='padding-left:18px;' >
<div>${EmpID}</div>
</td>
<td class="border">
<div>
<div style="position:relative;display:inline-block;">
<img src="${FullName}.png" alt="${FullName}" />
</div>
<div style="display:inline-block;">
<div style="padding:5px;">${Address}</div>
<div style="padding:5px;">${Country}</div>
<div style="padding:5px;font-size:12px;">${Contact}</div>
</div>
</div>
</td>
<td class="border" style='padding-left: 20px;'>
<div>${format(data.DOB)}</div>
</td>
</tr>
</script>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='TreeGrid'></div>
</div>
</body>
</html>
Row template feature is not compatible with all the features which are available in treegrid and it has limited features support. Here we have listed out the features which are not compatible with row template feature.
The detail template provides additional information about a particular row. By expanding the parent row the child rows are expanded along with their detail template. The detailTemplate
property accepts either the template string or HTML element ID.
To use detail template, inject the DetailRow module in the TreeGrid.
import { TreeGrid, DetailRow } from '@syncfusion/ej2-treegrid';
import { textdata } from './datasource.ts';
import { Internationalization } from '@syncfusion/ej2-base';
TreeGrid.Inject(DetailRow);
let instance: Internationalization = new Internationalization();
(window as DateFormat).format = (value: Date) => {
return instance.formatDate(value, { skeleton: 'yMd', type: 'date' });
};
interface DateFormat extends Window {
format?: Function;
}
let treegrid: TreeGrid = new TreeGrid(
{
dataSource: textdata,
childMapping: 'Children',
treeColumnIndex: 0,
detailTemplate: '#detailtemplate',
width: 'auto',
columns: [
{ field: 'Name', headerText: 'First Name', width: '170' },
{ field: 'Designation', headerText: 'Designation', width: '180' },
{ field: 'EmpID', headerText: 'EmployeeID', width: '110'},
{ field: 'Country', headerText: 'Country' , width: '90'},
]
});
treegrid.appendTo('#TreeGrid');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 TreeGrid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript TreeGrid Control" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-treegrid/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<script id="detailtemplate" type="text/x-template">
<div style="position: relative; display: inline-block; float: left; font-weight: bold; width: 10%;padding:5px 4px 2px 27px;;">
<img src="${FullName}.png" alt="${FullName}"/>
</div>
<div style="padding-left: 10px; display: inline-block; width: 66%; text-wrap: normal;font-size:13px;font-family:'Segoe UI';">
<div class="e-description" style="word-wrap: break-word;">
<b>${Name}</b> was born on ${format(data.DOB)}. Now lives at ${Address}, ${Country}. ${Name} holds a position of <b>${Designation}</b> in our WA department, (Seattle USA).
</div>
<div class="e-description" style="word-wrap: break-word;margin-top:5px;">
<b style="margin-right:10px;">Contact:</b>${Contact}
</div>
</div>
</script>
<div class="loader">
<div class="container">
<div id="TreeGrid">
</div>
</div>
</div>
</body>
</html>
The TreeGrid rows can be reordered, dropped to another TreeGrid or custom control by enabling the allowRowDragAndDrop
to true.
To use row drag and drop, inject the RowDD
module in the TreeGrid.
The TreeGrid row drag and drop allows you to drag and drop TreeGrid rows on the same TreeGrid using drag icon. To enable row drag and drop, set the allowRowDragAndDrop
to true. It provides the way to drop the row above, below or child to the target row with respective to the target row position.
import { TreeGrid, RowDD } from '@syncfusion/ej2-treegrid';
import { sampleData } from './datasource.ts';
TreeGrid.Inject(RowDD);
let treegrid: TreeGrid = new TreeGrid({
dataSource: sampleData,
treeColumnIndex: 1,
childMapping: 'subtasks',
allowRowDragAndDrop: true,
heigth:300,
selectionSettings: { type: 'Multiple' },
columns: [
{ field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, width: 90, textAlign: 'Right' },
{ field: 'taskName', headerText: 'Task Name', width: 180 },
{
field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date',format: 'yMd'
},
{ field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' }
]
});
treegrid.appendTo('#TreeGrid');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 TreeGrid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript TreeGrid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-treegrid/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<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 id="TreeGrid"></div>
</div>
</body>
</html>
- Selection feature must be enabled for row drag and drop.
- For multiple row selection, the
type
property must be set tomultiple
.
To drag and drop between two TreeGrid, enable the allowRowDragAndDrop
property and specify the target TreeGrid ID in targetID
property of rowDropSettings.
import { TreeGrid, RowDD } from '@syncfusion/ej2-treegrid';
import { sampleData } from './datasource.ts';
TreeGrid.Inject(RowDD);
let treegrid: TreeGrid = new TreeGrid({
dataSource: sampleData,
treeColumnIndex: 1,
childMapping: 'subtasks',
allowRowDragAndDrop: true,
rowDropSettings: { targetID: 'destTree' },
selectionSettings: { type: 'Multiple' },
columns: [
{ field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, width: 90, textAlign: 'Right' },
{ field: 'taskName', headerText: 'Task Name', width: 180 },
{
field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date',format: 'yMd'
},
{ field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' }
]
});
treegrid.appendTo('#TreeGrid');
let destTree: TreeGrid = new TreeGrid({
dataSource: [],
treeColumnIndex: 1,
childMapping: 'subtasks',
allowRowDragAndDrop: true,
rowDropSettings: { targetID: 'TreeGrid' },
selectionSettings: { type: 'Multiple' },
columns: [
{ field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, width: 90, textAlign: 'Right' },
{ field: 'taskName', headerText: 'Task Name', width: 180 },
{
field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date',format: 'yMd'
},
{ field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' }
]
});
destTree.appendTo('#destTree');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 TreeGrid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript TreeGrid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-treegrid/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<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="float: left; width:49%" id="TreeGrid"></div>
<div style="float: right; width:49%" id="destTree"></div>
</div>
</div>
</body>
</html>
The following events are triggered while drag and drop the treegrid rows.
rowDragStartHelper
- Triggers when click the drag icon or treegrid row and this event is used to customize the drag element based on user criteria.
rowDragStart
-Triggers when starts to drag the treegrid row.
rowDrag
- Triggers while dragging the treegrid row.
rowDrop
- Triggers when a drag element is dropped on the target element.
You can prevent the default behavior of dropping rows as children to the target by setting the cancel
property to true
in rowDrop event argument. You can also change the drop position after cancelling using reorderRows method.
In the below example drop action is cancelled and dropped above to target row.
import { TreeGrid, RowDD } from '@syncfusion/ej2-treegrid';
import { sampleData } from './datasource.ts';
TreeGrid.Inject(RowDD);
let treegrid: TreeGrid = new TreeGrid({
dataSource: sampleData,
treeColumnIndex: 1,
childMapping: 'subtasks',
allowRowDragAndDrop: true,
heigth:300,
columns: [
{ field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, width: 90, textAlign: 'Right' },
{ field: 'taskName', headerText: 'Task Name', width: 180 },
{
field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date',format: 'yMd'
},
{ field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' }
],
rowDrop : (args) => {
if (args.dropPosition == 'middleSegment') {
args.cancel = true;
treegrid.reorderRows([args.fromIndex], args.dropIndex, 'above');
}
}
});
treegrid.appendTo('#TreeGrid');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 TreeGrid</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript TreeGrid Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-treegrid/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<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 id="TreeGrid"></div>
</div>
</body>
</html>
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.