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.
Solution
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.
CSS
<style>
.orientationcss .e-headercelldiv {
transform: rotate(90deg);
}
</style>
JS
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
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
}
});
})
</script>
MVC
@(Html.EJ().Grid<object>("Grid")
.Datasource(((IEnumerable<object>)ViewBag.datasource))
.AllowPaging()
.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("Freight").Format("{0:c}").Add();
col.Field("OrderDate").Format("{0:MM/dd/yyyy}").Add();
col.Field("ShipCountry").HeaderText("Ship Country").Add();
col.Field("ShipCity").HeaderText("Ship City").Add();
})
.ClientSideEvents(eve=>eve.Create("create"))
)
ASP.NET
<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" >
<ClientSideEvents Create="create" />
<Columns>
<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" />
</Columns>
</ej:Grid>
Refer to the following screenshot.
