1. Home
  2. Forum
  3. Blazor
  4. add dynamic style cell

add dynamic style cell

Hi 
I want to change background color of  column's cells dynamically like following code





regards

Cemil

12 Replies 1 reply marked as answer
VN Vignesh Natarajan Syncfusion Team July 23, 2020 01:44 PM UTC

Hi Cemil,  
 
Greetings from Syncfusion support.  
 
Query: “I want to change background color of  column's cells dynamically like following code” 
 
We understand that you want to apply background color to Grid Column based on the other column value (priority_Color). We suggest you to achieve your requirement using AddStyle() of CellDom in the QueryCellInfo event of the Grid. 
 
Refer the below code example 
 
<SfGrid DataSource="@Orders" AllowSelection="false" EnableHover="false" Height="315"> 
    <GridEvents QueryCellInfo="CustomizeCell" TValue="Order"></GridEvents> 
    <GridColumns> 
. . . ..  
    </GridColumns> 
</SfGrid> 
  
@code{ 
    public List<Order> Orders { get; set; } 
  
. . .. . . 
  
    public void CustomizeCell(QueryCellInfoEventArgs<Order> args) 
    { 
        if (args.Column.Field == "CustomerID") 
        { 
            args.Cell.AddStyle(new string[] { "background-color:" + args.Data.Priority_Color + ";" }); 
        } 
    } 
 
 
Refer the below screenshot for the output 
 
 
 
For your convenience we have prepared a sample which can be downloaded from below  
 
Refer our UG documentation for your reference 
 
 
Kindly get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan 


PJ Proyectos jpbg May 13, 2021 03:59 AM UTC

Hi Vignesh,
how to do the same formatting in a method called from an external button and not from a grid event.
My scenario is I first fill the grid with data and then when the user clicks a Save button I have to validate all de grid data and mark the cells with errors. I have to say that my validation requires database so I can't validate records on action completed.

Thanks in advance.

RS Renjith Singh Rajendran Syncfusion Team May 14, 2021 07:19 AM UTC

Hi Proyectos, 

Greetings from Syncfusion support. 

Yes, you can still use QueryCellInfo event to achieve this requirement. We have prepared a sample in which we have performed update action in a button click, and after this update made the custom styles to apply in Grid. Please download and refer the sample from the link below, 
 
 
<SfButton OnClick="Update">Update</SfButton>
 
public bool flag = false; 
public async Task Update() 
{ 
    flag = true; 
    Order data = new Order() { OrderID = 1001, CustomerID = "ABCDE",Freight = 2.91 }; 
    await this.Grid.UpdateRow(1, data); 
} 
 
public void CustomizeCell(QueryCellInfoEventArgs<Order> args) 
{ 
    if (flag) 
    { 
        if (args.Column.Field == "CustomerID") 
        { 
            args.Cell.AddStyle(new string[] { "background-color:" + args.Data.Priority_Color + ";" }); 
        } 
    } 
} 
 

Please get back to us if you need further assistance. 

Regards, 
Renjith R 



Marked as answer
MA Maciej January 27, 2022 03:39 PM UTC

Hello

It is working, but cursor of selected cells is not visible.


Regards

Maciej


RN Rahul Narayanasamy Syncfusion Team January 28, 2022 01:48 PM UTC

Hi Maciej, 

Thanks for the update. 

We are quite unclear about your query. Could you please share more details regarding your query which will be helpful to validate and provide a better solution. 

  • Whether did you want to change the selected cell color for cell which is already applied color using QueryCellInfo event?
  • Whether the cursor is not visible properly for the background color applied cells?
  • What are the colors you are using to style those cells?
  • Share a simple reproduceable sample if possible.
  • Video demonstration of the problem.

Regards, 
Rahul 


MA Maciej January 29, 2022 12:22 PM UTC

Hello

Selection of single cell is not visible after mouse clicked.

Olny in cells with style added  in  QueryCellInfoEvent (attached video demonstration).


1.Options of datagrid selection:

<GridSelectionSettings Mode="Syncfusion.Blazor.Grids.SelectionMode.Cell" Type="Syncfusion.Blazor.Grids.SelectionType.Single"  CellSelectionMode="CellSelectionMode.Box"></GridSelectionSettings>

..

<GridEvents TValue="RotaEmployee"

                        QueryCellInfo="@CustomizeCell"

..

2.CSS

<style>

    .e-cellselectionbackground, .e-selectionbackground, .e-pivotview .e-grid .e-rowsheader.e-selectionbackground, .e-pivotview .e-grid .e-columnsheader.e-selectionbackground {

        background-color: mediumvioletred !important;    }

</style>

3.I used:

public void CustomizeCell(QueryCellInfoEventArgs<RotaEmployee> args)

{

        int ind = (int)args.Column.Index; 

        args.Cell.AddStyle(new string[] { "border: 1px solid rgb(233,233,233) !important;" });

        args.Cell.AddStyle(new string[] { "margin: 0 0 0 0;" });

        args.Cell.AddStyle(new string[] { "padding: 0 0 0 0;" });

if (rotaDay.DayHead.DayOfWeek == DayOfWeek.Saturday || rotaDay.DayHead.DayOfWeek == DayOfWeek.Sunday)

            {

                args.Cell.AddStyle(new string[] { "background-color:#f5e1df !important;" });

            }

...

if (rotaDay.fiedlList_P != null && rotaDay.fiedlList_P.Count > 0 && rotaDay.fiedlList_P[0] != null && rotaDay.fiedlList_P[0].KodZmiana != "")

            {

                switch (rotaDay.fiedlList_P[0].KodZmiana)

                {

                    case "D":

                        args.Cell.AddStyle(new string[] { "background-color:Yellow !important;" });

                        break;

...


Thank you for help.

Regards

Maciej


Attachment: Recording_1_86e5dcc1.zip

RN Rahul Narayanasamy Syncfusion Team January 31, 2022 03:10 PM UTC

Hi Maciej, 

Thanks for sharing the details. 

Query: Selection of single cell is not visible after mouse clicked. Olny in cells with style added  in  QueryCellInfoEvent (attached video demonstration). 

You want to change the selected cell color for the cell which is already applied some color using QueryCellInfo event. You can achieve your requirement by using below CSS.  

Since you have mentioned PivotView in your shared CSS class(your shared CSS class -> .e-cellselectionbackground, .e-selectionbackground, .e-pivotview .e-grid .e-rowsheader.e-selectionbackground, .e-pivotview .e-grid .e-columnsheader.e-selectionbackground). If you want to change the selected cell color of the Grid, then use the above code snippets.  
 
Find the below code snippets and sample for your reference. 

<style> 
    .e-grid td.e-cellselectionbackground { 
        background: mediumvioletred !important; 
    } 
</style> 


If not or if you are still facing the problem, then could you please share more details regarding your requirement which will be helpful to validate and provide a better solution. 

  • Whether did you used pivot view and want to change the selected cell color?
  • Share complete code snippets of the page.

Please let us know if you have any concerns. 

Regards, 
Rahul 


MA Maciej January 31, 2022 11:29 PM UTC

Hi Rahul,

Thank you very much.

It is working.

I had to remove "important!" from CustomizeCell


public void CustomizeCell(QueryCellInfoEventArgs<RotaEmployee> args)

{

     if (rotaDay.DayHead.DayOfWeek == DayOfWeek.Saturday)

     {

        args.Cell.AddStyle(new string[] { "background-color:#f5e1df !important;" });

     }

still overwrite cell's color

...


args.Cell.AddStyle(new string[] { "background-color:#f5e1df " });


without "!important" looks properly


Regards

Maciej



RN Rahul Narayanasamy Syncfusion Team February 1, 2022 12:30 PM UTC

Hi Maciej, 

Thanks for the update. 

We are happy to hear that you have achieved your requirement using the provided sample. Please get back to us if you need further assistance. 

Regards, 
Rahul 


MA Maciej December 29, 2023 06:30 PM UTC

Hi

After updating to version 24.1.43, adding a style to a cell stopped working.

public void Schedule_CustomizeCell(QueryCellInfoEventArgs<Employee> args)

{

    args.Cell.AddStyle(new string[] { "background-color:red;" });

...


Is there any additional option to set?

best regards

Maciej


PS Prathap Senthil Syncfusion Team January 2, 2024 07:58 AM UTC

Hi Maciej,

We have considered it as a breaking issue and logged the defect report “The QueryCellInfo event's add-style method is not working in the Grid after the NuGet version 24.1.41” for the same. Thank you for taking time to report this issue and helping us to improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle) and this fix will be included in our upcoming patch release.

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this feedback link.       

https://www.syncfusion.com/feedback/49621/the-querycellinfo-events-add-style-method-is-not-working-in-the-grid-after-the

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization”


Until then we appreciate your patience.


Regards,

Prathap S


PS Prathap Senthil Syncfusion Team January 17, 2024 11:43 AM UTC

Thanks for the patience.


We are glad to announce that, we have included the fix for the reported issue “The QueryCellInfo event's add-style method is not working in the Grid after the NuGet version 24.1.41” in our 24.1.46 release.  So please upgrade to our latest version of Syncfusion NuGet package to resolve the reported issue. Please find the NuGet package for latest fixes and features from below.


NuGet : https://www.nuget.org/packages/Syncfusion.Blazor.Grid

Release Notes: https://blazor.syncfusion.com/documentation/release-notes/24.1.46?type=all#data-grid


We thank you for your support and appreciate your patience in waiting for this release.



Loader.
Up arrow icon