How to change background color of a Radzen Data Grid row after updating

Question

How to change background color of a Radzen Data Grid row after updating

Cenk 1,036

I am trying to change the background color of a row on a Radzen Data Grid component after updating the row. The code I am currently using isn't working. Here is how I am trying to change the background color:

void CellRender(DataGridCellRenderEventArgs<ReportViewModel> args)
{
    args.Attributes.Add("style", $"background-color: {(args.Data.TotalSellPrice <= args.Data.TotalUnitCost ? "var(--rz-secondary)" : "var(--rz-base-background-color)")};");
}

The CellRender event is triggered after await _grid.Reload();, but it does not make the background color red even if the condition is true. I checked with my browser's developer tools and the final style is red (--rz-secondary), did not change to --rz-base-background-color. Here is how I updated the row:

async Task SaveRowDetail(ReportViewModel reportViewModel)
{
   
    if (reportViewModel != null)
    {
        orderDetail.Id = reportViewModel.OrderDetailId;
        orderDetail.Quantity = reportViewModel.Quantity;
        orderDetail.CostRatio = reportViewModel.CostRatio;
        orderDetail.Description = reportViewModel.Description;
        orderDetail.ProductCode = reportViewModel.ProductCode;
        orderDetail.ProductName = reportViewModel.ProductName;
        orderDetail.BuyUnitPrice = reportViewModel.BuyUnitPrice;
        orderDetail.ShippingNumber = reportViewModel.ShippingNumber;
        orderDetail.ShippingWeek = reportViewModel.ShippingWeek;
        orderDetail.Status = reportViewModel.OrderDetailStatus;
        orderDetail.TotalBuyPrice = reportViewModel.TotalBuyPrice;
        orderDetail.TotalSellPrice = reportViewModel.TotalSellPrice;
        orderDetail.SellUnitPrice = reportViewModel.SellUnitPrice;
        orderDetail.UnitCost = reportViewModel.UnitCost;
        orderDetail.TrackingNumber = reportViewModel.TrackingNumber;
        orderDetail.TotalUnitCost = reportViewModel.TotalUnitCost;
        orderDetail.Currency = reportViewModel.Currency;
        orderDetail.OrderId = reportViewModel.OrderId;
        orderDetail.VendorId = reportViewModel.VendorId;
        orderDetail.Warehouse = reportViewModel.Warehouse;
        orderDetail.PaymentStatus = reportViewModel.PaymentStatus;
        orderDetail.CustomerOrderNumber = reportViewModel.CustomerOrderNumber;
        orderDetail.CustomerStockCode = reportViewModel.CustomerStockCode;
        orderDetail.PoNotes = reportViewModel.PoNotes;

        if (user.IsInRole("Administrators"))
        {
            if (reportViewModel.OrderDetailStatus == "Completed")
            {
                orderDetail.CompletionDateTime = reportViewModel.CompletionDateTime;
                reportViewModel.Status = "Completed";
            }
            else
            {
                orderDetail.CompletionDateTime = null;
                reportViewModel.CompletionDateTime = null;
                reportViewModel.Status = "Continues";
            }
        }
       
    }
    
    
    await EditOrderDetailUseCase.ExecuteAsync(orderDetail);
    await _grid.UpdateRow(reportViewModel);
    _orders = await GetOrdersExportUseCase.ExecuteAsync(_vendorId, _status, _startDate, _endDate, _productCode, _customerId, user);
    await _grid.Reload();
   
}

If I navigate to another page and come back to this page again, the row I updated background color is changed to red!

2 answers

Your answer

Answer 1

Anonymous

Hi,@Cenk,

The CellRender event is triggered after await _grid.Reload();, but it does not make the background color red even if the condition is true If I navigate to another page and come back to this page again, the row I updated background color is changed to red! It indicates updating grid doesn't work for you ,but rerendering the whole page would work,so a workaround for you: call await InvokeAsync(StateHasChanged); to update the whole page

If you still have problems with this issue,show us a minimal example that could reproduce so that we could know where you got wrong and explain the reason to you.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment". Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread. Best regards, Ruikai Feng

Cenk 1,036 Reputation points

2024-01-23T14:41:34.0066667+00:00

Preparing a minimal example is harder than this problem :)

Anonymous

I tried a minimal example:

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <RadzenDataGrid @ref="_grid" AllowSorting="true" Data="@forecasts" TItem="WeatherForecast" CellRender="CellRender" >
  <Columns>
    <RadzenDataGridColumn TItem="WeatherForecast" Context="data" Property="Date" Title="Date" >
      <Template>
        @data.Date.ToShortDateString()
      </Template>
    </RadzenDataGridColumn>
    <RadzenDataGridColumn TItem="WeatherForecast" Context="data" Property="TemperatureC" Title="TemperatureC" >
      <Template>
        @data.TemperatureC
      </Template>
    </RadzenDataGridColumn>
    <RadzenDataGridColumn TItem="WeatherForecast" Context="data" Property="TemperatureF" Title="TemperatureF" >
      <Template>
        @data.TemperatureF
      </Template>
    </RadzenDataGridColumn>
    <RadzenDataGridColumn TItem="WeatherForecast" Context="data" Property="Summary" Title="Summary" >
      <Template>
        @data.Summary
      </Template>
    </RadzenDataGridColumn>
  </Columns>
