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 and headerText
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 example ASP.NET Core Tree Grid example to knows how to present and manipulate data.