Customize column styles in JavaScript (ES5) Tree Grid control

14 Apr 2021 / 1 minute to read

You can customise the appearance of the header and content of a particular column using the customAttributes property.

To customize the Tree Grid column, follow the given steps:

Step 1:

Create a CSS class with custom style to override the default style for rowcell and header cell.

.e-treegrid .e-rowcell.customcss{
    background-color: #ecedee;
    color: 'red';
    font-family: 'Bell MT';
    font-size: 20px;
}

.e-treegrid .e-headercell.customcss{
    background-color: #2382c3;
    color: white;
    font-family: 'Bell MT';
    font-size: 20px;
}

Step 2:

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

{ field: 'taskName', headerText: 'Task Name', customAttributes: {class: 'customcss'}, width: 100 },

Source

Preview

index.js

index.css

var treegrid = new ej.treegrid.TreeGrid({
    dataSource: sampleData,
    childMapping: 'subtasks',
    treeColumnIndex: 1,
    height: 275,
    columns: [
       { field: 'taskID', headerText: 'Task ID', width: 70, textAlign: 'Right' },
       { field: 'taskName', headerText: 'Task Name', width: 200,customAttributes: { class: 'customcss' },  textAlign: 'Left' },
       { field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', type: 'date', format: 'yMd' },
       { field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },
    ]
});
treegrid.appendTo('#TreeGrid');

#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.e-treegrid .e-rowcell.customcss{
  background-color: grey;
  font-family: 'ALGERIAN';
	color: brown;
	font-size: 20px;
}

.e-treegrid .e-headercell.customcss{
  background-color: #2382c3;
  color: white;
	font-family: 'ALGERIAN';
	font-size: 20px;
}