Toolbar in EJ2 JavaScript Grid control

12 Jan 20241 minute to read

You can customize the appearance of the toolbar in the Syncfusion EJ2 JavaScript Grid control using CSS. Here are examples of how to customize the toolbar root element and toolbar button element.

Customizing the toolbar root element

To customize the appearance of toolbar root element, you can use the following CSS code:

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

In this example, the .e-toolbar-items class targets the background color of the toolbar root element. You can modify the background-color property to change the background color of the toolbar.

Grid toolbar root element

Customizing the toolbar button element

To customize the appearance of toolbar buttons, you can use the following CSS code:

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

In this example, the .e-toolbar .e-btn selector targets the background color of the toolbar button elements. You can modify the background-color property to change the background color of the toolbar buttons.

Grid toolbar button element