1. Home
  2. Forum
  3. Blazor
  4. Change grid background color

Change grid background color

1.  How can I change the SfGrid background color for the built in toolbar and also for the "Drag a column here to group its column" bar ?

2. I also need to do the same for the SfToolbar component (not related to the previous question)  and I was able to change the background using 
   <SfToolbar CssClass="custom"> but it only changed the remaining of the bar and not its buttons.

      .custom {  background-color: blue !important; }
 
 

7 Replies 1 reply marked as answer
VN Vignesh Natarajan Syncfusion Team June 25, 2020 09:17 AM UTC

 
Thanks for contacting Syncfusion support.  
 
Query: “How can I change the SfGrid background color for the built in toolbar and also for the "Drag a column here to group its column" bar ?” 
 
From your query we understand that you want to change the color of toolbar and Group drop area of Grid. We suggest you to achieve your requirement using CSS styles to below class name. Refer the below code example.  
 
<style> 
    /*to apply color to group drop area*/ 
    .e-grid .e-groupdroparea { 
        background-color: red; 
        color: yellow; 
    } 
 
    /*to apply styles to toolbar button using below highlighted button text cssclass*/ 
    .e-grid .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text, 
    /*change color color-profile icons input toolbar*/ 
    .e-grid .e-toolbar .e-toolbar-items .e-toolbar-item .e-icons { 
        color: yellow; 
    } 
 
    /*to apply style to toolbar and button*/ 
    .e-grid .e-toolbar, 
    .e-grid .e-toolbar .e-toolbar-items, 
    .e-grid .e-toolbar .e-toolbar-items .e-toolbar-item, 
    .e-grid .e-toolbar .e-toolbar-items .e-toolbar-item button { 
        background-color: red; 
    } 
</style> 
 
 
Refer the below screenshot for your reference 
 
 
 
We would also like to inform you that we have provided support for some built in themes on our own and also suggest you to use Theme Studio to customize the controls.  
 
Refer our UG documentation for your reference 
 
 
Kindly get back to us if you have further queries. 
 
Query2: “I also need to do the same for the SfToolbar component (not related to the previous question)”  
 
We have checked your reported case “Toolbar background color not applied to buttons” and we suggest you to override below CSS class of Toolbar to achieve your case. Refer the below code .  
 
<SfToolbar CssClass="custom" Width="600px"> 
    <ToolbarItems> 
        <ToolbarItem Text="Cut"></ToolbarItem> 
        <ToolbarItem Text="Copy"></ToolbarItem> 
        . . .  
    </ToolbarItems> 
</SfToolbar> 
  
<style> 
    .custom { 
        background-color: blue !important; 
    } 
  
    .e-toolbar .e-toolbar-items { 
        background-color: blue !important; 
        // To Apply background color to Toolbar items 
    } 
</style> 
 
The above sample can be downloaded from the following link.  
 
 
Kindly try out with shared solution and let us know, if the solution helps.  
 
Regards, 
Vignesh Natarajan  


Marked as answer
BJ Ben Junior June 26, 2020 05:13 PM UTC

Hi,

Thanks for your complete and well documented answer (and for the additional information and links as well) I'm now able to implement the required changes .
But there is a small caveat though: the selected button only changes the color font (to white, which is OK) but it doesn't change its background color anymore.  
I've included a picture to illustrate the problem.

Attachment: ButtonSelected_BackgroundColor_ba6a5e29.zip

VN Vignesh Natarajan Syncfusion Team June 29, 2020 07:26 AM UTC

Hi Ben,  
 
Thanks for the update.  
 
Query: “ the selected button only changes the color font (to white, which is OK) but it doesn't change its background color anymore” 
 
From your query screenshot we understand that you are facing issues while applying the background color to selected button. We need some more details about your query. So kindly share the following details to validate the reported issue at our end.    
 
  1. Share the styles applied (externally) to toolbar items.
  2. Share the details about your toolbar controls (default toolbar with custom items or Toolbar template)?
  3. Share the details (picture) how you want to display the toolbar on selection.
  4. If possible share the issue reproducible sample.  
 
Above requested details will be helpful for us to validate the reported issue at our end and provide solution as soon as possible.  
 
Regards, 
Vignesh Natarajan 



BJ Ben Junior June 29, 2020 03:43 PM UTC

The problem is that when the button is selected  its font changes, but the background doesn't. This happens either on a separate toolbar or for the one built in the grid. Please take a look at the code below that shows exactly the problem.


@page "/Testing"

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Grids

