Hierarchy Grid with lazy loading of data

[Doug]

I have a need to show additional details about a row of data and would like it to show within the grid.  To do this, I have used a hierarchical grid and I load the data using the OnRowExpand event.  Unfortunately, the grid's template is not updated after the model is updated.  Can you recommend a better approach to accomplish this?

Thanks,

 

Doug

@page "/po/{PoNumber}"
@attribute [Authorize]
@inject Layer3.Data.DataAccess.ERP.IPgDataAccess _db;
@using System.Linq;
@using Layer3.Data.Models.ERP.PO;

@if (Loading)
{
    <Waiting Message="@LoadingMessage" />
}

@if (NotFound)
{
    <div class="alert alert-danger" role="alert">
        <strong>@PoNumber</strong> was not found!
    </div>
}

<div class="card">
    <div class="card-header">
        <h3>
            PO #@PoNumber for <strong>@PO?.ProjectName</strong>
            <button type="button" class="close" aria-label="Close" @onclick="@(() => OnClose.InvokeAsync(InventoryTabModel))">
                <span aria-hidden="true">&times;</span>
            </button>
        </h3>
    </div>
    <div class="card-body">
        @if (PO != null)
        {
            <dl class="row">
                <dt class="col-sm-2">Vendor</dt>
                <dd class="col-sm-10">@PO.Vendor</dd>
                <dt class="col-sm-2">Order Date</dt>
                <dd class="col-sm-10">@PO.OrderDate</dd>
                <dt class="col-sm-2">Status</dt>
                <dd class="col-sm-10">@PO.Status</dd>
                <dt class="col-sm-2">Comments</dt>
                <dd class="col-sm-10">@((MarkupString)PO.Comments.Replace("\n", "<br />"))</dd>
            </dl>
        }

        @if (Lines != null)
        {
            <TelerikGrid Data="@Lines" Sortable="false" Pageable="false" OnRowExpand="@OnRowExpandHandler">
                <GridColumns>
                    <GridColumn Field=@nameof(PoItem.LineNumber) />
                    <GridColumn Field=@nameof(PoItem.Status) />
                    <GridColumn Field=@nameof(PoItem.ItemNumber) />
                    <GridColumn Field=@nameof(PoItem.Manufacturer) />
                    <GridColumn Field=@nameof(PoItem.Config) />
                    <GridColumn Field=@nameof(PoItem.QtyOrdered) />
                    <GridColumn Field=@nameof(PoItem.QtyReceived) />
                    <GridColumn Field=@nameof(PoItem.QtyReturned) />
                    <GridColumn Field=@nameof(PoItem.SoNumber) />
                </GridColumns>
                <DetailTemplate Context="LineContext">
                    @{
                        var line = LineContext;

                        @if (line.Serialized)
                        {
                            <dl class="row">
                                <dt class="col-sm-2">In Inventory</dt>
                                <dd class="col-sm-10">@line.InInventory</dd>
                                <dt class="col-sm-2">Shipped</dt>
                                <dd class="col-sm-10">@line.Shipped</dd>
                                <dt class="col-sm-2">Serial Swapped</dt>
                                <dd class="col-sm-10">@line.SerialSwapped</dd>
                            </dl>
                        }
                        else
                        {
                            <span>Not serialized</span>
                        }
                    }
                </DetailTemplate>
            </TelerikGrid>
        }
    </div>
</div>

@code {
    [Parameter]
    public string PoNumber { get; set; }

    [Parameter]
    public bool ShowClose { get; set; } = false;

    [Parameter]
    public EventCallback<ProjectInventory.TabModel> OnClose { get; set; }

    [Parameter]
    public ProjectInventory.TabModel InventoryTabModel { get; set; }

    [Parameter]
    public EventCallback<ProjectInventory.OpenTabEventArgs> OnTabOpen { get; set; }

    private string LoadingMessage { get; set; }
    private bool Loading { get; set; } = false;
    private bool NotFound { get; set; } = false;
    private Layer3.Data.Models.ERP.PO.PO PO { get; set; }
    private List<Layer3.Data.Models.ERP.PO.PoItem> Lines { get; set; }

    protected override async Task OnParametersSetAsync()
    {
        LoadingMessage = $"Searching for PO #{PoNumber}...";
        Loading = true;

        try
        {
            Layer3.Data.DataAccess.ERP.PO po = new Layer3.Data.DataAccess.ERP.PO(_db);
            PO = await po.GetPoAsync(PoNumber);
            Lines = await po.GetPoLinesAsync(PoNumber);
        }
        finally
        {
            Loading = false;
        }
    }

    async void OnRowExpandHandler(GridRowExpandEventArgs args)
    {
        var line = args.Item as Layer3.Data.Models.ERP.PO.PoItem;

        if (line.Serialized && line.SerialAudits == null)
        {
            // get serials received
            LoadingMessage = $"Getting serials receive for Line #{line.LineNumber}...";
            Loading = true;

            try
            {
                Layer3.Data.DataAccess.ERP.PO po = new Layer3.Data.DataAccess.ERP.PO(_db);
                line.SerialAudits = await po.GetSerialAuditsAsync(PoNumber, line.LineNumber);
            }
            finally
            {
                Loading = false;
            }
        }
    }
}

[Marin Bratanov]

Hi Doug,

Check out the following sample project that implements load on demand in the detail template: https://github.com/telerik/blazor-ui/tree/master/grid/load-on-demand-hierarchy

 

Regards,
Marin Bratanov
Progress Telerik

[Doug]

Thanks.  Adding a sub component does look like a better way of handling this.

I also tried adding this.StateHasChanged(); to the end of the expand event and this forced a diff to occur.