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