Radzen DataGrid possible bug when adding a new row
When adding a new row, I clicked the Add New Order button, edit template opens. If I click somewhere like Vendor filter, the Add New Order button stays disabled as in the screenshot and the edit template disappears.
And also after clicking Add New Order fill the necessary fields/clicking the SaveRow button, this newly added row doesn't appear on the data grid until I refresh the page. How can I make it appear without refreshing the page?
By the way, I am using SQL Server Express 2019.
Hope you can help me.
Here is the code:
@page "/orders"
@using IMS.CoreBusiness
@using IMS.Plugins.EFCore.Migrations
@using IMS.UseCases.Interfaces.Order
@using IMS.UseCases.Interfaces.OrderDetail
@using System.Globalization
@inject NavigationManager NavigationManager
@inject IViewAllOrdersUseCase ViewAllOrdersUseCase
@inject IAddOrderUseCase AddOrderUseCase
@inject IEditOrderUseCase EditOrderUseCase
@inject IAddOrderDetailUseCase AddOrderDetailUseCase
@inject IEditOrderDetailUseCase EditOrderDetailUseCase
<style>
#wrapper { overflow: auto; }
#c1 { float: right; }
#c2 { float: right; }
</style>
<h1>Orders</h1>
<RadzenButton Icon="add_circle_outline" style="margin-bottom: 10px" Text="Add New Order" Click="@InsertRow" Disabled="@(_orderToInsert != null)"/>
<RadzenDataGrid @ref="_grid" AllowFiltering="true" AllowPaging="true" PageSize="7" AllowSorting="true" RowClick="RowClick" ExpandMode="DataGridExpandMode.Single"
Data="@_orders" TItem="Order" EditMode="DataGridEditMode.Single" RowUpdate="@OnUpdateRow" RowCreate="@OnCreateRow" @bind-Value="@SelectedOrders"
ShowExpandColumn="true" ShowPagingSummary="true" AllowColumnResize="true">
<Template Context="order">
<RadzenCard Style="margin-bottom: 20px">
Vendor:
<b>@order?.VendorName</b>
</RadzenCard>
<RadzenTabs>
<Tabs>
<RadzenTabsItem Text="Order Details">
<div id="wrapper">
<RadzenButton Icon="add_circle_outline" style="margin-bottom: 10px" Text="Add Order Detail" Click="@(() => InsertDetailRow(order.Id))" Disabled="@(_detailToInsert != null)"/>
<RadzenButton Icon="save" style="margin-bottom: 10px;" Text="Save Details" id="c2" Click="@(args => SaveRowDetails(SelectedOrders.FirstOrDefault()?.OrderDetails))"/>
<RadzenButton Icon="border_color" style="margin-bottom: 10px; margin-right: 10px" Text="Edit Details" id="c1" Click="@(args => EditRowDetails(SelectedOrders.FirstOrDefault()?.OrderDetails))" @onclick:stopPropagation="true"/>
</div>
<RadzenDataGrid @ref="_gridDetail" AllowFiltering="true" AllowPaging="true" PageSize="5" AllowSorting="true" Data="@order.OrderDetails"
TItem="OrderDetail" EditMode="DataGridEditMode.Multiple" RowUpdate="@OnUpdateRowDetail" RowCreate="@OnCreateRowDetail" AllowColumnResize="true" AllowColumnPicking="true" ShowPagingSummary="true" ColumnWidth="150px">
<Columns>
<RadzenDataGridColumn TItem="OrderDetail" Property="Id" Title="Product Number"/>
<RadzenDataGridColumn TItem="OrderDetail" Property="ProductCode" Title="Code">
<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"/>
</EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="OrderDetail" Property="ProductName" Title="Name">
<EditTemplate Context="orderDetail">
<RadzenTextBox @bind-Value="orderDetail.ProductName" Style="width: 100%; display: block" Name="ProductName"/>
<RadzenRequiredValidator Text="Product Name is required" Component="ProductName" Popup="true" Style="position: absolute"/>
</EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="OrderDetail" Property="UnitCost" Title="Unit Cost">
<EditTemplate Context="orderDetail">
<RadzenNumeric TValue="double" Min="1" @bind-Value="orderDetail.UnitCost" Style="width: 100%; display: block" Name="UnitCost"/>
<RadzenRequiredValidator Text="Unit Cost is required" Component="UnitCost" Popup="true" Style="position: absolute"/>
</EditTemplate>
<Template Context="detail">
@string.Format(new CultureInfo("en-US"), "{0:C}", detail.UnitCost)
</Template>
<FooterTemplate>
<b>@string.Format(new CultureInfo("en-US"), "{0:C}", SelectedOrders?.FirstOrDefault()?.OrderDetails.Sum(o => o.UnitCost))</b>
</FooterTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="OrderDetail" Property="BuyQuantity" Title="Buy Qty">
<EditTemplate Context="orderDetail">
<RadzenNumeric TValue="int" Min="1" @bind-Value="orderDetail.BuyQuantity" Style="width: 100%; display: block" Name="BuyQuantity"/>
<RadzenRequiredValidator Text="Buy Quantity is required" Component="BuyQuantity" Popup="true" Style="position: absolute"/>
</EditTemplate>
<FooterTemplate>
<b>@string.Format(new CultureInfo("tr-TR"), "{0:G}", SelectedOrders?.FirstOrDefault()?.OrderDetails.Sum(o => o.BuyQuantity))</b>
</FooterTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="OrderDetail" Property="SellQuantity" Title="Sell Qty">
<EditTemplate Context="orderDetail">
<RadzenNumeric TValue="int" Min="1" @bind-Value="orderDetail.SellQuantity" Style="width: 100%; display: block" Name="SellQuantity"/>
<RadzenRequiredValidator Text="Sell Quantity is required" Component="SellQuantity" Popup="true" Style="position: absolute"/>
</EditTemplate>
<FooterTemplate>
<b>@string.Format(new CultureInfo("tr-TR"), "{0:G}", SelectedOrders?.FirstOrDefault()?.OrderDetails.Sum(o => o.SellQuantity))</b>
</FooterTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="OrderDetail" Property="TotalBuyPrice" Title="Total Buy">
<EditTemplate Context="orderDetail">
<RadzenNumeric TValue="double" Min="1" @bind-Value="orderDetail.TotalBuyPrice" Style="width: 100%; display: block" Name="TotalBuyPrice"/>
<RadzenRequiredValidator Text="Total Buy Price is required" Component="TotalBuyPrice" Popup="true" Style="position: absolute"/>
</EditTemplate>
<FooterTemplate>
<b>@string.Format(new CultureInfo("en-US"), "{0:C}", SelectedOrders?.FirstOrDefault()?.OrderDetails.Sum(o => o.TotalBuyPrice))</b>
</FooterTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="OrderDetail" Property="TotalSellPrice" Title="Total Sell">
<EditTemplate Context="orderDetail">
<RadzenNumeric TValue="double" Min="1" @bind-Value="orderDetail.TotalSellPrice" Style="width: 100%; display: block" Name="TotalSellPrice"/>
<RadzenRequiredValidator Text="Total Sell Price is required" Component="TotalSellPrice" Popup="true" Style="position: absolute"/>
</EditTemplate>
<FooterTemplate>
<b>@string.Format(new CultureInfo("en-US"), "{0:C}", SelectedOrders?.FirstOrDefault()?.OrderDetails.Sum(o => o.TotalSellPrice))</b>
</FooterTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="OrderDetail" Property="ShippingNumber" Title="Shipment">
<EditTemplate Context="orderDetail">
<RadzenTextBox @bind-Value="orderDetail.ShippingNumber" Style="width: 100%; display: block" Name="ShippingNumber"/>
<RadzenRequiredValidator Text="Shipping Number is required" Component="ShippingNumber" Popup="true" Style="position: absolute"/>
</EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="OrderDetail" Property="TrackingNumber" Title="Tracking Number">
<EditTemplate Context="orderDetail">
<RadzenTextBox @bind-Value="orderDetail.TrackingNumber" Style="width: 100%; display: block" Name="TrackingNumber"/>
<RadzenRequiredValidator Text="Tracking Number is required" Component="TrackingNumber" Popup="true" Style="position: absolute"/>
</EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="OrderDetail" Property="Description" Title="Description">
<EditTemplate Context="orderDetail">
<RadzenTextBox @bind-Value="orderDetail.Description" Style="width: 100%; display: block" Name="Description"/>
<RadzenRequiredValidator Text="Description is required" Component="Description" Popup="true" Style="position: absolute"/>
</EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="OrderDetail" Property="Status" Title="Status">
<EditTemplate Context="orderDetail">
@*<RadzenTextBox @bind-Value="orderDetail.Status" Style="width: 100%; display: block" Name="Status"/>*@
<RadzenDropDown AllowClear="true" TValue="string" Class="w-100" Data=@detailStatusList @bind-Value="orderDetail.Status" Name="Status"/>
<RadzenRequiredValidator Text="Status is required" Component="Status" Popup="true" Style="position: absolute"/>
</EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="OrderDetail" Property="OrderId" Title="Order Id" />
<RadzenDataGridColumn TItem="OrderDetail" Context="orderDetail" Filterable="false" Sortable="false" TextAlign="TextAlign.Center" Width="120px">
<Template Context="detail">
<RadzenButton Icon="edit" ButtonStyle="ButtonStyle.Primary" Class="m-1" Click="@(args => EditRowDetail(detail))" @onclick:stopPropagation="true">
</RadzenButton>
</Template>
<EditTemplate Context="detail">
<RadzenButton Icon="check" ButtonStyle="ButtonStyle.Primary" Class="m-1" Click="@(args => SaveRowDetail(detail))">
</RadzenButton>
<RadzenButton Icon="close" ButtonStyle="ButtonStyle.Light" Class="m-1" Click="@(args => CancelEditDetail(detail))">
</RadzenButton>
</EditTemplate>
</RadzenDataGridColumn>
</Columns>
</RadzenDataGrid>
</RadzenTabsItem>
</Tabs>
</RadzenTabs>
</Template>
<Columns>
<RadzenDataGridColumn TItem="Order" Property="Id" Title="Order ID" Width="120px"/>
<RadzenDataGridColumn TItem="Order" Property="CustomerName" Title="Customer" Width="200px">
<EditTemplate Context="order">
<RadzenTextBox @bind-Value="order.CustomerName" Style="width: 100%; display: block" Name="CustomerName"/>
<RadzenRequiredValidator Text="Customer Name is required" Component="CustomerName" Popup="true" Style="position: absolute"/>
</EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="Order" Property="VendorName" Title="Vendor" Width="200px">
<EditTemplate Context="order">
<RadzenTextBox @bind-Value="order.VendorName" Style="width: 100%; display: block" Name="VendorName"/>
<RadzenRequiredValidator Text="Vendor Name is required" Component="VendorName" Popup="true" Style="position: absolute"/>
</EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="Order" Property="OrderDateTime" Title="Order Date" Width="200px">
<Template Context="order">
@($"{order.OrderDateTime:dd/MM/yyyy}")
</Template>
<EditTemplate Context="order">
<RadzenDatePicker @bind-Value="order.OrderDateTime" DateFormat="dd/MM/yyyy HH:mm" Class="w-100"/>
</EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="Order" Property="Status" Title="Status" Width="100px">
<EditTemplate Context="order">
@*<RadzenTextBox @bind-Value="order.Status" Style="width: 100%; display: block" Name="Status"/>*@
<RadzenDropDown AllowClear="true" TValue="string" Class="w-150" Data=@orderStatusList Name="Status" @bind-Value="order.Status"/>
<RadzenRequiredValidator Text="Status is required" Component="Status" Popup="true" Style="position: absolute"/>
</EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="Order" Property="DoneBy" Title="Employee">
<EditTemplate Context="order">
<RadzenTextBox @bind-Value="order.DoneBy" Style="width: 100%; display: block" Name="DoneBy"/>
<RadzenRequiredValidator Text="DoneBy is required" Component="DoneBy" Popup="true" Style="position: absolute"/>
</EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="Order" Context="order" Filterable="false" Sortable="false" TextAlign="TextAlign.Center" Width="120px">
<Template Context="order">
<RadzenButton Icon="edit" ButtonStyle="ButtonStyle.Primary" Class="m-1" Click="@(args => EditRow(order))" @onclick:stopPropagation="true">
</RadzenButton>
</Template>
<EditTemplate Context="order">
<RadzenButton Icon="check" ButtonStyle="ButtonStyle.Primary" Class="m-1" Click="@(args => SaveRow(order))">
</RadzenButton>
<RadzenButton Icon="close" ButtonStyle="ButtonStyle.Light" Class="m-1" Click="@(args => CancelEdit(order))">
</RadzenButton>
</EditTemplate>
</RadzenDataGridColumn>
</Columns>
</RadzenDataGrid>
@code {
// Options to display in the roles dropdown when editing a user
readonly List<string> detailStatusList = new() { "Getting ready", "Being supplied", "Shipped", "At customs", "In warehouse", "Sent to customer" };
readonly List<string> orderStatusList = new() { "Completed", "Cancelled", "Continues"};
IList<Order?> SelectedOrders { get; set; }
//IList<OrderDetail> _selectedDetails;
//Order order { get; set; }
IEnumerable<Order?> _orders = new List<Order?>();
RadzenDataGrid<Order?> _grid;
RadzenDataGrid<OrderDetail> _gridDetail;
Order? _orderToInsert;
OrderDetail? _detailToInsert;
protected override async Task OnInitializedAsync()
{
_orders = await ViewAllOrdersUseCase.ExecuteAsync();
SelectedOrders = new List<Order?> { _orders.FirstOrDefault() };
}
private async Task RowClick(DataGridRowMouseEventArgs<Order> mouseClick) {
//order.Id = mouseClick.Data.Id;
await _grid!.ExpandRow(mouseClick.Data);
}
//void RowRender(RowRenderEventArgs<Order> args)
//{
// if (args.Data.OrderDetails != null)
// args.Expandable = args.Data.OrderDetails.Count > 0;
// else
// {
// args.Data.OrderDetails = new List<OrderDetail>();
// }
//}
//protected override void OnAfterRender(bool firstRender)
//{
// if (firstRender)
// {
// _grid.ExpandRow(_orders.FirstOrDefault());
// StateHasChanged();
// }
// base.OnAfterRender(firstRender);
//}
private async Task InsertRow()
{
_orderToInsert = new Order
{
OrderDateTime = DateTime.Now,
OrderDetails = new List<OrderDetail>()
};
await _grid.InsertRow(_orderToInsert);
}
private async Task InsertDetailRow(int id)
{
_detailToInsert = new OrderDetail
{
OrderId = id
};
await _gridDetail.InsertRow(_detailToInsert);
}
private async Task OnCreateRow(Order? order)
{
if (order != null)
{
await AddOrderUseCase.ExecuteAsync(order);
}
}
private async Task OnCreateRowDetail(OrderDetail? orderDetail)
{
if (orderDetail != null)
{
await AddOrderDetailUseCase.ExecuteAsync(orderDetail);
}
}
private async Task OnUpdateRow(Order order)
{
if (order == _orderToInsert)
{
_orderToInsert = null;
}
if (order != null)
{
await EditOrderUseCase.ExecuteAsync(order);
}
}
private async Task OnUpdateRowDetail(OrderDetail orderDetail)
{
if (orderDetail == _detailToInsert)
{
_detailToInsert = null;
}
if (orderDetail != null)
{
await EditOrderDetailUseCase.ExecuteAsync(orderDetail);
}
}
private void CancelEdit(Order? order)
{
if (order == _orderToInsert)
{
_orderToInsert = null;
}
_grid.CancelEditRow(order);
}
private void CancelEditDetail(OrderDetail orderDetail)
{
if (orderDetail == _detailToInsert)
{
_detailToInsert = null;
}
_gridDetail.CancelEditRow(orderDetail);
}
async Task EditRow(Order? order)
{
await _grid.EditRow(order);
}
async Task EditRowDetail(OrderDetail orderDetail)
{
await _gridDetail.EditRow(orderDetail);
}
async Task EditRowDetails(IList<OrderDetail?> SelectedOrders)
{
foreach (var detail in SelectedOrders)
{
await _gridDetail.EditRow(detail);
}
}
async Task SaveRow(Order? order)
{
if (order == _orderToInsert)
{
_orderToInsert = null;
}
await _grid.UpdateRow(order);
}
async Task SaveRowDetail(OrderDetail orderDetail)
{
if (orderDetail == _detailToInsert)
{
_detailToInsert = null;
}
await _gridDetail.UpdateRow(orderDetail);
}
async Task SaveRowDetails(IList<OrderDetail?> SelectedOrders)
{
foreach (var detail in SelectedOrders)
{
if (detail == _detailToInsert)
{
_detailToInsert = null;
}
await _gridDetail.UpdateRow(detail);
}
}
}
Edit:
Adding this to SaveRow did the trick, someone may need it.
_orders = await ViewAllOrdersUseCase.ExecuteAsync(user);
StateHasChanged();
Solution
On the first question, your button is controlled in the top level component by whether _orderToInsert is null. The click event inside the data grid is restricted to the data grid. What sets _orderToInsert to null and tells the RadzenButton to re-render? I'm unfamiliar with Radzen, so I don't know if there's and event raised that you can hook into (on a quick peek it looks like the only suitable event is LoadData).
On the second question, you populate _orders in OnInitializedAsyc. Your save routines call back into the service to add the record, but you don't refresh _orders. Your save routines need to refresh the displayed list once they have completed.
- Replace a dropdownlist by a combobox (editable dropdown)
- How to fix 500.30 - ASP.NET CORE app failed to start
- How can I programmatically determine the Blazor render mode
- How do I integration test a SoapCore endpoint?
- How to add an environment indicator into a razor page?
- Implement dotnet core Identity Provider server for Google
- ASP.Net Core API failing when I try to return results from Active Directory search and some values are empty
- View is not found when a Web App is deployed with Azure DevOps
- Set Log Levels for Microsoft.* , System, and AspNet when using Serilog
- tsconfig.json: Build:No inputs were found in config file
- Docker: No frameworks and runtimes were found (.NET 8)
- Logging in ASP.NET Core Main
- System.Net.Http vs Microsoft.Net.Http
- Get caller info for injected service in .NET Core
- LINQ Query Translation Error with Array of Search Queries in EF Core
- Cannot export file on .NET Core application
- Using ASP.Net Core Identity for Razor page web app and MAUI app
- Store does not implement IUserRoleStore<TUser> ASP.NET Core Identity
- Applying EF Core Global Filter to a collection of tenants instead of a single TenantId
- Usehealthchecks vs Maphealthchecks
- How to resolve "TypeError: Failed to fetch" error on Blazor?
- @Html.Action in Asp.Net Core
- Why does ASP.NET Core 9 strip out importmap?
- Exclude specific endpoint serilog logging using aspnet core
- Why use AddScoped() instead of AddSingleton()?
- Blazor requesting a json file
- ASP.NET Core clear cache from IMemoryCache (set by Set method of CacheExtensions class)
- EF Core multitenacy, different schema. EF Core does not change the table schema when the API is at runtime
- NLOG Database Target can't connect
- Entity Framework Core: `SqlNullValueException: Data is Null.` How to troubleshoot?