Change background color of toolbar

Question

Hi, I want to change the color of toolbar item according to their functions. Example: add = red, edit = blue... Can yo

Sujith Kumar Rajkumar · Answer

Hi Toan, 
 
Greetings from Syncfusion support. 
 
You can achieve your requirement of changing the background color of the toolbar items by retrieving the rendered toolbar item elements from the Grid’s toolbar module, checking & adding custom class to the button element of the toolbar items and then setting the required background color style for the class in the CSS file. This action can be done in the Grid’s dataBound event handler(triggered when data is loaded in the Grid) using a global flag variable to ensure that this case is executed only once(since the dataBound event will be triggered each time the Grid data is modified). 
 
This is demonstrated in the below code snippets, 
 
app.component.html 




// Grid’s dataBound event handler 
onDataBound() { 
        // This event will be triggered each time the grid data is modified, so flag variable is used so that this case is executed only on Grid initial render 
    if (this.initialFlag) {   
      // Toolbar item elements 
      var toolbarEles = (this.gridObj.toolbarModule.toolbar as any).tbarEle; 
      toolbarEles.forEach( ele => { 
         // Custom class is added to the toolbar item’s button element based on its text content 
         // You can customize this condition as required 
         if (ele.innerText === "Add")  
             ele.querySelector('button').classList.add('custom-add')  
         else if(ele.innerText === "Edit")  
             ele.querySelector('button').classList.add('custom-edit')  
         else if(ele.innerText === "Delete")  
             ele.querySelector('button').classList.add('custom-delete')  
      }) 
      this.initialFlag = false;  
    } 
} 
 
app.component.css 




.custom-add { 
    background-color: red !important; 
} 
 
.custom-edit { 
    background-color: blue !important; 
} 
 
.custom-delete { 
    background-color: yellow !important; 
} 
 
We have prepared a sample based on this for your reference. You can find it below, 
 
Sample: https://stackblitz.com/edit/angular-dtah5k-ty5nqe?file=app.component.ts 
 
Alternatively you can also directly set the styles to the default toolbar buttons using its id which will set as – “Grid ID” + “toolbar item text”. For e.g., if the Grid component id is set as “Normalgrid”, then the default toolbar item id’s will be set as – “Normalgrid_add”, “Normalgrid_edit”, etc., for which you can directly set the styles like in below code snippet, 
 




#Normalgrid_add { 
    background-color: red !important; 
} 
 
#Normalgrid_edit { 
    background-color: blue !important; 
} 
 
#Normalgrid_delete { 
    background-color: yellow !important; 
} 
 
You can also find the list of CSS classes that can be overridden for customizing each section styles from the below documentation link,   
  
Grid styling documentation: https://ej2.syncfusion.com/angular/documentation/grid/how-to/grid-styling/  
 
Please get back to us if you require any further assistance. 
 
Regards, 
Sujith R