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 treegrid header cell.
.orientationcss .e-headercelldiv {
transform: rotate(90deg);
}Step 2:
Add the custom CSS class to a particular column by using the customAttributes property.
{ field: 'taskName', headerText: 'Task Name', textAlign: 'Center', customAttributes: {class: 'orientationcss'}, width: 80 }Step 3:
Resize the header cell height by using the following code.
function setHeaderHeight(args) {
let textWidth: number = document.querySelector(".orientationcss > div").scrollWidth;//Obtain the width of the headerText content.
let headerCell: NodeList = document.querySelectorAll(".e-headercell");
for(let i: number = 0; i < headerCell.length; i++) {
(<HTMLElement>headerCell.item(i)).style.height = textWidth + 'px'; //Assign the obtained textWidth as the height of the headerCell.
}
}var treegrid = new ej.treegrid.TreeGrid({
dataSource: sampleData,
childMapping: 'subtasks',
created:setHeaderHeight,
height: 105,
treeColumnIndex: 1,
columns: [
{ field: 'taskID', headerText: 'Task ID', width: 90, textAlign: 'Right' },
{ field: 'taskName', headerText: 'Task Name', customAttributes: {class: 'orientationcss'}, width: 80, textAlign: 'Center' },
{ field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd'},
{ field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' }
],
});
treegrid.appendTo('#TreeGrid');
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.
}
}#container {
visibility: hidden;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.orientationcss .e-headercelldiv {
transform: rotate(90deg);
}