Hi Fred,
Thanks for contacting Syncfusion support.
We have prepared a sample (by using our documentation solution) to rotate the particular column headerText to 90 degrees. But we did not face any issue while using this solution. So, we have attached our sample in the below link for your reference,
In this sample we have used transform property to rotate the headerText. After that we have applied this new style to a particular column by using customAttributes property of the Grid. Please refer the below code snippet,
|
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.datasource).Height("240").Columns(col =>
{=
col.Field("ShipCity").HeaderText("Ship City").CustomAttributes(new { @class = "orientationcss" }).Width("80").Add();
}).Created("setHeaderHeight").Render()
<script type="text/javascript">
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>
<style>
.orientationcss .e-headercelldiv {
transform: rotate(90deg);
}
.e-grid .e-headercelldiv {
margin: 108px;
}
</style> |
Note: After changed the orientation you must need to change the Grid header cells height based on the new orientation. In the above code we have used Grid created event to change the header cells height.
Regards,
Thavasianand S.