</RadzenDataGrid>
}

<RadzenButton Click=@(args =>Reload()) > Reload</RadzenButton>

@code {
    private WeatherForecast[]? forecasts;

    private RadzenDataGrid<WeatherForecast> _grid;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await ForecastService.GetForecastAsync(DateOnly.FromDateTime(DateTime.Now));
    }

    void CellRender(DataGridCellRenderEventArgs<WeatherForecast> args)
    {
        args.Attributes.Add("style", $"background-color: {(args.Data.TemperatureC <= 0 ? "var(--rz-secondary)" : "var(--rz-base-background-color)")};");
    }

    async Task Reload()
    {
       
        forecasts = await ForecastService.GetForecastAsync(DateOnly.FromDateTime(DateTime.Now));
         //Update Grid
        // await _grid.Reload();
        
        //Update Page
        await InvokeAsync(StateHasChanged);
    }

}

It works on myside: User's image Could you show more codes related with the UI part?

Cenk 1,036

Here is the page



<RadzenCard class="mb-3">
    <RadzenDataFilter @ref="dataFilter" Auto="auto" Data="@_orders" TItem="ReportViewModel" ViewChanged="@(view => filteredOrders = view.ToList())"
                      FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive">
        <Properties>
            <MyCustomDataFilterProperty TItem="ReportViewModel" Property="ProductCode" Title="Product Code"/>
            <MyCustomDataFilterProperty TItem="ReportViewModel" Property="CustomerName" Title="Customer" FilterValue="@selectedCustomer"
                                        Type="typeof(string)" FilterOperator="FilterOperator.Equals">
                <FilterTemplate>
                    <RadzenDropDown @bind-Value="@selectedCustomer" Style="width: 100%;" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowFiltering="true" Placeholder="Select..."
                                    Change="@OnSelectedCustomerChange" Data="@(_customersDto.Select(c => c.Name).ToList())" Multiple="false" AllowClear="true"/>
                </FilterTemplate>
            </MyCustomDataFilterProperty>
            <MyCustomDataFilterProperty TItem="ReportViewModel" Property="Status" Title="Order Status" FilterValue="@selectedStatus"
                                        Type="typeof(string)" FilterOperator="FilterOperator.Equals">
                <FilterTemplate>
                    <RadzenDropDown @bind-Value="@selectedStatus" Style="width: 100%;" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowFiltering="true" Placeholder="Select..."
                                    Change="@OnSelectedStatusChange" Data="@(orderStatusList)" Multiple="false" AllowClear="true"/>
                </FilterTemplate>
            </MyCustomDataFilterProperty>
            <MyCustomDataFilterProperty TItem="ReportViewModel" Property="VendorName" Title="Vendor" FilterValue="@selectedVendor"
                                        Type="typeof(string)" FilterOperator="FilterOperator.Equals">
                <FilterTemplate>
                    <RadzenDropDown @bind-Value="@selectedVendor" Style="width: 100%;" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowFiltering="true" Placeholder="Select..."
                                    Change="@OnSelectedVendorChange" Data="@(_vendorsDto.Select(c => c.Name).ToList())" Multiple="false" AllowClear="true"/>
                </FilterTemplate>
            </MyCustomDataFilterProperty>
            <RadzenDataFilterProperty TItem="ReportViewModel" Property="OrderDateTime" Title="Order Date" FormatString="{0:d}"/>
            @*<RadzenDataFilterProperty TItem="ReportViewModel" Property="OrderDateTime" Title="Order Date" FormatString="{0:d}" 
                                      FilterValue="@filteredDates"
                                      Type="typeof(IEnumerable<DateTime>)"
                                      FilterOperator="FilterOperator.Contains">
                <FilterTemplate>
                    <DatePicker Dates="selectedDates" TValue="DateTime" InputMode="DateInputMode.Date" SelectionMode="DateInputSelectionMode.Multiple"
                                DisplayFormat="dd/MM/Y" DatesChanged="@OnDatesChanged"/>
                    
                </FilterTemplate>
            </RadzenDataFilterProperty>*@
            <MyCustomDataFilterProperty TItem="ReportViewModel" Property="ShippingWeek" Title="Shipping Week"/>
            <MyCustomDataFilterProperty TItem="ReportViewModel" Property="CustomerOrderNumber" Title="Customer Order Number"/>
            <MyCustomDataFilterProperty TItem="ReportViewModel" Property="CustomerStockCode" Title="Customer Stock Code"/>
            <MyCustomDataFilterProperty TItem="ReportViewModel" Property="OrderId" Title="Order ID"/>
            <MyCustomDataFilterProperty TItem="ReportViewModel" Property="OrderDetailId" Title="Product ID"/>
            <MyCustomDataFilterProperty TItem="ReportViewModel" Property="DoneBy" Title="Employee"/>
            <MyCustomDataFilterProperty TItem="ReportViewModel" Property="UnitCost" Title="Unit Cost"/>
            <MyCustomDataFilterProperty TItem="ReportViewModel" Property="TotalSellPrice" Title="Total Sell Price"/>
            <MyCustomDataFilterProperty TItem="ReportViewModel" Property="Warehouse" Title="Warehouse"/>
            <MyCustomDataFilterProperty TItem="ReportViewModel" Property="OrderDetailStatus" Title="Order Detail Status" FilterValue="@selectedDetailStatus"
                                        Type="typeof(string)" FilterOperator="FilterOperator.Equals">
                <FilterTemplate>
                    <RadzenDropDown @bind-Value="@selectedDetailStatus" Style="width: 100%;" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowFiltering="true" Placeholder="Select..."
                                    Change="@OnSelectedDetailStatusChange" Data="@(detailStatusList)" Multiple="false" AllowClear="true"/>
                </FilterTemplate>
            </MyCustomDataFilterProperty>
            <MyCustomDataFilterProperty TItem="ReportViewModel" Property="CompletionDateTime" Title="Completion Date" FormatString="{0:d}"/>
            <AuthorizeView Roles="Administrators">
                <MyCustomDataFilterProperty TItem="ReportViewModel" Property="PaymentStatus" Title="Payment Status"/>
            </AuthorizeView>
        </Properties>
    </RadzenDataFilter>
    
