How do I change the background colors of multiple Toolbar items (each different color) in sfGrid

[David Smith]

I have a sfGrid that has (add, edit and delete) as toolbar items. I want to change the background color of each individual button to different color (ex. add - blue, edit - orange, delete - red.

I have been able to change all buttons to the same background color using styles.

.e-toolbar .e-tbar-btn{ background-color: red !important}

but i do not see how i can change them to individual colors. There is no specific class for each button. Only for the icon.

<SfGrid class="border rounded" @ref="Grid" DataSource="@ToDoList" AllowSorting="true" AllowPaging="true" AllowMultiSorting="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete" })">

Can you give me any guidance please?

[Monisha Saravanan]

Hi David,

Greetings from Syncfusion support.

Query: “I want to change the background color of each individual button to different color (ex. add - blue, edit - orange, delete - red.”

We have checked your query and we would like to inform that we don’t have inbuilt support to change the button color. Instead we suggest you to achieve your requirement by using the below way.

 

<SfGrid ID="Grid" DataSource="@Orders" AllowPaging="true" Toolbar=@ToolbarItems>

    <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true"></GridEditSettings>

    <GridColumns>

...

    </GridColumns>

</SfGrid>

<style>

   

    .e-toolbar .e-tbar-btn{

    background: #add8e6;

    border: 2px solid #5a70cc;

    }

     .e-toolbar .e-add .e-tbar-btn{

   background: pink;

    border: 2px solid #5a70cc;

    }

}

  

</style>

 

@code{

    public List<Order> Orders { get; set; }

    private List<object> ToolbarItems = new List<object>() {

        new ItemModel() { Text = "Add", PrefixIcon = "e-add", Id = "Grid_add" , CssClass="e-add"},//Here Grid is SfGrid ID

        new ItemModel(){ Text = "Edit", PrefixIcon= "e-edit", Id="Grid_edit"},

        new ItemModel(){ Text = "Delete", PrefixIcon= "e-delete", Id="Grid_delete"},

        new ItemModel(){ Text = "Update", PrefixIcon= "e-update", Id="Grid_update"},

        new ItemModel(){ Text = "Cancel", PrefixIcon= "e-cancel", Id="Grid_cancel"}

    };

   

    }

Also refer the attached documentation for your reference.

Reference: https://blazor.syncfusion.com/documentation/datagrid/tool-bar#custom-toolbar

https://blazor.syncfusion.com/documentation/toolbar/style#customizing-the-toolbar-items

Kindly get back to us if you have further queries.

Regards,

Monisha