Question Blazor server app - master-detail having multiple rows update

raysefo

Well-known member
Joined
Feb 22, 2019
Messages
361
Programming Experience
10+
I am trying to implement a simple order management app with Asp.net Core Blazor Server. I am using SQL Server. The main entities are order, order detail, vendor, and customer. I have implemented listing, adding, and updating for vendors and customers.

The tricky part is building a master-detail page for listing, adding, and updating the order/order details. Searching for free Blazor libraries which include master-detail grids having update, and insert features. I couldn't find a solution that would meet the requirements. Hope you can help me.

Something like this in Blazor can solve my problems; Master Details Demo using the Grid and PopupForm - Awesome ASP.net Core and MVC Controls demos

Thanks.
 
The link you provided allows update and inserts, albeit one row at a time. Assuming that library is open source, you could potentially modify it to support multiple rows.
 
I end up using Radzen but still need help on multiple edits in the order details.

here is the Blazor:
order and details:
@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" ShowPagingSummary="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" 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">
                                    <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>*@
                                    <FooterTemplate>
                                        <b>@String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", SelectedOrders.FirstOrDefault()?.OrderDetails.Sum(o => o.UnitCost))</b>
                                    </FooterTemplate>
                                </RadzenDataGridColumn>
                                <RadzenDataGridColumn TItem="OrderDetail" Property="BuyQuantity" Title="Buy Qty">
                                    <FooterTemplate>
                                        <b>@String.Format(new System.Globalization.CultureInfo("tr-TR"), "{0:G}", SelectedOrders.FirstOrDefault()?.OrderDetails.Sum(o => o.BuyQuantity))</b>
                                    </FooterTemplate>
                                </RadzenDataGridColumn>
                                <RadzenDataGridColumn TItem="OrderDetail" Property="SellQuantity" Title="Sell Qty">
                                    <FooterTemplate>
                                        <b>@String.Format(new System.Globalization.CultureInfo("tr-TR"), "{0:G}", SelectedOrders.FirstOrDefault()?.OrderDetails.Sum(o => o.SellQuantity))</b>
                                    </FooterTemplate>
                                </RadzenDataGridColumn>
                                <RadzenDataGridColumn TItem="OrderDetail" Property="TotalBuyPrice" Title="Total Buy">
                                    <FooterTemplate>
                                        <b>@String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", SelectedOrders.FirstOrDefault()?.OrderDetails.Sum(o => o.TotalBuyPrice))</b>
                                    </FooterTemplate>
                                </RadzenDataGridColumn>
                                <RadzenDataGridColumn TItem="OrderDetail" Property="TotalSellPrice" Title="Total Sell">
                                    <FooterTemplate>
                                        <b>@String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", SelectedOrders.FirstOrDefault()?.OrderDetails.Sum(o => o.TotalSellPrice))</b>
                                    </FooterTemplate>
                                </RadzenDataGridColumn>
                                <RadzenDataGridColumn TItem="OrderDetail" Property="ShippingNumber" Title="Shipment"/>
                                <RadzenDataGridColumn TItem="OrderDetail" Property="TrackingNumber" Title="Tracking Number"/>
                                <RadzenDataGridColumn TItem="OrderDetail" Property="Description" Title="Description"/>
                                <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);
    }
    

}
 
You might likely get better help from a forum that specifically supports that library.

On the surface, though, it looks like you can do inline edits:

A master detail view is normally just implemented with the detail view being a data grid, so it's not really clear what the issue seems to be.
 
Back
Top Bottom