Cells in JavaScript TreeGrid

Customize cell styles

The appearance of cells can be customized by using the queryCellInfo event.
The queryCellInfo event triggers for every cell. In that event handler, you can get QueryCellInfoEventArgs that contains the details of the cell.

Custom attributes

You can customize the treegrid cells by adding a CSS class to the customAttribute property of the column.

.e-attr {
    background: '#d7f0f4';
}

{
    field: 'taskID', headerText: 'Task ID', width: 90, customAttributes: {class: "e-attr"}, textAlign: 'Right'
}

In the below example, we have customized the cells of TaskID and StartDate columns.

Grid lines

The gridLines have option to display cell border and it can be defined by the gridLines property.

The available modes of grid lines are:

Modes	Actions
Both	Displays both the horizontal and vertical grid lines.
None	No grid lines are displayed.
Horizontal	Displays the horizontal grid lines only.
Vertical	Displays the vertical grid lines only.
Default	Displays grid lines based on the theme.

By default, the treegrid renders with Default mode.
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.