Set cell foreground & background based on data value

[Richard Warriner]

Hi

I want to set the foreground and background colour of a specific cell on each row programmatically.

So if Value > 10 then white on red and if less then zero then yellow on black

I have tried the example implementing QueryCellInfoHandler but all I have managed to do is set the foreground color only and for the entire row. How do I just do a specific columns colour and the background?

Thanks

[Prathap Senthil]

Hi Richard,

Based on your requirement for utilizing the QueryCellInfoHandler event to achieve cell-based customization, you encountered an issue at your end.So, Before proceeding with reporting the problem, we need some additional clarification from you. Please share the following details to proceed further on our end

• Could you please share with us the issue of reproducible simple sample with duplicate data?

• Could you please share the Grid code snippet along with the model class?

• Could you please clarify what is expected in the screenshot?
  
  

The details requested above will be very helpful in validating the reported query on our end and providing a solution as soon as possible. Thanks for your understanding.

Reference: https://blazor.syncfusion.com/documentation/datagrid/cell


Regards,
Prathap Senthil

[Richard Warriner]

Hi

Apologies - let me be clearer. If you take your standard datagrid example project using the syncfusion extension...

For example what is the best practice way of making all cells with 'UK' in the "Ship Country" column be fg=white, bg = red and all cells with 'India' be eg fg=orange bg=green

The colours dont matter specifically but the concept of how to set fg/bg of just a cell based on the value

Something like this. All rows with UK / India should be colored.

[Prathap Senthil]

Based on your requirements, we suggest using the querCellInfor event and the CSS customization below to achieve your goals. Please refer to the code snippet and sample provided for your reference.

  public void CustomizeCell(Syncfusion.Blazor.Grids.QueryCellInfoEventArgs<OrderData> args)

  {

      if (args.Column.Field == "Freight")

      {

          if (args.Data.Freight < 30)

          {

              args.Cell.AddClass(new string[] { "below-30" });

          }

          else if (args.Data.Freight < 80)

          {

              args.Cell.AddClass(new string[] { "below-80" });

          }

          else

          {

              args.Cell.AddClass(new string[] { "above-80" });

          }

      }

  }

<style>

    .below-30 {

        background-color: orangered;

        color: white !important;

    }

 

    .below-80 {

        background-color: yellow;

        color:red !important;

    }

 

    .above-80 {

        background-color: greenyellow;

        color:white !important;

    }

</style>

Reference: Cell in Blazor DataGrid Component | Syncfusion

Sample:https://blazorplayground.syncfusion.com/embed/rNLzXyBXCRZoMbew?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

[Manuel García Alemany]

How would it be to change the color of Ship Country depending on the Freight value?

Thank you

[Naveen Palanivel]

Hi Manuel,

We have reviewed your query regarding changing the cell color based on another cell's value. We would like to inform you that, within the QueryCellInfo event, you can access the entire row's data using args.Data. Based on this, you can apply the desired color to a column depending on the value of another column. Please refer to the following code snippet and sample for reference.

Sample : https://blazorplayground.syncfusion.com/embed/rDhfZasRqktfYliU?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Reference : https://blazor.syncfusion.com/documentation/datagrid/cell#using-event

 

    public void CustomizeCell(Syncfusion.Blazor.Grids.QueryCellInfoEventArgs<OrderData> args)

    {

        if (args.Column.Field == "ShipCity")

        {

            if (args.Data.Freight < 30)

            {

                args.Cell.AddClass(new string[] { "below-30" });

            }

            else if (args.Data.Freight < 80)

            {

                args.Cell.AddClass(new string[] { "below-80" });

            }

            else

            {

                args.Cell.AddClass(new string[] { "above-80" });

            }

        }

    }

Regards,
Naveen