I am using the Radzen Blazor DataGrid component in my Blazor Server Application. There are two data grids nested (master-detail) for orders and details. When I click an order, order details expand. I click the add order detail button and add a new detail to this order. After adding data and clicking SaveRowDetail, expanded order details are collapsed.
How can I prevent collapsing the order details after adding a new row in details?
Here is the simplified code:
@page "/orderlist"
<PageTitle>Order List</PageTitle>
<h1>Orders</h1>
<RadzenDataGrid @ref="_grid" AllowFiltering="true" AllowPaging="true" PageSize="20" AllowSorting="false" RowClick="RowClick" ExpandMode="DataGridExpandMode.Single"
Data="@_ordersDto" TItem="OrderDto" EditMode="DataGridEditMode.Single" RowUpdate="@OnUpdateRow" RowCreate="@OnCreateRow" @bind-Value="@SelectedOrders"
ShowExpandColumn="false" ShowPagingSummary="true" AllowColumnResize="true" >
<Template Context="order">
<RadzenCard Style="margin-bottom: 20px">
Customer:
<b>@order?.Customer?.Name</b>
</RadzenCard>
<RadzenTabs>
<Tabs>
<RadzenTabsItem Text="Order Details">
<div id="wrapper">
<RadzenButton class="rz-background-color-success-light" Icon="add_circle_outline" style="margin-bottom: 10px" Text="Add Order Detail" Click="@(() => InsertDetailRow(order.Id))" Disabled="@(_detailToInsert != null)" Size="ButtonSize.Small"/>
</div>
<RadzenDataGrid @ref="_gridDetail" AllowFiltering="@(_detailToInsert == null)" AllowPaging="true" PageSize="5" AllowSorting="@(_detailToInsert == null)" Data="@order.OrderDetailsDto"
TItem="OrderDetailDto" EditMode="DataGridEditMode.Multiple" RowUpdate="@OnUpdateRowDetail" RowCreate="@OnCreateRowDetail" AllowColumnResize="true"
AllowColumnPicking="true" ShowPagingSummary="true" ColumnWidth="150px" Density="Density.Compact" >
<Columns>
<RadzenDataGridColumn TItem="OrderDetailDto" Property="Id" Title="Product ID" Frozen="true" OrderIndex="1"/>
<RadzenDataGridColumn TItem="OrderDetailDto" Property="ProductCode" Title="Product Code" OrderIndex="2"/>
<RadzenDataGridColumn TItem="OrderDetailDto" Property="VendorDto.Name" Title="Vendor" Width="200px" OrderIndex="4"/>
<RadzenDataGridColumn TItem="OrderDetailDto" Property="Warehouse" Title="Warehouse" OrderIndex="5"/>
<RadzenDataGridColumn TItem="OrderDetailDto" Property="Currency" Title="Currency" OrderIndex="6"/>
<RadzenDataGridColumn TItem="OrderDetailDto" Property="OrderId" Title="Order Id" OrderIndex="22"/>
<RadzenDataGridColumn TItem="OrderDetailDto" Property="PoNotes" Title="PO Notes" OrderIndex="23"/>
<RadzenDataGridColumn TItem="OrderDetailDto" Context="orderDetail" Filterable="false" Sortable="false" TextAlign="TextAlign.Center" Width="200px" OrderIndex="24">
<Template Context="detail">
<RadzenButton Icon="edit" ButtonStyle="ButtonStyle.Primary" Class="m-1" Click="@(args => EditRowDetail(detail))" @onclick:stopPropagation="true" Size="ButtonSize.Small">
</RadzenButton>
</Template>
<EditTemplate Context="detail">
<RadzenButton Icon="check" ButtonStyle="ButtonStyle.Primary" Class="m-1" Click="@(args => SaveRowDetail(detail))" @onclick:stopPropagation="true" Size="ButtonSize.Small">
</RadzenButton>
<RadzenButton Icon="close" ButtonStyle="ButtonStyle.Light" Class="m-1" Click="@(args => CancelEditDetail(detail))" Size="ButtonSize.Small">
</RadzenButton>
<RadzenButton Icon="delete" ButtonStyle="ButtonStyle.Danger" Class="m-1" Click="@(args => ShowInlineDialog(detail))" Size="ButtonSize.Small">
</RadzenButton>
</EditTemplate>
</RadzenDataGridColumn>
</Columns>
</RadzenDataGrid>
</RadzenTabsItem>
</Tabs>
</RadzenTabs>
</Template>
<Columns>
<RadzenDataGridColumn TItem="OrderDto" Property="Id" Title="Order ID" Width="120px"/>
<RadzenDataGridColumn TItem="OrderDto" Property="Customer.Name" Title="Customer" Width="200px" Filterable="false"/>
<RadzenDataGridColumn TItem="OrderDto" Property="OrderDateTime" Title="Order Date" Width="200px" Filterable="false"/>
<RadzenDataGridColumn TItem="OrderDto" Property="Status" Title="Status" Width="100px"/>
<RadzenDataGridColumn TItem="OrderDto" Context="order" Filterable="false" Sortable="false" TextAlign="TextAlign.Center" Width="120px">
<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="order">
<RadzenButton Icon="check" ButtonStyle="ButtonStyle.Primary" Class="m-1" Click="@(args => SaveRow(order))" @onclick:stopPropagation="true" Size="ButtonSize.Small">
</RadzenButton>
<RadzenButton Icon="close" ButtonStyle="ButtonStyle.Light" Class="m-1" Click="@(args => CancelEdit(order))" Size="ButtonSize.Small">
</RadzenButton>
<RadzenButton Icon="delete" ButtonStyle="ButtonStyle.Danger" Class="m-1" Click="@(args => ShowInlineDialogOrder(order))" Size="ButtonSize.Small">
</RadzenButton>
</EditTemplate>
</RadzenDataGridColumn>
</Columns>
</RadzenDataGrid>
@code {
[Parameter]
public string? SelectedStatus { get; set; }
List<string> warehouse = new();
IEnumerable<WarehouseAddress?> warehouses;
IList<OrderDto?> SelectedOrders { get; set; }
IEnumerable<Order?> _orders = new List<Order?>();
IQueryable<OrderDto?> _ordersDto;
IQueryable<Order?> _order;
IEnumerable<Vendor?> _vendors;
IEnumerable<VendorDto?> _vendorsDto;
IEnumerable<Customer?> _customers;
IEnumerable<CustomerDto?> _customersDto;
RadzenDataGrid<OrderDto?> _grid;
RadzenDataGrid<OrderDetailDto> _gridDetail;
OrderDetail orderDetailMap;
ClaimsPrincipal user;
private bool DataLoading = false;
protected override async Task OnInitializedAsync()
{
_logger.LogInformation("************ Orders Preparing... ************");
user = (await _authenticationStateProvider.GetAuthenticationStateAsync()).User;
if (!user.Identity.IsAuthenticated)
{
NavigationManager.NavigateTo("/Identity/Account/Login", false);
}
if (DataLoading)
{
return;
}
try
{
DataLoading = true;
await UpdateOrdersIsCompletedUseCase.ExecuteAsync();
_vendors = await ViewAllVendorsUseCase.ExecuteAsync();
_customers = await ViewAllCustomersUseCase.ExecuteAsync();
_order = ViewOrdersUseCase.Execute(user);
_ordersDto = Mapper.ProjectTo<OrderDto>(_order);
_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;
}
SelectedOrders = new List<OrderDto?> { _ordersDto.FirstOrDefault() };
SelectedStatus = "";
}
private async Task RowClick(DataGridRowMouseEventArgs<OrderDto> mouseClick)
{
await _grid!.ExpandRow(mouseClick.Data);
SelectedOrders = _ordersDto.Where(o => o.Id == mouseClick.Data.Id).ToList();
if (SelectedOrders.Count > 0)
{
if (SelectedOrders[0].Status == "Completed" || SelectedOrders[0].Status == "Cancelled")
{
_detailToInsert = new OrderDetailDto();
}
else
{
_detailToInsert = null;
}
}
}
private async Task InsertDetailRow(int id)
{
_detailToInsert = new OrderDetailDto
{
OrderId = id,
Status = "Order Opened"
};
await _gridDetail.InsertRow(_detailToInsert);
}
private async Task OnCreateRowDetail(OrderDetailDto? orderDetail)
{
if (orderDetail != null)
{
orderDetailMap = new OrderDetail();
Mapper.Map(orderDetail, orderDetailMap);
var addedOrderDetail = await AddOrderDetailUseCase.ExecuteAsync(orderDetailMap);
await _gridDetail.Reload();
await _grid.Reload();
}
}
}
Orders:
Details:
I also tried to expand the row again in OnCreateRowDetail but it did not help.