</RadzenCard>


<RadzenButton Text="Export XLS" Icon="grid_on" Click="@(args => Export())" ButtonStyle="ButtonStyle.Secondary" Size="ButtonSize.Small" Class="mb-1"/>
<RadzenDataGrid @ref="_grid" AllowPaging="true" AllowSorting="true" Data="@(filteredOrders ?? _orders)" TItem="ReportViewModel"
                PagerHorizontalAlign="HorizontalAlign.Justify" ShowPagingSummary="true" AllowColumnResize="true"
                AllowVirtualization="true" Style="width: calc(100vw - 70px);" ColumnWidth="170px" PageSize="20" GridLines="DataGridGridLines.Both"
                CellRender="@CellRender" AllowColumnPicking="true">

<Columns>
<RadzenDataGridColumn TItem="ReportViewModel" Property="OrderId" Title="Order ID" Width="100px" OrderIndex="1"/>
<AuthorizeView Roles="Administrators">
    <RadzenDataGridColumn TItem="ReportViewModel" Property="CustomerName" Title="Customer" OrderIndex="2"/>
</AuthorizeView>
<RadzenDataGridColumn TItem="ReportViewModel" Property="OrderDateTime" Title="Order Date" Width="100px" OrderIndex="3">
    <Template Context="ReportViewModel">
        @($"{ReportViewModel.OrderDateTime:dd/MM/yyyy}")
    </Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="Status" Title="Status" Width="100px" OrderIndex="4"/>
