Having trouble getting help?
Contact Support
Contact Support
Change the Orientation of Header Text
17 Feb 20223 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.
}
}
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" created="setHeaderHeight">
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>
<e-grid-column field="ShipCity" headerText="Ship City" width="150" customAttributes="@(new { @class="orientationcss" })"></e-grid-column>
<e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
</e-grid-columns>
</ejs-grid>
<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 IActionResult Index()
{
ViewBag.DataSource = OrderDetails.GetAllRecords();
return View();
}