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);
}
You can refer to our
JavaScript Tree Grid
feature tour page for its groundbreaking feature representations. You can also explore our JavaScript Tree Grid exampleJavaScript Tree Grid example
to knows how to present and manipulate data.