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
args which contains details of the row.
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.datasource" height="275" enableHover="false" rowDataBound="rowDataBound" childMapping="Children" treeColumnIndex="1">
<e-treegrid-columns>
<e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="90"></e-treegrid-column>
<e-treegrid-column field="TaskName" headerText="Task Name" width="180"></e-treegrid-column>
<e-treegrid-column field="StartDate" headerText="Start Date" textAlign="Right"
format="yMd" width="90"></e-treegrid-column>
<e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="80"></e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>
<script>
function rowDataBound(args) {
if (args.data['Duration'] > 5) {
args.row.style.background = '#336c12';
} else if (args.data['Duration'] < 5) {
args.row.style.background = '#7b2b1d';
}
}
</script>public IActionResult Index()
{
var tree = TreeData.GetDefaultData();
ViewBag.datasource = tree;
return View();
}You can change the treegrid’s alternative rows’ background color by overriding the .e-altrow class.
.e-treegrid .e-altrow {
background-color: #ffd800;
}Please refer to the following example.
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.datasource" height="275" enableHover="false" childMapping="Children" treeColumnIndex="1">
<e-treegrid-columns>
<e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="90"></e-treegrid-column>
<e-treegrid-column field="TaskName" headerText="Task Name" width="180"></e-treegrid-column>
<e-treegrid-column field="StartDate" headerText=" Start Date" textAlign="Right"
format="yMd" width="90"></e-treegrid-column>
<e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="80"></e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>
<style>
.e-treegrid .e-altrow {
background-color: #ffd800;
}
</style>public IActionResult Index()
{
var tree = TreeData.GetDefaultData();
ViewBag.datasource = tree;
return View();
}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.
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.datasource" rowHeight="60" height="275" enableHover="false" childMapping="Children" treeColumnIndex="1">
<e-treegrid-columns>
<e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="90"></e-treegrid-column>
<e-treegrid-column field="TaskName" headerText="Task Name" width="180"></e-treegrid-column>
<e-treegrid-column field="StartDate" headerText=" Start Date" textAlign="Right" format="yMd" width="90"></e-treegrid-column>
<e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="80"></e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>public IActionResult Index()
{
var tree = TreeData.GetDefaultData();
ViewBag.datasource = tree;
return View();
}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.
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.datasource" rowDataBound="rowDataBound" height="275" enableHover="false" childMapping="Children" treeColumnIndex="1">
<e-treegrid-columns>
<e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="90"></e-treegrid-column>
<e-treegrid-column field="TaskName" headerText="Task Name" width="180"></e-treegrid-column>
<e-treegrid-column field="StartDate" headerText=" Start Date" textAlign="Right"
format="yMd" width="90"></e-treegrid-column>
<e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="80"></e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>
<script>
function rowDataBound(args) {
if(args.data.TaskId === 3){
args.rowHeight = 90;
}
}
</script>public IActionResult Index()
{
var tree = TreeData.GetDefaultData();
ViewBag.datasource = tree;
return View();
}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.
<ejs-treegrid id="TreeGrid" rowHeight="83" dataSource="ViewBag.datasource" height="250" childMapping="Children" treeColumnIndex="0" rowTemplate="#rowtemplate">
<e-treegrid-columns>
<e-treegrid-column field="EmpID" headerText="Employee ID" width="150"></e-treegrid-column>
<e-treegrid-column field="Name" headerText="Employee Name" width="150"></e-treegrid-column>
<e-treegrid-column field="Address" headerText="Employee Details" width="300"></e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>
<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="/images/TreeGrid/${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>
<style type="text/css">
.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;
}
</style>public IActionResult RowTemplate()
{
ViewBag.datasource = TreeData.GetTemplateData();
return View();
}The rowTemplate property accepts only the TR element.
If the rowTemplate is used, the value cannot be formatted inside the template using the format property. In that case, a function should be defined globally to format the value and invoke it inside the template.
<ejs-treegrid id="TreeGrid" rowHeight="83" dataSource="ViewBag.datasource" height="250" childMapping="Children" treeColumnIndex="0" rowTemplate="#rowtemplate">
<e-treegrid-columns>
<e-treegrid-column field="EmpID" headerText="Employee ID" width="150"></e-treegrid-column>
<e-treegrid-column field="Address" headerText="Employee Details" width="350"></e-treegrid-column>
<e-treegrid-column field="DOB" headerText="DOB" width="150"></e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>
<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="/images/TreeGrid/${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>${DOB.toLocaleDateString()}</div>
</td>
</tr>
</script>
<style type="text/css">
.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;
}
</style>public IActionResult RowTemplate()
{
ViewBag.datasource = TreeData.GetTemplateData();
return View();
}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 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.
<ejs-treegrid id="TreeGrid" dataSource="ViewBag.datasource" height="335" childMapping="Children" treeColumnIndex="0" detailTemplate="#detailtemplate">
<e-treegrid-columns>
<e-treegrid-column field="Name" headerText="First Name" width="160"></e-treegrid-column>
<e-treegrid-column field="DOB" headerText="DOB" width="85" type="date" format="yMd" textAlign='Right'></e-treegrid-column>
<e-treegrid-column field="Designation" headerText="Designation" width="147"></e-treegrid-column>
<e-treegrid-column field="EmpID" headerText="EmployeeID" width="125"></e-treegrid-column>
<e-treegrid-column field="Country" headerText="Country" width="148"></e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>
<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="/images/TreeGrid/${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 ${DOB.toLocaleDateString()}. 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>public IActionResult DetailTemplate()
{
ViewBag.datasource = TreeData.GetTemplateData();
return View();
}The TreeGrid rows can be reordered, dropped to another TreeGrid or custom control by enabling the allowRowDragAndDrop to true.
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.
<ejs-treegrid id="TreeGrid" allowRowDragAndDrop="true" allowSelection="true" dataSource="ViewBag.datasource" height="275" childMapping="Children" treeColumnIndex="1">
<e-treegrid-selectionsettings type="Multiple"></e-treegrid-selectionsettings>
<e-treegrid-columns>
<e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="90"></e-treegrid-column>
<e-treegrid-column field="TaskName" headerText="Task Name" width="180"></e-treegrid-column>
<e-treegrid-column field="StartDate" headerText=" Start Date" textAlign="Right"
format="yMd" width="90"></e-treegrid-column>
<e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="80"></e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>public IActionResult Index()
{
var tree = TreeData.GetDefaultData();
ViewBag.datasource = tree;
return View();
}
- Selection feature must be enabled for row drag and drop.
- For multiple row selection, the
typeproperty 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.
<ejs-treegrid id="TreeGrid" allowRowDragAndDrop="true" allowSelection="true" dataSource="ViewBag.datasource" height="275" childMapping="Children" treeColumnIndex="1">
<e-treegrid-selectionsettings type="Multiple"></e-treegrid-selectionsettings>
<e-treegrid-rowdropsettings targetID="DestGrid"></e-treegrid-rowdropsettings>
<e-treegrid-columns>
<e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="90"></e-treegrid-column>
<e-treegrid-column field="TaskName" headerText="Task Name" width="180"></e-treegrid-column>
<e-treegrid-column field="StartDate" headerText=" Start Date" textAlign="Right"
format="yMd" width="90"></e-treegrid-column>
<e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="80"></e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>
<ejs-treegrid id="DestGrid" allowRowDragAndDrop="true" allowSelection="true" height="275" childMapping="Children" treeColumnIndex="1">
<e-treegrid-selectionsettings type="Multiple"></e-treegrid-selectionsettings>
<e-treegrid-rowdropsettings targetID="DestGrid"></e-treegrid-rowdropsettings>
<e-treegrid-columns>
<e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="90"></e-treegrid-column>
<e-treegrid-column field="TaskName" headerText="Task Name" width="180"></e-treegrid-column>
<e-treegrid-column field="StartDate" headerText=" Start Date" textAlign="Right"
format="yMd" width="90"></e-treegrid-column>
<e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="80"></e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>public IActionResult Index()
{
var tree = TreeData.GetDefaultData();
ViewBag.datasource = tree;
return View();
}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.