<RadzenDataGridColumn TItem="ReportViewModel" Property="DoneBy" Title="Employee" OrderIndex="5"/>
<RadzenDataGridColumn TItem="ReportViewModel" Property="OrderDetailId" Title="Product ID" OrderIndex="6"/>
<RadzenDataGridColumn TItem="ReportViewModel" Property="ProductCode" Title="Product Code" Width="100px" OrderIndex="7">
    <EditTemplate Context="orderDetail">
        <RadzenTextBox @bind-Value="orderDetail.ProductCode" Style="width: 100%; display: block" Name="ProductCode"/>
        <RadzenRequiredValidator Text="Product Code is Required!" Component="ProductCode" Popup="true" Style="position: absolute; z-index: 9999;"/>
    </EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="VendorName" Title="Vendor" OrderIndex="8"
                      Type="typeof(IEnumerable<string>)" FilterValue="@selectedVendors" FilterOperator="FilterOperator.Contains" LogicalFilterOperator="LogicalFilterOperator.Or">
    <FilterTemplate>
        <RadzenDropDown Style="width: 100%;" @bind-Value="@selectedVendors" Placeholder="Select..."
                        Change="@OnSelectedVendorsChange" Data="@(vendorNames)" AllowClear="true" Multiple="true"/>
    </FilterTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="Warehouse" Title="Warehouse" Width="100px" OrderIndex="9">
    <EditTemplate Context="detail">
        <RadzenDropDown AllowClear="true" TValue="string" Class="w-100" Data="@warehouse" @bind-Value="detail.Warehouse" Name="Warehouse"/>
        <RadzenRequiredValidator Text="Warehouse is Required!" Component="Warehouse" Popup="true" Style="position: absolute; z-index: 9999;"/>
    </EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="Quantity" Title="Quantity" Width="100px" OrderIndex="10">
    <EditTemplate Context="orderDetail">
        <RadzenNumeric TValue="int" Min="1" @bind-Value="orderDetail.Quantity" Style="width: 100%; display: block" Name="Quantity"/>
        <RadzenRequiredValidator Text="Required!" Component="Quantity" Popup="true" Style="position: absolute; z-index: 9999;"/>
    </EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="BuyUnitPrice" Title="Buy Unit Price" OrderIndex="11">
    <Template Context="detail">
        @switch (detail.Currency)
        {
            case "USD":
                @string.Format(new CultureInfo("en-US"), "{0}{1:0.#####}", new CultureInfo("en-US").NumberFormat.CurrencySymbol, detail.BuyUnitPrice)
                break;
            case "EURO":
                @string.Format(new CultureInfo("en-FR"), "{0}{1:0.#####}", new CultureInfo("en-FR").NumberFormat.CurrencySymbol, detail.BuyUnitPrice)
                break;
            default:
                @string.Format(new CultureInfo("tr-TR"), "{0}{1:0.#####}", new CultureInfo("tr-TR").NumberFormat.CurrencySymbol, detail.BuyUnitPrice)
                break;
        }
    </Template>
    <EditTemplate Context="detail">
        <RadzenNumeric TValue="double" Min="0" @bind-Value="detail.BuyUnitPrice" Style="width: 100%; display: block" Name="BuyUnitPrice"/>
    </EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="CostRatio" Title="Cost Ratio" Width="100px" OrderIndex="12">
    <EditTemplate Context="detail">
        <RadzenNumeric TValue="double" Min="0" @bind-Value="detail.CostRatio" Style="width: 100%; display: block" Name="CostRatio"/>
        <RadzenRequiredValidator Text="Required!" Component="CostRatio" Popup="false" Style="position: absolute"/>
    </EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="UnitCost" Title="Unit Cost" OrderIndex="13">
    <Template Context="detail">
        @switch (detail.Currency)
        {
            case "USD":
                @string.Format(new CultureInfo("en-US"), "{0}{1:0.#####}", new CultureInfo("en-US").NumberFormat.CurrencySymbol, detail.UnitCost)
                break;
            case "EURO":
                @string.Format(new CultureInfo("en-FR"), "{0}{1:0.#####}", new CultureInfo("en-FR").NumberFormat.CurrencySymbol, detail.UnitCost)
                break;
            default:
                @string.Format(new CultureInfo("tr-TR"), "{0}{1:0.#####}", new CultureInfo("tr-TR").NumberFormat.CurrencySymbol, detail.UnitCost)
                break;
        }
    </Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="TotalBuyPrice" Title="Total Buy" Width="100px" OrderIndex="14">
    <Template Context="detail">
        @switch (detail.Currency)
        {
            case "USD":
                @string.Format(new CultureInfo("en-US"), "{0}{1:0.#####}", new CultureInfo("en-US").NumberFormat.CurrencySymbol, detail.TotalBuyPrice)
                break;
            case "EURO":
                @string.Format(new CultureInfo("en-FR"), "{0}{1:0.#####}", new CultureInfo("en-FR").NumberFormat.CurrencySymbol, detail.TotalBuyPrice)
                break;
            default:
                @string.Format(new CultureInfo("tr-TR"), "{0}{1:0.#####}", new CultureInfo("tr-TR").NumberFormat.CurrencySymbol, detail.TotalBuyPrice)
                break;
        }
    </Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="SellUnitPrice" Title="Sell Unit Price" OrderIndex="15">
    <Template Context="detail">
        @switch (detail.Currency)
        {
            case "USD":
                @string.Format(new CultureInfo("en-US"), "{0}{1:0.#####}", new CultureInfo("en-US").NumberFormat.CurrencySymbol, detail.SellUnitPrice)
                break;
            case "EURO":
                @string.Format(new CultureInfo("en-FR"), "{0}{1:0.#####}", new CultureInfo("en-FR").NumberFormat.CurrencySymbol, detail.SellUnitPrice)
                break;
            default:
                @string.Format(new CultureInfo("tr-TR"), "{0}{1:0.#####}", new CultureInfo("tr-TR").NumberFormat.CurrencySymbol, detail.SellUnitPrice)
                break;
        }
    </Template>
    <EditTemplate Context="detail">
        <RadzenNumeric TValue="double?" Min="0" @bind-Value="detail.SellUnitPrice" Style="width: 100%; display: block" Name="SellUnitPrice"/>

    </EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="TotalSellPrice" Title="Total Sell Price" OrderIndex="16">
    <Template Context="detail">
        @switch (detail.Currency)
        {
            case "USD":
                @string.Format(new CultureInfo("en-US"), "{0}{1:0.#####}", new CultureInfo("en-US").NumberFormat.CurrencySymbol, detail.TotalSellPrice)
                break;
            case "EURO":
                @string.Format(new CultureInfo("en-FR"), "{0}{1:0.#####}", new CultureInfo("en-FR").NumberFormat.CurrencySymbol, detail.TotalSellPrice)
                break;
            default:
                @string.Format(new CultureInfo("tr-TR"), "{0}{1:0.#####}", new CultureInfo("tr-TR").NumberFormat.CurrencySymbol, detail.TotalSellPrice)
                break;
        }
    </Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="TotalUnitCost" Title="Total Unit Cost" OrderIndex="17">
    <Template Context="detail">
        @switch (detail.Currency)
        {
            case "USD":
                @string.Format(new CultureInfo("en-US"), "{0}{1:0.#####}", new CultureInfo("en-US").NumberFormat.CurrencySymbol, (detail.BuyUnitPrice * (detail.CostRatio / 100) + detail.BuyUnitPrice) * detail.Quantity)
                break;
            case "EURO":
                @string.Format(new CultureInfo("en-FR"), "{0}{1:0.#####}", new CultureInfo("en-FR").NumberFormat.CurrencySymbol, (detail.BuyUnitPrice * (detail.CostRatio / 100) + detail.BuyUnitPrice) * detail.Quantity)
                break;
            default:
                @string.Format(new CultureInfo("tr-TR"), "{0}{1:0.#####}", new CultureInfo("tr-TR").NumberFormat.CurrencySymbol, (detail.BuyUnitPrice * (detail.CostRatio / 100) + detail.BuyUnitPrice) * detail.Quantity)
                break;
        }
    </Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="ShippingNumber" Title="Shipping Number" OrderIndex="18">
    <EditTemplate Context="orderDetail">
        <RadzenTextBox @bind-Value="orderDetail.ShippingNumber" Style="width: 100%; display: block" Name="ShippingNumber"/>
    </EditTemplate>
