DataGrid RowRender don't select if set class

Vitaliy_Tkachenko · September 10, 2024, 10:32am

example:

code:

@using RadzenBlazorDemos.Data
@using RadzenBlazorDemos.Models.Northwind
@using Microsoft.EntityFrameworkCore

@inherits DbContextPage

<RadzenText TextStyle="TextStyle.H5" TagName="TagName.H3">Order Details</RadzenText>
<RadzenDataGrid Data="@orderDetails" ColumnWidth="200px" RowRender="@RowRender" RowSelect="@(args => orderDetail = args)" TItem="OrderDetail">
    <Columns>
        <RadzenDataGridColumn Property="@nameof(OrderDetail.OrderID)" Title="OrderID">
            <FooterTemplate>
                Total records: <b>@orderDetails.Count()</b>
            </FooterTemplate>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn Property="@nameof(OrderDetail.ProductID)" Title="ProductID/ProductName" 
            SortProperty="Product.ProductName" FilterProperty="Product.ProductName">
            <FooterTemplate>
                Most ordered product: <b>@orderDetails.GroupBy(o => o.Product.ProductName).OrderBy(g => g.Count()).Select(g => g.Key).FirstOrDefault()</b>,
                Least ordered product: <b>@orderDetails.GroupBy(o => o.Product.ProductName).OrderByDescending(g => g.Count()).Select(g => g.Key).FirstOrDefault()</b>
            </FooterTemplate>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn Property="Product.ProductName" Title="Product" />
        <RadzenDataGridColumn Property="@nameof(OrderDetail.Quantity)" Title="Quantity">
            <Template Context="data">
                @if (data.Quantity > 20)
                {
                    <span style='color: var(--rz-text-contrast-color)'>@data.Quantity</span>
                }
                else
                {
                    <span style='color: var(--rz-text-color)'>@data.Quantity</span>
                }
            </Template>
            <FooterTemplate>
                Total quantity: <b>@String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", orderDetails.Sum(o => o.Quantity))</b>
            </FooterTemplate>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn Property="@nameof(OrderDetail.Discount)" Title="Discount" FormatString="{0:P}">
            <FooterTemplate>
                Average discount: <b>@String.Format("{0:P}", orderDetails.Average(o => o.Discount))</b>
            </FooterTemplate>
        </RadzenDataGridColumn>
    </Columns>
</RadzenDataGrid>

<style>
    .radzen-grid-row-background-color-info-light > td {
        background-color: var(--rz-info-light) !important;
    }
</style>

@code {
    IEnumerable<OrderDetail> orderDetails;
    OrderDetail orderDetail;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        orderDetails = dbContext.OrderDetails.Include("Product").ToList();
    }

    void RowRender(RowRenderEventArgs<OrderDetail> args)
    {
        if (args.Data.Quantity > 20)
        {
            args.Attributes.Add("class", "radzen-grid-row-background-color-info-light rz-data-row");
        }
    }
}

explanations:

When i set color in cells in row JavaScript don't set attribute class with rz-state-highlight in the row

I select row buy JS don't add class rz-state-highlight in the tr