Toolbar Customization in Angular Grid Component

18 Nov 20181 minute to read

The appearance of the toolbar in the Angular Data Grid component can be customized using CSS. Here are examples for customizing the toolbar root element and toolbar button element.

Customize the toolbar root element

The .e-toolbar-items class is used to style the toolbar root element.

.e-grid .e-toolbar-items {
    background-color: #deecf9;
}

Grid toolbar root element

Customize the toolbar button element

The .e-toolbar .e-btn selector is used to style the toolbar button elements.

.e-grid .e-toolbar .e-btn {
    background-color: #deecf9;
}

Grid toolbar button element