</RadzenDataGridColumn>
        <RadzenDataGridColumn TItem="ReportViewModel" Property="ShippingWeek" Title="Shipping Week" OrderIndex="19">
            <EditTemplate Context="orderDetail">
                <RadzenNumeric @bind-Value="orderDetail.ShippingWeek" Style="width: 100%; display: block" Name="ShippingWeek" />
                <RadzenNumericRangeValidator Component="ShippingWeek" Min="1" Max="52" Text="Shipping Week should be between 1 and 52" Popup=true Style="position: absolute" />
            </EditTemplate>
        </RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="OrderDetailStatus" Title="Detail Status" OrderIndex="20">
    <EditTemplate Context="orderDetail">
        <RadzenDropDown AllowClear="true" TValue="string" Class="w-100" Data="@detailStatusList" @bind-Value="orderDetail.OrderDetailStatus" Name="Status"/>
        <RadzenRequiredValidator Text="Status is Required!" Component="Status" Popup="true" Style="position: absolute; z-index: 9999;"/>
    </EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="TrackingNumber" Title="Tracking" OrderIndex="21">
    <EditTemplate Context="orderDetail">
        <RadzenTextBox @bind-Value="orderDetail.TrackingNumber" Style="width: 100%; display: block" Name="TrackingNumber"/>
    </EditTemplate>
</RadzenDataGridColumn>
<AuthorizeView Roles="Administrators">
    <RadzenDataGridColumn TItem="ReportViewModel" Property="PaymentStatus" Title="PaymentStatus" Width="100px" OrderIndex="22">
        <EditTemplate Context="orderDetail">
            <RadzenDropDown AllowClear="true" TValue="string" @bind-Value="orderDetail.PaymentStatus" Class="w-100" Data="@paymentStatus" Name="PaymentStatus"/>
        </EditTemplate>
    </RadzenDataGridColumn>
</AuthorizeView>
<RadzenDataGridColumn TItem="ReportViewModel" Property="Currency" Title="Currency" Width="100px" OrderIndex="23"/>
<RadzenDataGridColumn TItem="ReportViewModel" Property="CustomerStockCode" Title="Customer Stock Code" Width="100px" OrderIndex="24">
    <EditTemplate Context="orderDetail">
        <RadzenTextBox @bind-Value="orderDetail.CustomerStockCode" Style="width: 100%; display: block" Name="CustomerStockCode"/>
    </EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="CustomerOrderNumber" Title="Customer OrderNumber" Width="100px" OrderIndex="25">
    <EditTemplate Context="orderDetail">
        <RadzenTextBox @bind-Value="orderDetail.CustomerOrderNumber" Style="width: 100%; display: block" Name="CustomerOrderNumber"/>
    </EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="CompletionDateTime" Title="Completion Date" Width="100px" OrderIndex="26">
    <Template Context="ReportViewModel">
        @($"{ReportViewModel.CompletionDateTime:dd/MM/yyyy}")
    </Template>

    <EditTemplate Context="orderDetail">
        <RadzenDatePicker @bind-Value="orderDetail.CompletionDateTime" DateFormat="dd/MM/yyyy HH:mm" Class="w-100" Visible="@role"/>
    </EditTemplate>

