Headers in ASP.NET CORE Tree Grid Component
21 Dec 20224 minutes to read
Header text
By default, column header title is displayed from column field
value. To override the default header title, you have to define the headerText
value.
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.data" childMapping="Children" treeColumnIndex="1" allowPaging="true">
<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.data = tree;
return View();
}
NOTE
If both the
field
andheaderText
are not defined in the column, the column renders with empty header text.
Header template
You can customize the header element by using the headerTemplate
property.
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.data" childMapping="Children" height="315">
<e-treegrid-columns>
<e-treegrid-column field="TaskName" headerText="Task Name" headerTemplate="#projectName" width="220"></e-treegrid-column>
<e-treegrid-column field="StartDate" headerText="Start Date" textAlign="Right" headerTemplate="#dateTemplate"
format="yMd"></e-treegrid-column>
<e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" headerTemplate="#durationTemplate"></e-treegrid-column>
<e-treegrid-column field="Progress" headerText="Progress" textAlign="Right" headerTemplate="#progressTemplate"></e-treegrid-column>
</e-treegrid-columns>
</ejs-treegrid>
<script type="text/x-template" id="projectName">
<div>
<div>
<img src="images/__Task name.png" width="20" height="20" class="e-image" /> Task Name
</div>
</div>
</script>
<script type="text/x-template" id="dateTemplate">
<div>
<div>
<img src="images/__Start name.png" width="20" height="20" class="e-image" /> Start Date
</div>
</div>
</script>
<script type="text/x-template" id="durationTemplate">
<div>
<div>
<img src="images/__Duration.png" width="20" height="20" class="e-image" /> Duration
</div>
</div>
</script>
<script type="text/x-template" id="progressTemplate">
<div>
<div>
<img src="images/__progress.png" width="20" height="20" class="e-image" /> Progress
</div>
</div>
</script>
public IActionResult Index()
{
var tree = TreeData.GetDefaultData();
ViewBag.data = tree;
return View();
}
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.