<style>
    /*To Apply background color to Toolbar items*/
    .e-toolbar,
    .e-toolbar .e-toolbar-items,
    .e-toolbar .e-toolbar-items .e-toolbar-item,
    .e-toolbar .e-toolbar-items .e-toolbar-item button {
        background-color: #e9ecef !important;
    }

    .e-grid {
        border: 1px solid #ced4da !important;
        margin-top: 5px;
    }

        /*to apply color to group drop area*/
        .e-grid .e-groupdroparea {
            background-color: #e9ecef;
            /*border: 1px solid black;*/
            border-bottom: 1px solid lightgray;
        }

        /*to apply styles to toolbar button using below highlighted button text cssclass*/
        .e-grid .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text,
        /*change color color-profile icons input toolbar*/
        e-grid .e-toolbar .e-toolbar-items .e-toolbar-item .e-icons {
            color: black;
        }

        /*to apply style to toolbar and button*/
        .e-grid .e-toolbar,
        .e-grid .e-toolbar .e-toolbar-items,
        .e-grid .e-toolbar .e-toolbar-items .e-toolbar-item,
        .e-grid .e-toolbar .e-toolbar-items .e-toolbar-item button {
            background-color: #dee2e6;
        }
</style>

<h3>TESTING</h3>

<SfToolbar Width="100%">
    <ToolbarItems>
        <ToolbarItem Type="@ItemType.Button" Text="Search" PrefixIcon="e-search"></ToolbarItem>
        <ToolbarItem Type="@ItemType.Button" Text="Daily Activity"></ToolbarItem>
    </ToolbarItems>
</SfToolbar>

<SfGrid DataSource="@Orders" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Dialog" AllowEditOnDblClick="true" />
    <GridColumns>
        <GridColumn Field=@nameof(Order.OrderID)></GridColumn>
        <GridColumn Field=@nameof(Order.CustomerID)></GridColumn>
    </GridColumns>
</SfGrid>

@code{

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

    protected override void OnInitialized()
    {
        Orders = Enumerable.Range(1, 5).Select(x => new Order()
        {
            OrderID = 1000 + x,
            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
            Freight = 2.1 * x,
            OrderDate = DateTime.Now.AddDays(-x),
        }).ToList();
    }

    public class Order
    {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        public DateTime? OrderDate { get; set; }
        public double? Freight { get; set; }
    }
}





VN Vignesh Natarajan Syncfusion Team June 30, 2020 03:42 PM UTC

Hi Ben, 
 
Thanks for the update. 
 
Query: “when the button is selected  its font changes, but the background doesn't.for the one built in the grid” 
 
From your query we understand that you want to change the background color of Grid built in toolbar button when it is clicked. We suggest you to achieve your requirement using below CSS style for button element. 
 
<style> 
    /* when grid toolbar button is selected */ 
    .e-grid .e-toolbar .e-toolbar-items .e-toolbar-item button:active, 
    /*apply color when grid toolbar button is hovered*/ 
    .e-grid .e-toolbar .e-toolbar-items .e-toolbar-item button:hover { 
        background-color: blue; 
    } 
    /*To Apply background color to Toolbar items*/ 
    .e-toolbar, 
    .e-toolbar .e-toolbar-items, 
    .e-toolbar .e-toolbar-items .e-toolbar-item, 
    .e-toolbar .e-toolbar-items .e-toolbar-item button { 
        background-color: #e9ecef; 
    } 
 
. . . . . . . . . . 
</style> 
 
 
Note: kindly avoid using !important while applying style to grid built in toolbar.    
 
Kindly download the sample from below 
 
 
Query: “This happens either on a separate toolbar or” 
 
We have checked your reported query “Selected Toolbar button background doesn’t changed ” and we suggest you to override the below CSS classes for applying background color to selected Toolbar button.  
Also, we have modified your shared sample code for the reference.  
 
<style>    /*To Apply background color to Toolbar items*/    .e-toolbar,    .e-toolbar .e-toolbar-items,    .e-toolbar .e-toolbar-items .e-toolbar-item,    .e-toolbar .e-toolbar-items .e-toolbar-item button {        background-color: #e9ecef !important;    }         .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:hover, .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:active, .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn:focus {            background-color: bisque !important; /*To Apply background color while select/hover/focus the separate Toolbar button*/        }</style>
  
<h3>TESTING</h3>  
  
<SfToolbar Width="100%"> 
    <ToolbarItems> 
        <ToolbarItem Type="@ItemType.Button" Text="Search" PrefixIcon="e-search"></ToolbarItem> 
        <ToolbarItem Type="@ItemType.Button" Text="Daily Activity"></ToolbarItem> 
    </ToolbarItems> 
</SfToolbar> 
 
You can get this sample using the below link.  
 
 
Please get back to us with more details if above solution does not resolve your query. 
 
Regards, 
Vignesh Natarajan 
 


BJ Ben Junior July 1, 2020 03:26 AM UTC

Hi!

It is all working perfectly now. Thanks for your support and also for the tip on not using important on the grid toolbar. 

VN Vignesh Natarajan Syncfusion Team July 1, 2020 03:44 AM UTC

Hi Ben,  

Thanks for the update.  

We are glad to hear that you have achieved your requirement using our solution.  

Kindly get back to us if you have further queries.  

Regards, 
Vignesh Natarajan  



Loader.
Up arrow icon