DataGrid Master Detail Hierarchy - Change Expand/Collapse icon color dynamically

Radzen.Blazor Components
1

Hello.

I'm using a grid with a DataGrid Master-Detail Hierarchy structure (Order, OrderDetails) with the following workflow:

I expand an Order to see the OrderDetails for editing/adding details.

I want to change the color for icon Expand/Collapse only if the filed ItemsNo from master it is 0.

I used
.rz-datatable .rzi-chevron-circle-right:before {
color: lightgray !important;
}

.rz-datatable .rzi-chevron-circle-down:before {
color: lightgray !important;
}
and it works for every master rows.

but i don't know how to change in dynamic way only if ItemsNo is 0 or not.

Thanks

2

You might add custom CSS class to the row conditionally and use later in your style rules:

3

I used RowRender like

private void RowRender(RowRenderEventArgs<IDictionary<string, object>> args)
{
if (args?.Data != null)
{
args.Expandable = true;

     var itemsNoValue = CollectionDetailRepositoryHelpers.GetValueByKey(args.Data, "ItemsNo");

     if (int.TryParse(itemsNoValue, out var item) || itemsNoValue is null)
     {
         if (item > 0)
         {
             // items exist → apply special arrow color
             args.Attributes["class"] = "has-items";
         }
         else
         {
             // no items → apply different style if needed
             args.Attributes["class"] = "no-items";
         }
     }
 }

}

with

.rz-datatable tr.has-items .rzi-chevron-circle-right:before {
color: blue !important;
}

.rz-datatable tr.has-items .rzi-chevron-circle-down:before {
color: blue !important;
}

/* Optional: rows where ItemsNo == 0 */
.rz-datatable tr.no-items .rzi-chevron-circle-right:before {
color: lightgray !important;
}

.rz-datatable tr.no-items .rzi-chevron-circle-down:before {
color: lightgray !important;
}

It works but it overrides the classes of the grid lines.

For example now I can't select lines anymore.

Probably other features on the lines don't work either.

What can i do?

Thanks.

4

Maybe you can use CellRender event instead and set classes for cells instead rows.