DataGrid Inline Editing Losing Focus

Radzen.Blazor Components
1

Hi,

In my application, I am using 2 data grids in one another like master-detail. In detail, I am using inline editing like in your DataGrid InLine Editing.

If I click to edit a row let's say on the third page, edited data is saved but it loses focus on the third page and gets back to the first page. I tried many things but couldn't find a way to keep the focus on the page where the data is edited. Or it is even perfect if I somehow keep the detail expanded.

Here is the sample screenshot that I am facing:
Datagrid screenshot

Here is the simplified code:

<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">

<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="ProductCode" Title="Product  Code" OrderIndex="2">
    <EditTemplate Context="orderDetail">
        <RadzenTextBox @bind-Value="orderDetail.ProductCode" Style="width: 100%; display: block" Name="ProductCode" />        
    </EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="OrderDetailDto" Property="Quantity" Title="Quantity" OrderIndex="7">
    <EditTemplate Context="orderDetail">
        <RadzenNumeric TValue="int" Min="1" @bind-Value="orderDetail.Quantity" Style="width: 100%; display: block" Name="Quantity"/>        
    </EditTemplate>    
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="OrderDetailDto" Property="CostRatio" Title="Cost Ratio" OrderIndex="10">
    <EditTemplate Context="orderDetail">
        <RadzenNumeric TValue="double" Min="0" @bind-Value="orderDetail.CostRatio" Style="width: 100%; display: block" Name="CostRatio"/>
    </EditTemplate>
</RadzenDataGridColumn>
<RadzenDataGridColumn TItem="OrderDetailDto" Property="PoNotes" Title="PO Notes" OrderIndex="23">
    <EditTemplate Context="orderDetail">
        <RadzenTextBox @bind-Value="orderDetail.PoNotes" Style="width: 100%; display: block" Name="PoNotes"/>
    </EditTemplate>
</RadzenDataGridColumn>
<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>        
    </EditTemplate>
</RadzenDataGridColumn>
</Columns>
</RadzenDataGrid>
</RadzenTabsItem>

</Tabs>
</RadzenTabs>
</Template>
<Columns>
    
    <RadzenDataGridColumn TItem="OrderDto" Property="Status" Title="Status" Width="100px">

    </RadzenDataGridColumn>
    <RadzenDataGridColumn TItem="OrderDto" 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" Size="ButtonSize.Small">
            </RadzenButton>               
        </Template>        
    </RadzenDataGridColumn>

</Columns>
</RadzenDataGrid>

@code {
   

    IList<OrderDto?> SelectedOrders { get; set; }
    IQueryable<OrderDto?> _ordersDto;
    IQueryable<Order?> _order;   

    RadzenDataGrid<OrderDto?> _grid;
    RadzenDataGrid<OrderDetailDto> _gridDetail;

    OrderDto? _orderToInsert;
    OrderDetailDto? _detailToInsert;
    OrderDto orders;
    Order orderMap;
    OrderDetail orderDetailMap;
    
       
   
    protected override async Task OnInitializedAsync()
    {
        
        _order = ViewOrdersUseCase.Execute(user);
        _ordersDto = Mapper.ProjectTo<OrderDto>(_order);
           
        SelectedOrders = new List<OrderDto?> { _ordersDto.FirstOrDefault() };
        
    }
    
    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 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();

        }
    }    

    private async Task OnUpdateRowDetail(OrderDetailDto orderDetail)
    {
        if (orderDetail == _detailToInsert)
        {
            _detailToInsert = null;
        }
        if (orderDetail != null)
        {
            orderDetailMap = new OrderDetail();
            Mapper.Map(orderDetail, orderDetailMap);
			//Updates in DB
            var updatedOrderDetail = await EditOrderDetailUseCase.ExecuteAsync(orderDetailMap);
            
            _orders = await ViewAllOrdersUseCase.ExecuteAsync(user);
            _ordersDto = Mapper.ProjectTo<OrderDto>(_order);
            
            await _gridDetail.Reload();
            await _grid.Reload();
            
           
        }
    }    

    async Task EditRowDetail(OrderDetailDto orderDetail)
    {
        await _gridDetail.EditRow(orderDetail);
    }     

    async Task SaveRowDetail(OrderDetailDto orderDetail)
    {
        await _gridDetail.UpdateRow(orderDetail);

        if (orderDetail.ProductCode != null)
        {
            if (orderDetail == _detailToInsert)
            {
                _detailToInsert = null;
            }
        }

        await _gridDetail.ExpandRow(orderDetail);
        StateHasChanged();

    }
   
}

Is there anyone who can help or guide me on this matter?

2

If you want to restore the current page after reload you can use the technique demonstrated here:

3

Does your DataGrid InLine Editing sample use restore/reload? Because I think it is similar to my issue.

4

No, it's not using such technique.

5

How can I do it without using restore/reload in my case?

6

I'm afraid that I'm not familiar enough with your case to provide you additional details.

7

I would like to add this in case anyone has encountered a similar problem before. This situation does not occur in the master section. In other words, on which page I update the information in the master, it stays on that page. Hope someone in this forum can help.

8

Any idea why the row does NOT expand? _ordersDto.FirstOrDefault(o => o.Id == parentOrder.Id) returns a valid Order.

private async Task OnCreateRowDetail(OrderDetailDto? orderDetail)
{
    if (orderDetail != null)
    {
        orderDetailMap = new OrderDetail();
        Mapper.Map(orderDetail, orderDetailMap);

        // Add the new order detail to the database
        var addedOrderDetail = await AddOrderDetailUseCase.ExecuteAsync(orderDetailMap);

        Mapper.Map(addedOrderDetail, orderDetail);
        // Find the parent order
        var parentOrder = GetParentOrder(orderDetail);

        if (parentOrder != null)
        {
            pageIndex = current_page;
            _order = ViewOrdersUseCase.Execute(user);
            _ordersDto = Mapper.ProjectTo<OrderDto>(_order);

            await _gridDetail.GoToPage((int)pageIndex);
            await _grid.ExpandRow(_ordersDto.FirstOrDefault(o => o.Id == parentOrder.Id));

            StateHasChanged();
        }
        
    }
9

Is there a way to keep the parent row expanded after adding a row into detail? I tried many things but couldn't find a logic. @yordanov

10

Hey @Robot,

You can check this thread for some ideas:

If you continue to demand support from Radzen team without a subscription we will discontinue your forum account.