Hierarchy grid with editable rows

[Jan_Mucha]

Hi, it si possible have a Hierarchy Grid with editable rows. I'm trying, but it does not work wery well. I thing there is problem with @ref attribute, but I'm not sure. Problem is when i try edit multiple rows. I can work only with row which was edit in last time. The others rows which was edit berfore are frozen and edit buton does not work.

<RadzenGrid @ref="_historyGrid" AllowFiltering="false" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowPaging="false" PageSize="100"
        AllowSorting="false" Data="@_customerHistory" TItem="Customer">
<Template Context="customerItem">
    <RadzenGrid @ref="_historyActivityGrid" AllowFiltering="false" AllowPaging="false" AllowSorting="false" Data="@customerItem.Activities.Where(o=> o.EndDate != null).OrderByDescending(o => o.StartDate)"
                TItem="WorkshopActivity" RowUpdate="@OnUpdateRowActivities">
        <Columns>
            <RadzenGridColumn TItem="WorkshopActivity" Property="Name" Title="Name">
            </RadzenGridColumn>
            <RadzenGridColumn TItem="WorkshopActivity" Property="StartDate" Title="Start" Width="180px">
                <Template Context="item">
                    @String.Format("{0:dd.MM.yy HH:mm}", item.StartDate)
                </Template>
                <EditTemplate Context="item">
                    <RadzenDatePicker Name="StartDate" TValue="DateTime" ShowTime="true" ShowSeconds="false"
                                      HoursStep="1" MinutesStep="10" DateFormat="dd.MM.yy HH:mm"
                                      @bind-Value="@item.StartDate" Style="width:100%" />
                </EditTemplate>
            </RadzenGridColumn>
            <RadzenGridColumn TItem="WorkshopActivity" Property="EndDate" Title="End" Width="180px">
                <Template Context="item">
                    @String.Format("{0:dd.MM.yy HH:mm}", item.EndDate)
                </Template>
                <EditTemplate Context="item">
                    <RadzenDatePicker Name="EndDate" TValue="DateTime?" ShowTime="true" ShowSeconds="false"
                                      HoursStep="1" MinutesStep="10" DateFormat="dd.MM.yy HH:mm"
                                      @bind-Value="@item.EndDate" Style="width:100%" />
                </EditTemplate>
            </RadzenGridColumn>

            <RadzenGridColumn TItem="WorkshopActivity" Property="ElapsedTime" Title="Time">
                <Template Context="item">
                    @(item.ElapsedTime != null ? (item.ElapsedTime.Value.TotalHours > 24 ? item.ElapsedTime.Value.ToString(@"dd\:hh\:mm") : item.ElapsedTime.Value.ToString(@"hh\:mm")) : "")
                </Template>
            </RadzenGridColumn>

            <RadzenGridColumn TItem="WorkshopActivity" Property="UnitAmount" Title="Disc. Amount">
                <Template Context="item">
                    @String.Format("{0:C0}", item.UnitAmount)
                </Template>
            </RadzenGridColumn>

            <RadzenGridColumn TItem="WorkshopActivity" Property="Discount" Title="Discount">
                <Template Context="item">
                    @(item.IsPercentageDiscount ?? false ? $"{item.Discount.Value:0}%" : item.Discount.Value.ToString("C0"))
                </Template>
            </RadzenGridColumn>

            <RadzenGridColumn TItem="WorkshopActivity" Property="FinalAmount" Title="Price">
                <Template Context="item">
                    @($"{item.FinalAmount:C0}")
                </Template>
            </RadzenGridColumn>

            <RadzenGridColumn TItem="WorkshopActivity" Property="PayBy" Title="Pay By">
            </RadzenGridColumn>

            <RadzenGridColumn TItem="WorkshopActivity" Bubble="false" Filterable="false" Sortable="false" TextAlign="TextAlign.Center" Width="250px">
                <Template Context="item">
                    <RadzenButton Click="@(args => Reopen(item.WorkshopActivityId))" Text="Reopen" Icon="arrow_circle_up"></RadzenButton>
                    <RadzenButton Icon="edit" Click="@(args => EditHistoryActivityRow(item))" />
                </Template>
                <EditTemplate Context="item">
                    <RadzenButton Icon="save" Click="@((args) => SaveHistoryActivityRow(item))">
                    </RadzenButton>
                    <RadzenButton Icon="cancel" ButtonStyle="ButtonStyle.Secondary" Click="@((args) => CancelHistoryActivityEdit(item))">
                    </RadzenButton>
                </EditTemplate>
            </RadzenGridColumn>
        </Columns>
    </RadzenGrid>
