Headers in ASP.NET MVC Tree Grid Component

18 Nov 20182 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.

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.

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

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

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.