Articles in this section
Category / Section

How to change the Orientation of Header text?

1 min read

Sometimes you may want to change the orientation of column header text.


The orientation of the header text is changed by using the cssClass API. We can define the custom css class for the column of the header text which is to be rotated by using the cssClass API.

In the cssClass defined, you can set the style to transform the text content in a preferred orientation by using the transform css property.


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



<script type="text/javascript">  
       $(function () {                    
                    dataSource: window.gridData,
                    allowPaging: true,
                    columns: [
                            { field: "OrderID", isPrimaryKey: true, headerText: "Order ID" },
                            { field: "CustomerID", headerText: 'Customer ID'},
                            { field: "EmployeeID", headerText: 'Employee ID', cssClass: "orientationcss" },
                            { field: "Freight", headerText: 'Freight', format: "{0:C}"  },
                            { field: "OrderDate", headerText: 'OrderDate', format: "{0:MM/dd/yyyy}" },
                            { field: "ShipCountry", headerText: "Ship Country" },
                            { field: "ShipCity", headerText: 'Ship City'}
                    create: function (args) {
                        var textWidth = $(".orientationcss > div").outerWidth();//Obtain the width of the headerText content.
                        $(".e-headercell").css("height", textWidth); //Assign the obtained textWidth as the height of the headerCell



            .Columns(col =>
                        col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Add();
                        col.Field("CustomerID").HeaderText("Customer ID").Add();
                        col.Field("EmployeeID").HeaderText("Employee ID").cssClass("orientationcss").Add();
                        col.Field("ShipCountry").HeaderText("Ship Country").Add();
                        col.Field("ShipCity").HeaderText("Ship City").Add();                        



<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" >  
<ClientSideEvents Create="create" />          
                <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" />
                <ej:Column Field="CustomerID" HeaderText="Customer ID" />
                <ej:Column Field="EmployeeID" HeaderText="Employee ID" CssClass="orientationcss" />
                <ej:Column Field="Freight" HeaderText="Freight" Format="{0:C}" />
                <ej:Column Field="OrderDate" HeaderText="Order Date" Format="{0:MM/dd/yyyy}"/>
                <ej:Column Field="ShipCountry" HeaderText="Ship Country" />
                <ej:Column Field="ShipCity" HeaderText="Ship City" />


Refer to the following screenshot.

Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment