DataGrid alternating row color with custom RowRender

Radzen.Blazor Components
1

(Radzen.blazor 2.17.1)
Hi,
Alternate row color work fine, but when I use the RowRender to add class to specific row, I lose the
"ui-datatable-odd" or "ui-datatable-even" class

    <RadzenGrid
         RowRender="@RowRender"

    public void RowRender(RowRenderEventArgs<MyRowVm> args)
    {
        if (some_condition)
        {
            args.Attributes.Add("class", "cleared");   // css apply strike through
        }
    }

At run time , tr becomes

tr class="cleared"

in place of

tr class="ui-datatable-even ui-widget-content cleared"

or

tr class="ui-datatable-odd ui-widget-content cleared"

don't know if it's the same with latest version (3.2.9)

2

You can add alternate row classes together with your custom classes.

3

What do you mean by alternate ?
I can add myself ui-datatable-even or odd in my RowRender code,
but how to know if the row is even or odd ?
it depend of the sort order

4

No, it does not. It's just the index of the item in the current page data.

5

That being said, it would be nice to be able to add to an attribute value instead of having to guess what it will be and recreate that.

6

Hi @Nic_Stage,

The issue discussed here is no longer relevant. In the latest version RadzenDataGrid uses the nth-child(even) CSS selector. Also there is the AllowAlternatingRows property which can turn alternating rows off if set to false.

7

I thought the issue was that, when you add a class attribute, it overrides existing values in the class for that row. The solution seemed to be to anticipate this and recreate the values for the alternating classes and add any further values at will. That seems more like a workaround than a solution to me, with all due respect. Perhaps I wasn't understanding the original problem though.

1 Like
8

Following up on this question after the update from Oct' 22:
How do I achieve having alternating row colors, highlighting rows on hover/select AND do some conditional row formatting?

Right now, if I enable conditional formatting (by putting CellRender="@CellRender" in my RadzenDataGrid) I lose the alternating row colors and the highlight row on hover.

Is the solution still to recreate the behaviour within the CellRender/RowRender method?
I couldn't find a good example for this.
In this example (DataGrid Single Selection) there is no conditional formatting involved.
In this example on the other hand, there is no highlighting row on mousehover.

Can somebody point me towards a good example please? Any help would be appreciated!

9

When you implement custom formatting you are essentially overriding the default theme styling of RadzenDataGrid. It is your responsibility to implement the row highlight, hover and alternating row styling int this case. To do so you can use the built-in CSS selectors that are always rendered:

  • .rz-selectable tbody tr.rz-data-row.rz-state-highlight > td - selected state - set the background color there.
  • .rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(even) > td - alternating rows - set the background color there.
  • .rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td:not(.rz-frozen-cell) the hover styling - again set the background color there.

If you want the default theme colors to override the custom formatting you can try the following:

.rz-selectable tbody tr.rz-data-row.rz-state-highlight > td {
    background-color: var(--rz-grid-selected-background-color) !important;
}

.rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(even) > td {
    background-color: var(--rz-grid-stripe-background-color) !important;
}

.rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) > td:not(.rz-frozen-cell) {
     background-color: var(--rz-grid-hover-background-color) !important;
}
1 Like
10

Thank you very much, that helped a lot!