Hi there,
I am working on a Blazor Server App project. I want to implement a master-detail blazor page having multiple inline edits something similar to the example below?
master detail sample
I checked some open-source third-party components which are available for free like MudBlazor but unfortunately, there is no master detail component. The closest component is the MudTable which has an inline edit mode.
Does your Radzen Blazor DataGrid (master detail hierarcy) have an inline multiple edit feature?
I would appreciate your help, thanks in advance.
Hi @Cenk_KIZILDAG,
Yes, you can have multiple items in edit mode - you need to set the EditMode property to Multiple:
<RadzenDataGrid EditMode="DataGridEditMode.Multiple">
1 Like
Thank you for your quick reply @korchev, do you have any samples on the page that I can start to use?
Yes, you can start from this example: Blazor DataGrid InLine Editing (it uses single edit mode though).
1 Like
One more question 
, can I use Razden and default Blazor components in the same project? I mean, Radzen DataGrid for page A and default Blazor components for the rest?
Since I use hierarchy, I should add EditMode property to Multiple to this right?
<RadzenDataGrid AllowFiltering="true" AllowPaging="true" AllowSorting="true" Data="@order.OrderDetails" TItem="OrderDetail" **EditMode="DataGridEditMode.Multiple"**>
<Columns>
<RadzenDataGridColumn TItem="OrderDetail" Property="Order.CustomerID" Title="Order" />
<RadzenDataGridColumn TItem="OrderDetail" Property="Product.ProductName" Title="Product" />
<RadzenDataGridColumn TItem="OrderDetail" Property="UnitPrice" Title="Unit Price">
<Template Context="detail">
@String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", detail.UnitPrice)
</Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="OrderDetail" Property="Quantity" Title="Quantity" />
<RadzenDataGridColumn TItem="OrderDetail" Property="Discount" Title="Discount">
<Template Context="detail">
@String.Format("{0}%", detail.Discount * 100)
</Template>
</RadzenDataGridColumn>
</Columns>
</RadzenDataGrid>
Yes you can!
Yes. This will allow more than one record to be in edit mode at the same time.
I appreciate your effort and quick responses. Thank you so much.
@korchev I forgot to ask about one of the most important features which is adding a new row Is it possible to add a new row to the master-detail hierarchy?
The demo I've linked before shows how to add new items.
Hi @korchev,
I think I am a little bit lost while implementing the master-detail page. I want to add both new order and order details when the user clicks the Add New Order button. The user can edit only orders or order details (more than one row can be edited for details) or both. Would you please guide me to make this work?
Here is what I did so far:
@page "/orders"
@using IMS.CoreBusiness
@using IMS.UseCases.Interfaces.Order
@inject NavigationManager NavigationManager
@inject IViewOrdersByCustomerNameUseCase ViewOrdersByCustomerNameUseCase
@inject IAddOrderUseCase AddOrderUseCase
@inject IEditOrderUseCase EditOrderUseCase
<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.Multiple"
Data="@_orders" TItem="Order" EditMode="DataGridEditMode.Multiple" RowUpdate="@OnUpdateRow" RowCreate="@OnCreateRow">
<Template Context="order">
<RadzenCard Style="margin-bottom:20px">
Company:
<b>@order.VendorName</b>
</RadzenCard>
<RadzenTabs>
<Tabs>
<RadzenTabsItem Text="Order Details">
<RadzenDataGrid AllowFiltering="true" AllowPaging="true" AllowSorting="true" Data="@order.OrderDetails" TItem="OrderDetail">
<Columns>
<RadzenDataGridColumn TItem="OrderDetail" Property="ID" Title="Product Number" />
<RadzenDataGridColumn TItem="OrderDetail" Property="ProductCode" Title="Code" />
<RadzenDataGridColumn TItem="OrderDetail" Property="ProductName" Title="Name">
<Template Context="detail">
@String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", detail.UnitCost)
</Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="OrderDetail" Property="BuyQuantity" Title="Buy Qty" />
<RadzenDataGridColumn TItem="OrderDetail" Property="SellQuantity" Title="Sell Qty" />
<RadzenDataGridColumn TItem="OrderDetail" Property="ShippingNumber" Title="Shipment"/>
</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" />
<RadzenDataGridColumn TItem="Order" Property="OrderDateTime" Title="Order Date" Width="200px">
<Template Context="order">
@String.Format("{0:d}", order.OrderDateTime)
</Template>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="Order" Property="Status" Title="Status" Width="100px" />
<RadzenDataGridColumn TItem="Order" Property="DoneBy" Title="Employee" />
<RadzenDataGridColumn TItem="Order" Context="sampleBlazorModelsSampleOrder" Filterable="false" Sortable="false" TextAlign="TextAlign.Center" Width="120px">
<Template Context="order">
<RadzenButton Icon="edit" ButtonStyle="ButtonStyle.Light" 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 {
IEnumerable<Order> _orders = new List<Order>();
RadzenDataGrid<Order> grid;
protected override async Task OnInitializedAsync()
{
_orders = await ViewOrdersByCustomerNameUseCase.ExecuteAsync();
}
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);
}
Order orderToInsert;
private async Task InsertRow()
{
orderToInsert = new Order();
await grid.InsertRow(orderToInsert);
}
private async Task OnCreateRow(Order order)
{
if (order != null)
{
await AddOrderUseCase.ExecuteAsync(order);
}
}
private async Task OnUpdateRow(Order order)
{
if (order == orderToInsert)
{
orderToInsert = null;
}
if (order != null)
{
await EditOrderUseCase.ExecuteAsync(order);
}
}
private void CancelEdit(Order order)
{
if (order == orderToInsert)
{
orderToInsert = null;
}
grid.CancelEditRow(order);
}
async Task DeleteRow(Order order)
{
if (order == orderToInsert)
{
orderToInsert = null;
}
if (_orders.Contains(order))
{
await grid.Reload();
}
else
{
grid.CancelEditRow(order);
}
}
async Task EditRow(Order order)
{
await grid.EditRow(order);
}
async Task SaveRow(Order order)
{
if (order == orderToInsert)
{
orderToInsert = null;
}
await grid.UpdateRow(order);
}
}
Does Radzen data grid inside Tabs doesn't have add, edit features? If so is there a way to use nested data grids as master detail?
Editing is enabled per DataGrid basis. The one defined in the template is separate from the parent.
