Cell style set on CellRender is overriden when column is set as frozen="true"

Radzen.Blazor Components
1

I noticed that when I set the style of a cell using the CellRender callback it works OK unless the column where the cell resides is set as frozen="true". As soon as the column is set as frozen="true" the Style of the element is overridden instead of appended to the style set by the CellRender callback method.

Is this a bug? Can I do something to get the column be frozen="true" and still have the style set in the cell as I want it to be?

private void OnCellRender(DataGridCellRenderEventArgs<Sometype> args)
{
    if (args.Column.Property == "XYZ")
    {
            args.Attributes.Add("style", "background-color: #f0f0f0; font-weight: bold;");
    }
}
2

Just tried this in our demos and it worked:

image
image1920×1080 246 KB

image
image1920×1080 218 KB

image
image1920×1080 218 KB

3

Thank you @enchev

I can also confirm that in the demos it works as expected.
However, on my end I can recreate this very reliably. It is pretty clear cut.
I can also see that not even the AllowAlternatingRows="true" is honoured for frozen columns.

Looking at the styles applied in the TD elements, my styles are not there at all. So the code is not generating them. I am not sure how any of my code could be affecting this. I have no other events attached on my grids.

Could this be a race condition that I am hitting since I am running in debug mode?

4

In my opinion this is not possible. Try to recreate your case and the problem using our demos - they are editable.

5

@enchev Understood. I was incorrect that the styles I apply via the callback method are not there. They are indeed there but somehow are not applied.

Debugging this through the Dev Tools of the browser, I can see that this is what causing my background colour to be overridden:

.rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-right:before, .rz-selectable tbody tr.rz-data-row .rz-cell-data.rz-frozen-cell-right:before {
    z-index: -2;
    background-color: var(--rz-grid-frozen-cell-background-color);
}

As soon as I remove this rule, my background colour shows OK.

What is the purpose of this rule?

6

You can use !important to override some default style.

7

I have the same issue and my first try was to use !important but it does not work ! The crazy thing is that in chrome's developer tools my custom color does show under computed but the screen show the default color.

Thanks amavroudakis for finding the class for this issue, but this is a work around. There should be no difference in frozen and non frozen columns when setting the style.

What also does not work is setting the font color. This is overwritten by

.rz-grid-table td .rz-cell-data

A fix is adding this class to the global css and set color to inherit. This way one can set the color in

args.Attributes.Add("style", "background-color: #f0f0f0; color: red;");

8

I also could see the rendered background colour at the Browser developer tool inspector different, compared to the displayed color.

The crazy thing is that in chrome's developer tools my custom color does show under computed but the screen show the default color.

This is the workarround that fixed my case, to change background color to a frozen cell. Key is to bind the custom inserted class name to the rz-frozen-cell-left-inner

args.Attributes.Add("class", "yellow-background);

.yellow-background:before, .yellow-background:after,
.rz-frozen-cell-left-inner.orange-background:before,
.rz-frozen-cell-left-inner.orange-background:after
{
    background: var(--rz-warning-light) !important;
}