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();
}