Change the Orientation of Header Text

2 Mar 20222 minutes to read

You can change the orientation of the header text by using the CustomAttributes property.

Ensure the following steps:

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

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

Step 2: Add the custom CSS class to a particular column by using the CustomAttributes property.

    <e-grid-column field="ShipCity" headerText="Ship City" width="150" customAttributes=new { class='orientationcss' }"></e-grid-column>

Step 3: Resize the header cell height by using the following code.

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.
    }
}

CSHTML

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
{
   col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
   col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
   col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("ShipCountry").HeaderText("Ship Country").Width("120").CustomAttributes(new { @class="orientationcss" }).Add();

}).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>

Orientation.cs

public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}