Row Template in ASP.NET CORE Tree Grid Component
10 Jan 202310 minutes to read
The rowTemplate has an option to customize 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.
Row template with formatting
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();
}
Limitations
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.
- Filtering
- Paging
- Sorting
- Scrolling
- Searching
- Rtl
- Context Menu
- State Persistence
NOTE
You can refer to our
ASP.NET Core Tree Grid
feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET Core Tree Grid exampleASP.NET Core Tree Grid example
to knows how to present and manipulate data.