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.