Grid CSS Color Not Overridable

[Carl Franklin]

I am trying to override the styles of the grid. The background-color does in fact work, but the color only works on the header, not the content. Please advise.

@page "/"


<SfGrid DataSource="@Orders" />


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


    protected override void OnInitialized()
    {
        Orders = Enumerable.Range(1, 5).Select(x => new Order()
        {
            OrderID = 0 + x,
            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
        }).ToList();
    }


    public class Order
    {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
    }
}


<style>
    html, body {
        background:#292E39;
        color: white;
        font-style: normal;
        font-weight: 100;
    }


    .e-grid .e-headercell {
        background-color: #3E485A;
        color: white;
    }


    .e-grid .e-table {
        background-color: #3E485A;
        color: white;
    }




</style>

[Naveen Palanivel]

Hi Carl,

Greetings from Syncfusion support.

We have checked your query and we have already discussed about this topics detailly in our UG documentation. Kindly refer the documentation link shared.

Refer our UG Documentations :

https://blazor.syncfusion.com/documentation/datagrid/how-to/grid-styling

Please get back to us if you have further queries.

Regards,

Naveen Palanivel

[Carl Franklin]

Yes, I am very familiar with that page. Did you try to run my example?

I tried styling e-rowcell as well. The background updates but the foreground color (color) does not.

I also tried QueryCellInfoHandler with the same result:

        public void QueryCellInfoHandler(QueryCellInfoEventArgs<OrderHistoryItem> args)
        {
            if (args.Column.HeaderText == "Side")
            {
                if (args.Data.Side == Side.BUY)
                {
                    args.Cell.AddClass(new string[] { "grid-buy" });
                }
                else if (args.Data.Side == Side.SELL)
                {
                    args.Cell.AddClass(new string[] { "grid-sell" });
                }
            }
            else if (args.Column.HeaderText == "Status")
            {
                if (args.Data.Status == "FILLED")
                {
                    args.Cell.AddClass(new string[] { "grid-buy" });
                }
                else if (args.Data.Status == "OPEN")
                {
                    args.Cell.AddClass(new string[] { "grid-sell" });
                }
            }
        }

[Naveen Palanivel]

Hi Carl ,

Sorry for the Inconvenience.

We are currently Validating  the reported query at our end and we will update the further details within two business days(Aug 5, 2022). Until then we appreciate your patience.

Regards,

Naveen Palanivel

[Naveen Palanivel]

Hi carl,

We checked your query and we like to inform that, by giving style to the .e-grid.e-gridcontent.e-row.e-rowwcell is used to change the color of the content. We also given snippet code below, please refer the snippet code for your reference.

<style>

    html, body {

        background:#292E39;

        color: white;

        font-style: normal;

        font-weight: 100;

    }

 

 

    .e-grid .e-headercell {

        background-color: #3E485A;

        color: white;

    }

 

     .e-grid .e-gridcontent .e-row .e-rowcell{

        color:white  ;

        background-color: #3E485A;

    }

 

</style>

Please get back to us if you need further assistance.

Regards,

Naveen Palanivel

[Carl Franklin]

Thank you. I don't know how mere mortals would be able to figure this out without better documentation and samples. Thank you again.

[Naveen Palanivel]

Hi Carl,

Welcome

we will improve our documentation in future

Please get back to us if you need further assistance.

Regards,

Naveen Palanivel.

[Keith A Price]

Exactly! This is a huge frustration. I spend countless hours trying to figure out the right selectors to customize the look of these components.

[Naveen Palanivel]

Hi Keith

Sorry for the trouble,

You can refer to the attached documentation link below to understand the grid style and appearance.

Documentation : https://blazor.syncfusion.com/documentation/datagrid/how-to/grid-styling

Please let us know if you have any concerns.

Regards,

Naveen Palanivel