I am new to Blazor Server Application. I am working on a simple order management system. I am using Radzen Blazor components. I have this master-detail blazor page where I want to edit selected orders' details. I checked the component documentation but I failed. How can I update multiple order details at once? I think of making order details to edit mode by clicking a button and updating all the related order details with another button, but I couldn't find how to do it.
Here is my Blazor:
@page "/orders"
@using IMS.CoreBusiness
@using IMS.Plugins.EFCore.Migrations
@using IMS.UseCases.Interfaces.Order
@using IMS.UseCases.Interfaces.OrderDetail
@inject NavigationManager NavigationManager
@inject IViewAllOrdersUseCase ViewAllOrdersUseCase
@inject IAddOrderUseCase AddOrderUseCase
@inject IEditOrderUseCase EditOrderUseCase
@inject IAddOrderDetailUseCase AddOrderDetailUseCase
@inject IEditOrderDetailUseCase EditOrderDetailUseCase
<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="5" AllowSorting="true" RowRender="@RowRender" ExpandMode="DataGridExpandMode.Single"
Data="@_orders" TItem="Order" EditMode="DataGridEditMode.Single" RowUpdate="@OnUpdateRow" RowCreate="@OnCreateRow" @bind-Value="@SelectedOrders"
ShowExpandColumn="true" >
<Template Context="order">
<RadzenCard Style="margin-bottom:20px">
Vendor:
<b>@order.VendorName</b>
</RadzenCard>
<RadzenTabs>
<Tabs>
<RadzenTabsItem Text="Order Details">
<RadzenButton Icon="add_circle_outline" style="margin-bottom: 10px" Text="Add Order Detail" Click="@InsertDetailRow" Disabled=@(_detailToInsert != null) />
<RadzenDataGrid @ref="_gridDetail" AllowFiltering="true" AllowPaging="true" PageSize="5" AllowSorting="true" Data="@(SelectedOrders.FirstOrDefault()?.OrderDetails)"
TItem="OrderDetail" EditMode="DataGridEditMode.Multiple" RowUpdate="@OnUpdateRowDetail" RowCreate="@OnCreateRowDetail" >
<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">
<Template Context="detail">
@String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}",detail.UnitCost)
</Template>
@*<EditTemplate Context="orderDetail">
<RadzenNumeric ShowUpDown="false" TValue="double?" @bind-Value="orderDetail.UnitCost" Class="w-100" />
@*<RadzenTextBox @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>*@
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="OrderDetail" Property="BuyQuantity" Title="Buy Qty" />
<RadzenDataGridColumn TItem="OrderDetail" Property="SellQuantity" Title="Sell Qty" />
<RadzenDataGridColumn TItem="OrderDetail" Property="ShippingNumber" Title="Shipment"/>
<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="OrderDateTime" Title="Order Date" Width="200px">
<Template Context="order">
@String.Format("{0:dd/MM/yyyy}", order.OrderDateTime)
</Template>
<EditTemplate Context="order">
<RadzenDatePicker @bind-Value="order.OrderDateTime" DateFormat="dd/MM/yyyy HH:mm" Class="w-100" />
@*<RadzenDatePicker @bind-Value="order.OrderDateTime" Style="width:100%" DateFormat="d" />*@
</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" />
<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>
@*<RadzenDataGridColumn TItem="Order" Context="order" Filterable="false" Sortable="false" TextAlign="TextAlign.Center" Width="60px">
<Template Context="order">
<RadzenButton ButtonStyle="ButtonStyle.Danger" Icon="delete" Size="ButtonSize.Small" Class="m-1" Click="@(args => DeleteRow(order))" @onclick:stopPropagation="true">
</RadzenButton>
</Template>
<EditTemplate Context="order">
<RadzenButton ButtonStyle="ButtonStyle.Danger" Icon="delete" Size="ButtonSize.Small" Class="m-1" Click="@(args => DeleteRow(order))">
</RadzenButton>
</EditTemplate>
</RadzenDataGridColumn>*@
</Columns>
</RadzenDataGrid>
@code {
IList<Order?> SelectedOrders { get; set; }
IList<OrderDetail> _selectedDetails;
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() };
}
void RowRender(RowRenderEventArgs<Order> args)
{
if(args.Data.OrderDetails != null)
args.Expandable = args.Data.OrderDetails.Count > 0;
}
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
_grid.ExpandRow(_orders.FirstOrDefault());
StateHasChanged();
}
base.OnAfterRender(firstRender);
}
private async Task InsertRow()
{
_orderToInsert = new Order();
await _grid.InsertRow(_orderToInsert);
}
private async Task InsertDetailRow()
{
_detailToInsert = new OrderDetail();
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 DeleteRow(Order? order)
{
if (order == _orderToInsert)
{
_orderToInsert = null;
}
if (_orders.Contains(order))
{
await _grid.Reload();
}
else
{
_grid.CancelEditRow(order);
}
}
async Task DeleteRowDetail(OrderDetail orderDetail)
{
if (orderDetail == _detailToInsert)
{
_detailToInsert = null;
}
if (_orders.All(x=>x != null && x.OrderDetails.Contains(orderDetail)))
{
await _gridDetail.Reload();
}
else
{
_gridDetail.CancelEditRow(orderDetail);
}
}
async Task EditRow(Order? order)
{
await _grid.EditRow(order);
}
async Task EditRowDetail(OrderDetail orderDetail)
{
await _gridDetail.EditRow(orderDetail);
}
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);
}
}
