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