</Template>
<Columns>
    <RadzenGridColumn TItem="Customer" Property="FullName" Title="Customer">
        <Template Context="item">
            <RadzenLink Text="@item.FullName" Path="@($"/Customers/Customer/{item.CustomerId}?selectedtab=Activities")" />
        </Template>
    </RadzenGridColumn>
    <RadzenGridColumn TItem="Customer" Property="IsSubscriber" Title="Is Subscriber">
    </RadzenGridColumn>
    <RadzenGridColumn TItem="Customer" Property="RemainingCredit" Title="Remaining Credit">
        <Template Context="item">
            @String.Format("{0:C0}", item.RemainingCredit)
        </Template>
    </RadzenGridColumn>
    <RadzenGridColumn TItem="Customer" Property="Activities.FinalAmount" Title="Final Price">
        <Template Context="item">
            @(@String.Format("{0:C0}", item.Activities.Sum(o=> o.FinalAmount)))
        </Template>
    </RadzenGridColumn>
    <RadzenGridColumn TItem="Customer" Property="PayBay" Title="Pay By">
        <Template Context="item">
            @(item.Activities.Any(o => o.PayBy == PayBy.Money) ? $"{PayBy.Money}" : item.Activities.Any(o => o.PayBy == null) ? $"": $"{PayBy.Credit}")
        </Template>
    </RadzenGridColumn>

    <RadzenGridColumn TItem="Customer" Bubble="false" Filterable="false" Sortable="false" TextAlign="TextAlign.Left">
        <Template Context="item">
            <RadzenButton Icon="attach_money" Click="@(args => CustomerPay(item))" Text="Pay" Visible="@(item.Activities.Any(o => o.PayBy == null && o.EndDate != null))">
            </RadzenButton>

        </Template>
    </RadzenGridColumn>
</Columns>

[enchev]

Not sure what didn't worked for you however here is an example with our hierarchical demo:

@page "/master-detail-hierarchy"

@using NorthwindBlazor.Data
@using NorthwindBlazor.Models.Northwind
@using Microsoft.EntityFrameworkCore

@inject NorthwindContext dbContext

<h1>DataGrid Master Detail Hierarchy</h1>

<p>This page demonstrates how to use templates to create a Radzen Blazor DataGrid hierarchy.</p>

