Search results

Customize column styles in JavaScript (ES5) Tree Grid control

08 May 2023 / 2 minutes 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.

Copied to clipboard
.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.

Copied to clipboard
{ field: 'taskName', headerText: 'Task Name', customAttributes: {class: 'customcss'}, width: 100 },
Source
Preview
index.js
index.css
Copied to clipboard
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');
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%;
}

.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;
}

You can refer to our JavaScript Tree Grid feature tour page for its groundbreaking feature representations. You can also explore our JavaScript Tree Grid example JavaScript Tree Grid example to knows how to present and manipulate data.