Headers in ASP.NET MVC Tree Grid Component

17 Feb 20238 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.

@using Syncfusion.EJ2.Grids

@(Html.EJS().TreeGrid("HeaderText").DataSource((IEnumerable<object>)ViewBag.datasource)
      .Columns(col =>
       {
        col.Field("TaskId").HeaderText("Task ID").Width(90).TextAlign(TextAlign.Right).Add();
        col.Field("TaskName").HeaderText("Task Name").Width(180).Add();
        col.Field("StartDate").HeaderText("Start Date").Format("yMd").TextAlign(TextAlign.Right).Width(90).Add();
        col.Field("Duration").HeaderText("Duration").Width(80).TextAlign(TextAlign.Right).Add();

      }).Height(315).ChildMapping("Children").TreeColumnIndex(1).Render()
)
public ActionResult HeaderText()
{
    var treeData = TreeGridItems.GetTreeData();
    ViewBag.datasource = treeData;
    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.

@using Syncfusion.EJ2.Grids

@(Html.EJS().TreeGrid("HeaderTemplate")
      .DataSource((IEnumerable<object>)ViewBag.datasource)
      .Columns(col =>
       {
          col.Field("TaskName").HeaderTemplate("#projectName").Width(220).Add();
          col.Field("StartDate").HeaderTemplate("#dateTemplate").Format("yMd").TextAlign(TextAlign.Right).Add();
          col.Field("Duration").HeaderTemplate("#durationTemplate").TextAlign(TextAlign.Right).Add();
          col.Field("Progress").HeaderTemplate("#progressTemplate").TextAlign(TextAlign.Right).Add();

       }).Height(315).ChildMapping("Children").TreeColumnIndex(0).Render()
)

<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 ActionResult HeaderTemplate()
  {
    var treeData = TreeGridHeader.GetDataSource();
    ViewBag.datasource = treeData;
    return View();
  }

Change header text dynamically

Sometimes, there may be a requirement to change the column HeaderText of the Tree Grid dynamically. This can be done using the following approach:

Step 1: In external button click, get the column object corresponding to the field name by using the getColumnByField method. Then, change the header text value.

var column = treegrid.getColumnByField("Duration"); // Get column object.
column.headerText = 'Changed Text';

Step 2: To reflect the changes in the Tree Grid header, invoke the refreshColumns method.

treegrid.refreshColumns();

Refer to the below complete code example about how to change header text dynamically through button click

@using Syncfusion.EJ2.Grids

@Html.EJS().Button("change-text").Content("Change Header Text").IsPrimary(true).Render()

@(Html.EJS().TreeGrid("TreeGrid").DataSource((IEnumerable<object>)ViewBag.datasource)
      .Columns(col =>
       {
        col.Field("TaskId").HeaderText("Task ID").Width(90).TextAlign(TextAlign.Right).Add();
        col.Field("TaskName").HeaderText("Task Name").Width(180).Add();
        col.Field("StartDate").HeaderText("Start Date").Format("yMd").TextAlign(TextAlign.Right).Width(90).Add();
        col.Field("Duration").HeaderText("Duration").Width(80).TextAlign(TextAlign.Right).Add();

      }).Height(315).ChildMapping("Children").TreeColumnIndex(1).Render()
)

<script>
    document.getElementById('change-text').addEventListener('click', () => { // changing the header text for Duration column.
        var treegrid = document.getElementById("TreeGrid").ej2_instances[0];
        var column = treegrid.getColumnByField("Duration"); // get the JSON object of the column corresponding to the field name.
        column.headerText = "Changed Text"; // assign a new header text to the column.
        treegrid.refreshColumns();     //use refreshColumns method to refresh the HeaderText
    });
</script>
public ActionResult Index()
{
    var treeData = TreeGridItems.GetTreeData();
    ViewBag.datasource = treeData;
    return View();    
}

Change the orientation of header Text

The orientation of the header text can be changed by using CustomAttributes property.

To change the orientation, carry out the following steps:

Step 1: Create a CSS class with orientation style for the tree grid header cell.

.orientationcss .e-headercelldiv {
    transform: rotate(90deg);
}

Step 2: Apply the custom CSS class to a specific column by using the CustomAttributes property.

     col.Field("Duration").HeaderText("Duration").CustomAttributes(new { @class = "orientationcss" }).TextAlign(TextAlign.Center).Width(90).Add();

Step 3: Now by using Created event update the height CSS of header cells to accommodate the vertically oriented text content.

function setHeaderHeight(args) {
    var textWidth = document.querySelector(".orientationcss > div").scrollWidth;//Obtain the width of the headerText content.
    var headerCell = document.querySelectorAll(".e-headercell");
    for(var i = 0; i < headerCell.length; i++) {
        headerCell.item(i).style.height = textWidth + 'px'; //Assign the obtained textWidth as the height of the headerCell.
    }
}

Refer to the below complete code example about how to change the orientation of header Text

@(Html.EJS().TreeGrid("TreeGrid").DataSource((IEnumerable<object>)ViewBag.datasource)
      .Columns(col =>
       {
        col.Field("TaskId").HeaderText("Task ID").Width(90).TextAlign(TextAlign.Right).Add();
        col.Field("TaskName").HeaderText("Task Name").Width(180).Add();
        col.Field("StartDate").HeaderText("Start Date").Format("yMd").TextAlign(TextAlign.Right).Width(90).Add();
        col.Field("Duration").HeaderText("Duration").Width(80).CustomAttributes(new { @class="orientationcss" }).TextAlign(TextAlign.Right).Add();

      }).Height(315).ChildMapping("Children").TreeColumnIndex(1).Created("setHeaderHeight").Render()
)

<style>
    .orientationcss .e-headercelldiv {
        transform: rotate(90deg);
    }
</style>

<script>
    function setHeaderHeight(args) {
        var textWidth = document.querySelector(".orientationcss > div").scrollWidth; // obtain the width of the headerText content.
        var headerCell = document.querySelectorAll(".e-headercell");
        for (var i = 0; i < headerCell.length; i++) {
            headerCell.item(i).style.height = textWidth + 'px'; // assign the obtained textWidth as the height of the headerCell.
        }
    }
</script>
public ActionResult Index()
{
    var treeData = TreeGridItems.GetTreeData();
    ViewBag.datasource = treeData;
    return View();    
}

NOTE

You can refer to our ASP.NET MVC Tree Grid feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET MVC Tree Grid example to knows how to present and manipulate data.