Search results

Change the orientation of header Text in JavaScript Tree Grid control

20 Apr 2021 / 2 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 treegrid header cell.

Copied to clipboard
.orientationcss .e-headercelldiv {
    transform: rotate(90deg);
}

Step 2:

Add the custom CSS class to a particular column by using the customAttributes property.

Copied to clipboard
    { field: 'taskName', headerText: 'Task Name', textAlign: 'Center', customAttributes: {class: 'orientationcss'}, width: 80 }

Step 3:

Resize the header cell height by using the following code.

Copied to clipboard
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.
    }
}
Source
Preview
index.ts
index.css
Copied to clipboard
import { TreeGrid,ActionEventArgs } from '@syncfusion/ej2-treegrid';
import { sampleData } from './datasource.ts';

    let treegrid: TreeGrid = new TreeGrid(
        {
            dataSource: sampleData,
            childMapping: "subtasks",
            treeColumnIndex: 1,
            height: 100,
            created: setHeaderHeight,
            columns: [
               { field: 'taskID', headerText: 'Task ID', width: 70, textAlign: 'Right' },
               { field: 'taskName', headerText: 'Task Name', textAlign: 'Center', customAttributes: {class: 'orientationcss'}, width: 80 }
               { 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: ActionEventArgs): void {
   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.
    }
}
Copied to clipboard
#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);
}