Search results

Customize column styles in JavaScript TreeGrid control

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.ts
index.css
import { TreeGrid } from '@syncfusion/ej2-treegrid';
import { sampleData } from './datasource.ts';


    let treegrid: TreeGrid = new TreeGrid(
        {
            dataSource: sampleData,
            childMapping: 'subtasks',
            treeColumnIndex: 1,
            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;
}