<RadzenExample Name="MasterDetailHierarchy" Heading="false" Documentation="false">
    <RadzenGrid @ref="grid" AllowFiltering="true" AllowPaging="true" PageSize="3" AllowSorting="true" RowRender="@RowRender" ExpandMode="DataGridExpandMode.Single"
                Data="@orders" TItem="Order">
        <Template Context="order">
            <RadzenCard Style="margin-bottom:20px">
                Company:
                <b>@order.Customer?.CompanyName</b>
            </RadzenCard>
            <RadzenTabs>
                <Tabs>
                    <RadzenTabsItem Text="Order Details">
                        <RadzenGrid @ref="ordersDetailsGrid" AllowFiltering="true" AllowPaging="true" AllowSorting="true" Data="@order.OrderDetails" TItem="OrderDetail">
                            <Columns>
                                <RadzenGridColumn TItem="OrderDetail" Property="Order.CustomerID" Title="Order" />
                                <RadzenGridColumn TItem="OrderDetail" Property="Product.ProductName" Title="Product" />
                                <RadzenGridColumn TItem="OrderDetail" Property="UnitPrice" Title="Unit Price">
                                    <Template Context="detail">
                                        @String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", detail.UnitPrice)
                                    </Template>
                                </RadzenGridColumn>
                                <RadzenGridColumn TItem="OrderDetail" Property="Quantity" Title="Quantity" />
                                <RadzenGridColumn TItem="OrderDetail" Property="Discount" Title="Discount">
                                    <Template Context="detail">
                                        @String.Format("{0}%", detail.Discount * 100)
                                    </Template>
                                    <EditTemplate Context="detail">
                                        <RadzenNumeric @bind-Value="detail.Discount" Style="width:100%" />
                                    </EditTemplate>
                                </RadzenGridColumn>
                                <RadzenGridColumn TItem="OrderDetail" Context="sampleBlazorModelsSampleOrder" Bubble="false" Filterable="false" Sortable="false" TextAlign="TextAlign.Center" Width="100px">
                                    <Template Context="detail">
                                        <RadzenButton Icon="edit" Size="ButtonSize.Small" Click="@(args => EditRow(detail))">
                                        </RadzenButton>
                                    </Template>
                                    <EditTemplate Context="detail">
                                        <RadzenButton Icon="save" Size="ButtonSize.Small" Click="@((args) => SaveRow(detail))">
                                        </RadzenButton>
                                        <RadzenButton Icon="cancel" Size="ButtonSize.Small" ButtonStyle="ButtonStyle.Secondary" Click="@((args) => CancelEdit(detail))">
                                        </RadzenButton>
                                    </EditTemplate>
                                </RadzenGridColumn>
                            </Columns>
                        </RadzenGrid>
                    </RadzenTabsItem>
                    <RadzenTabsItem Text="Products">
                        <RadzenDataList WrapItems="true" AllowPaging="true" Data="@order.OrderDetails" TItem="OrderDetail" PageSize="10">
                            <Template Context="detail">
                                <RadzenCard Style="width:100px;height:100px">
                                    Product:
                                    <b>@detail?.Product?.ProductName</b>
                                </RadzenCard>
                            </Template>
                        </RadzenDataList>
                    </RadzenTabsItem>
                </Tabs>
            </RadzenTabs>
        </Template>
        <Columns>
            <RadzenGridColumn Width="100px" TItem="Order" Property="OrderID" Title="Order ID" />
            <RadzenGridColumn Width="200px" TItem="Order" Property="Customer.CompanyName" Title="Customer" />
            <RadzenGridColumn Width="150px" TItem="Order" Property="Employee.LastName" Title="Employee">
                <Template Context="order">
                    <div>@order.Employee?.LastName</div>
                    <RadzenImage Path="@order.Employee?.Photo" />
                </Template>
            </RadzenGridColumn>
            <RadzenGridColumn TItem="Order" Property="OrderDate" Title="Order Date">
                <Template Context="order">
                    @String.Format("{0:d}", order.OrderDate)
                </Template>
            </RadzenGridColumn>
            <RadzenGridColumn TItem="Order" Property="RequiredDate" Title="Required Date">
                <Template Context="order">
                    @String.Format("{0:d}", order.RequiredDate)
                </Template>
            </RadzenGridColumn>
            <RadzenGridColumn TItem="Order" Property="ShippedDate" Title="Shipped Date">
                <Template Context="order">
                    @String.Format("{0:d}", order.ShippedDate)
                </Template>
            </RadzenGridColumn>
            <RadzenGridColumn TItem="Order" Property="Freight" Title="Freight">
                <Template Context="order">
                    @String.Format(new System.Globalization.CultureInfo("en-US"), "{0:C}", order.Freight)
                </Template>
            </RadzenGridColumn>
            <RadzenGridColumn TItem="Order" Property="ShipName" Title="Ship Name" />
            <RadzenGridColumn TItem="Order" Property="ShipAddress" Title="Ship Address" />
            <RadzenGridColumn TItem="Order" Property="ShipCity" Title="Ship City" />
            <RadzenGridColumn TItem="Order" Property="ShipRegion" Title="Ship Region" />
            <RadzenGridColumn TItem="Order" Property="ShipPostalCode" Title="Ship Postal Code" />
            <RadzenGridColumn TItem="Order" Property="ShipCountry" Title="Ship Country" />
        </Columns>
    </RadzenGrid>
</RadzenExample>
@code {
    IEnumerable<Order> orders;
    RadzenGrid<Order> grid;
    RadzenGrid<OrderDetail> ordersDetailsGrid;

    protected override void OnInitialized()
    {
        orders = dbContext.Orders.Include("Customer").Include("Employee").Include("OrderDetails").Include("OrderDetails.Product").ToList();
    }

    void RowRender(RowRenderEventArgs<Order> args)
    {
        args.Expandable = args.Data.ShipCountry == "France" || args.Data.ShipCountry == "Brazil";
    }

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            grid.ExpandRow(orders.FirstOrDefault());
            StateHasChanged();
        }

        base.OnAfterRender(firstRender);
    }

    void EditRow(OrderDetail detail)
    {
        ordersDetailsGrid.EditRow(detail);
    }

    void OnUpdateRow(OrderDetail detail)
    {
        dbContext.Update<OrderDetail>(detail);
    }

    void SaveRow(OrderDetail order)
    {
        ordersDetailsGrid.UpdateRow(order);
    }

    void CancelEdit(OrderDetail order)
    {
        ordersDetailsGrid.CancelEditRow(order);

        // For production
        var orderEntry = dbContext.Entry(order);
        orderEntry.CurrentValues.SetValues(orderEntry.OriginalValues);
        orderEntry.State = EntityState.Unchanged;
    }
}

[Jan_Mucha]

Hi, i'm looking for editable grid bud I don't see it.

[enchev]

If you don’t see it you might need to check again my reply.