</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="Description" Title="Description" OrderIndex="27">
    <EditTemplate Context="orderDetail">
        <RadzenTextBox @bind-Value="orderDetail.Description" Style="width: 100%; display: block" Name="Description"/>
    </EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Property="PoNotes" Title="PO Notes" OrderIndex="28">
    <EditTemplate Context="orderDetail">
        <RadzenTextBox @bind-Value="orderDetail.PoNotes" Style="width: 100%; display: block" Name="PoNotes"/>
    </EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="ReportViewModel" Context="order" Filterable="false" Sortable="false" TextAlign="TextAlign.Center" Width="120px" OrderIndex="29">
    <Template Context="order">
        <RadzenButton Icon="print" ButtonStyle="ButtonStyle.Secondary" Class="m-1" Click="@(args => OpenOrder(order))" Size="ButtonSize.Small">
        </RadzenButton>
        <RadzenButton Icon="edit" ButtonStyle="ButtonStyle.Primary" Class="m-1" Click="@(args => EditRow(order))" @onclick:stopPropagation="true" Size="ButtonSize.Small">
        </RadzenButton>
    </Template>
    <EditTemplate Context="detail">
        <RadzenButton Icon="check" ButtonStyle="ButtonStyle.Primary" Class="m-1" Click="@(args => SaveRowDetail(detail))" Size="ButtonSize.Small">
        </RadzenButton>
        <RadzenButton Icon="close" ButtonStyle="ButtonStyle.Light" Class="m-1" Click="@(args => CancelEditDetail(detail))" Size="ButtonSize.Small">
        </RadzenButton>

    </EditTemplate>
</RadzenDataGridColumn>

</Columns>
</RadzenDataGrid>


