Apply styling on this ej2 Javascript grid buttons on the toolba

[Simon Bunya]

Hi

How can I apply styling on this ej2 Javascript grid buttons on the toolbar?

I want to apply different CSS classes to each button to change its color (e-danger, e-success).

Thanks

Simon

[Joseph Christ Nithin Issack]

Hi Simon, 

  

  Greetings from Syncfusion support. 

  

  Based on your query you want to change the color of the buttons in the toolbar. 

  

Your requirement can be achieved by adding the custom class to the class list of the button element on the ` dataBound` event of EJ2 Grid. 

  

Please refer the below code snippet. 

  

  

dataBound: () => { 

 this.element 

    .getElementsByClassName('e-add')[0] 

    .parentElement.classList.add('e-success'); 

 this.element 

    .getElementsByClassName('e-delete')[0] 

    .parentElement.classList.add('e-danger'); 

} 

  

  

  

CSS 

  

<style> 

  

  .e-success { 

    background-color: #22b24b !important; 

  } 

  

  .e-danger { 

    background-color: #d64113 !important; 

  } 

</style> 

  

  

  

Sample: https://stackblitz.com/edit/twzemf?file=index.html 

  

Please find the sample and revert for more queries. 

  

Regards, 

Joseph I