1. Home
  2. Forum
  3. Blazor
  4. Grid button color

Grid button color

Dear,

How can I change the foreground and background color of buttons in the grid. Right now it shows a grey background be default for all buttons. How do I change this?

Regards,
Amjad.

5 Replies 1 reply marked as answer
JP Jeevakanth Palaniappan Syncfusion Team March 30, 2021 07:40 AM UTC

Hi Amjad, 
 
Greetings from Syncfusion support. 
 
To do any customization in grid, then you have to override the corresponding styles. Here we have customized the styles for toolbar buttons by using the below styles. 
 
<style> 
    .e-toolbar-item .e-tbar-btn { 
        background-color: aqua; 
    } 
</style> 
 
 
We suggest you to refer the below documentation for customizing styles in the grid.  
  
 
Regards, 
Jeevakanth SP. 


Marked as answer
AK Amjad Khan March 30, 2021 10:51 AM UTC

Right, but for example, the class .e-tbar-btn does not appear in the style guide document link you sent.  

Or am I missing something?

Regards,
Amjad.

JP Jeevakanth Palaniappan Syncfusion Team March 31, 2021 11:03 AM UTC

Hi Amjad, 

We have provided the documentation for any further reference on grid styling. In simple, to do any customization, we suggest you to override the corresponding element classes as like we did for the toolbar in the previously provided response. 

Please get back to us if you have any other queries. 

Regards, 
Jeevakanth SP. 


AK Amjad Khan May 12, 2021 03:01 PM UTC

Ok, just to help others, here is how to change edit and delete button colors in the grid. Let me know if this is mentioned somewhere in the documentation.

<style>

    
    .e-btn.e-flat.e-Editbutton {
        background-color: blue;
    }
    .e-btn.e-flat.e-Deletebutton {
        background-color: red;
    }

</style>

JP Jeevakanth Palaniappan Syncfusion Team May 13, 2021 05:51 AM UTC

Hi Amjad, 
 
As of now we don’t have documentation specific to customization on toolbar. We have now logged a documentation task for the same. It will be refreshed in any of the upcoming release. Until then we appreciate your patience. 
 
Regards, 
Jeevakanth SP. 


Loader.
Up arrow icon