@code {
    RadzenDataGrid<ReportViewModel> _grid;
    RadzenDataFilter<ReportViewModel> dataFilter;
    IEnumerable<ReportViewModel> filteredOrders;
    bool auto = true;
    ReportViewModel reportViewModel;
    OrderDetailDto orderDetailDto;
    DateTime? _startDate;
    DateTime? _endDate;
    string? _status;
    string? _detailStatus;
    int _vendorId;
    int _customerId;
    int orderID;
    string _productCode;
    IEnumerable<string> orderStatusList = new[] { "Continues", "Cancelled", "Completed" };
    readonly List<string> detailStatusList = new() { "Order Opened", "Confirmed", "Partner Warehouse", "Shipped", "At Custom", "Warehouse", "Completed" };
    readonly List<string> paymentStatus = new() { "Pending Payment", "Paid" };
    // readonly List<string> warehouse = new() { "China Warehouse", "USA Warehouse", "Private Shipping" };
    List<string> warehouse = new();
    IEnumerable<WarehouseAddress?> warehouses;
    IEnumerable<ReportViewModel> _orders;
    IEnumerable<Vendor?> _vendors;
    IEnumerable<Customer?> _customers;
    IEnumerable<VendorDto?> _vendorsDto;
    IEnumerable<CustomerDto?> _customersDto;
    ClaimsPrincipal user;
    IEnumerable<string?> selectedVendors;
    bool isLoading = false;
    IQueryable<ReportViewModel?> query;
    List<string> vendorNames;
    int count;
    OrderDetail orderDetail = new();
    IQueryable<ReportViewModel?> filter;
    string selectedStatus;
    string selectedDetailStatus;
    string selectedCustomer;
    string selectedVendor;
    private bool DataLoading = false;
    IReadOnlyList<DateTime> selectedDates = new List<DateTime>().AsReadOnly();
    IEnumerable<DateTime> filteredDates;

    bool role = false;

    Task OnDatesChanged(IReadOnlyList<DateTime> values)
    {
        selectedDates = values;
        filteredDates = values.Cast<DateTime>();
        return Task.CompletedTask;
    }

    void OnSelectedStatusChange(object value)
    {
        if (selectedStatus != null && !selectedStatus.Any())
        {
            selectedStatus = null;
        }
    }

    void OnSelectedDetailStatusChange(object value)
    {
        if (selectedDetailStatus != null && !selectedDetailStatus.Any())
        {
            selectedDetailStatus = null;
        }
    }

    void OnSelectedCustomerChange(object value)
    {
        if (selectedCustomer != null && !selectedCustomer.Any())
        {
            selectedCustomer = null;
        }
    }

    void OnSelectedVendorChange(object value)
    {
        if (selectedVendor != null && !selectedVendor.Any())
        {
            selectedVendor = null;
        }
    }

    private async Task CancelEditDetail(ReportViewModel? reportViewModel)
    {        
        try
        {
            var orderDetailDto = Mapper.Map<OrderDetailDto>(reportViewModel);            
            var orderDetailOriginal = await CancelOrderDetailUseCase.Execute(orderDetailDto);
            Mapper.Map(orderDetailOriginal, reportViewModel);
            _grid.CancelEditRow(reportViewModel);
        }
        catch (Exception e)
        {
            _logger.LogError(e.Message);
            Console.WriteLine(e);
        }
        
    }

    async Task SaveRowDetail(ReportViewModel reportViewModel)
    {
       
        if (reportViewModel != null)
        {
            orderDetail.Id = reportViewModel.OrderDetailId;
            orderDetail.Quantity = reportViewModel.Quantity;
            orderDetail.CostRatio = reportViewModel.CostRatio;
            orderDetail.Description = reportViewModel.Description;
            orderDetail.ProductCode = reportViewModel.ProductCode;
            orderDetail.ProductName = reportViewModel.ProductName;
            orderDetail.BuyUnitPrice = reportViewModel.BuyUnitPrice;
            orderDetail.ShippingNumber = reportViewModel.ShippingNumber;
            orderDetail.ShippingWeek = reportViewModel.ShippingWeek;
            orderDetail.Status = reportViewModel.OrderDetailStatus;
            orderDetail.TotalBuyPrice = reportViewModel.TotalBuyPrice;
            orderDetail.TotalSellPrice = reportViewModel.TotalSellPrice;
            orderDetail.SellUnitPrice = reportViewModel.SellUnitPrice;
            orderDetail.UnitCost = reportViewModel.UnitCost;
            orderDetail.TrackingNumber = reportViewModel.TrackingNumber;
            orderDetail.TotalUnitCost = reportViewModel.TotalUnitCost;
            orderDetail.Currency = reportViewModel.Currency;
            orderDetail.OrderId = reportViewModel.OrderId;
            orderDetail.VendorId = reportViewModel.VendorId;
            orderDetail.Warehouse = reportViewModel.Warehouse;
            orderDetail.PaymentStatus = reportViewModel.PaymentStatus;
            orderDetail.CustomerOrderNumber = reportViewModel.CustomerOrderNumber;
            orderDetail.CustomerStockCode = reportViewModel.CustomerStockCode;
            orderDetail.PoNotes = reportViewModel.PoNotes;

            if (user.IsInRole("Administrators"))
            {
                if (reportViewModel.OrderDetailStatus == "Completed")
                {
                    orderDetail.CompletionDateTime = reportViewModel.CompletionDateTime;
                    // reportViewModel.CompletionDateTime = DateTime.Now.Date;
                    reportViewModel.Status = "Completed";
                }
                else
                {
                    orderDetail.CompletionDateTime = null;
                    reportViewModel.CompletionDateTime = null;
                    reportViewModel.Status = "Continues";
                }
            }
           
        }   
        
        await EditOrderDetailUseCase.ExecuteAsync(orderDetail);
        await _grid.UpdateRow(reportViewModel);
        _orders = await GetOrdersExportUseCase.ExecuteAsync(_vendorId, _status, _startDate, _endDate, _productCode, _customerId, user);        
        await _grid.Reload();        
    }

    async Task EditRow(ReportViewModel? reportViewModel)
    {
            await _grid.EditRow(reportViewModel);
    }
    protected override async Task OnInitializedAsync()
    {
        user = (await _authenticationStateProvider.GetAuthenticationStateAsync()).User;
        role = user.IsInRole("Administrators");

        if (!user.Identity.IsAuthenticated)
        {
            NavigationManager.NavigateTo("/Identity/Account/Login", false);
        }
    }

    async Task OnSelectedVendorsChange(object value)
    {
        if (selectedVendors != null && !selectedVendors.Any())
        {
            selectedVendors = null;
        }
        await _grid.FirstPage();
    }
    public void Dispose()
    {    
        DialogService.Dispose();
    }

    private async Task OpenOrder(object args)
    {
        reportViewModel = (ReportViewModel)args;
        await DialogService.OpenAsync<DialogCardPage>("",
            new Dictionary<string, object>() { { "Order", reportViewModel } },
            new DialogOptions() { Width = "1000px", Height = "685px", Resizable = true, Draggable = true, ShowClose = false, CloseDialogOnEsc = true });
    }

    void CellRender(DataGridCellRenderEventArgs<ReportViewModel> args)
    {
        args.Attributes.Add("style", $"background-color: {(args.Data.TotalSellPrice <= args.Data.TotalUnitCost ? "var(--rz-secondary)" : "var(--rz-base-background-color)")};");
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);
        if (firstRender)
        {
            if (DataLoading)
            {
                return;
            }
            try
            {
                DataLoading = true;
                _orders = await GetOrdersExportUseCase.ExecuteAsync(_vendorId, _status, _startDate, _endDate, _productCode, _customerId, user);

                filteredOrders = _orders.ToList();
                _vendors = await ViewAllVendorsUseCase.ExecuteAsync();
                _customers = await ViewAllCustomersUseCase.ExecuteAsync();
                _vendorsDto = Mapper.Map(_vendors, _vendorsDto);
                _customersDto = Mapper.Map(_customers, _customersDto);
                warehouses = await ViewAllWarehouseAddressUseCase.ExecuteAsync();
                warehouse = warehouses.Select(w => w.Name).ToList();

            }catch (Exception e)
            {
                _logger.LogError(e.Message);
                Console.WriteLine(e);
            }
            finally
            {
                DataLoading = false;
            }

            if (_vendorsDto != null) 
                vendorNames = _vendorsDto.Select(c => c.Name).ToList();

            await dataFilter.AddFilter(new CompositeFilterDescriptor()
            {
                Property = "ProductCode",
                FilterOperator = FilterOperator.Contains
            });
            await dataFilter.AddFilter(new CompositeFilterDescriptor()
            {
                Property = "CustomerName",
                FilterOperator = FilterOperator.Equals
            });
            await dataFilter.AddFilter(new CompositeFilterDescriptor()
            {
                Property = "Status",
                FilterOperator = FilterOperator.Equals
            });
            await dataFilter.AddFilter(new CompositeFilterDescriptor()
            {
                Property = "VendorName",
                FilterOperator = FilterOperator.Equals
            });
            
        }
    }
    
}

AgaveJoe 30,126 Reputation points

2024-01-25T18:13:14.98+00:00
I do not see where you followed the instructions or sample source code by adding.

await InvokeAsync(StateHasChanged);

Cenk 1,036

I added it in the SaveRowDetail but did not work.

async Task SaveRowDetail(ReportViewModel reportViewModel)
{
   
    if (reportViewModel != null)
    {
        orderDetail.Id = reportViewModel.OrderDetailId;
        orderDetail.Quantity = reportViewModel.Quantity;
        orderDetail.CostRatio = reportViewModel.CostRatio;
        orderDetail.Description = reportViewModel.Description;
        orderDetail.ProductCode = reportViewModel.ProductCode;
        orderDetail.ProductName = reportViewModel.ProductName;
        orderDetail.BuyUnitPrice = reportViewModel.BuyUnitPrice;
        orderDetail.ShippingNumber = reportViewModel.ShippingNumber;
        orderDetail.ShippingWeek = reportViewModel.ShippingWeek;
        orderDetail.Status = reportViewModel.OrderDetailStatus;
        orderDetail.TotalBuyPrice = reportViewModel.TotalBuyPrice;
        orderDetail.TotalSellPrice = reportViewModel.TotalSellPrice;
        orderDetail.SellUnitPrice = reportViewModel.SellUnitPrice;
        orderDetail.UnitCost = reportViewModel.UnitCost;
        orderDetail.TrackingNumber = reportViewModel.TrackingNumber;
        orderDetail.TotalUnitCost = reportViewModel.TotalUnitCost;
        orderDetail.Currency = reportViewModel.Currency;
        orderDetail.OrderId = reportViewModel.OrderId;
        orderDetail.VendorId = reportViewModel.VendorId;
        orderDetail.Warehouse = reportViewModel.Warehouse;
        orderDetail.PaymentStatus = reportViewModel.PaymentStatus;
        orderDetail.CustomerOrderNumber = reportViewModel.CustomerOrderNumber;
        orderDetail.CustomerStockCode = reportViewModel.CustomerStockCode;
        orderDetail.PoNotes = reportViewModel.PoNotes;

        if (user.IsInRole("Administrators"))
        {
            if (reportViewModel.OrderDetailStatus == "Completed")
            {
                orderDetail.CompletionDateTime = reportViewModel.CompletionDateTime;
                // reportViewModel.CompletionDateTime = DateTime.Now.Date;
                reportViewModel.Status = "Completed";
            }
            else
            {
                orderDetail.CompletionDateTime = null;
                reportViewModel.CompletionDateTime = null;
                reportViewModel.Status = "Continues";
            }
        }
       
    }
    
    
    await EditOrderDetailUseCase.ExecuteAsync(orderDetail);
    await _grid.UpdateRow(reportViewModel);
    _orders = await GetOrdersExportUseCase.ExecuteAsync(_vendorId, _status, _startDate, _endDate, _productCode, _customerId, user);
    
    await InvokeAsync(StateHasChanged);
}

Answer 2

Stephen Beck 0

Use the

RowRender

Event for Color change of the rows or the

OnLoadData

Event

RowRender="OnRowRender"

from the RadzenDataGrid and than the Event:

 void OnRowRender(RowRenderEventArgs<MyData> args)
    {
        // To work on this the Datagrid has to set AllowAlternatingRows = false
        if (args.Data.MyItem == true)
        {
            args.Attributes.Add("style", $"background-color: var(--rz-danger-lighter);");
        }
    }

Share via

How to change background color of a Radzen Data Grid row after updating

2 answers

Your answer