Problem with 2-level Hierarchy Grid datasources

[Claudio Cespon]

Hi,

I'm trying to make a 2-level Hierarchy Grid but i'm having a problem while expanding a row. After expand the row, the records of all child grids get updated with the same information.

Here you can see how the parent records are different and should generate different child records, but these are the same:

I'm using local data as DataSource for both grids

@using Entidades

@using Data

@using Syncfusion.Blazor.Grids

@using Syncfusion.Blazor.Spinner

@using Syncfusion.Blazor.Buttons

@using Syncfusion.Blazor.Data

@inject GestionClientesService Service

<div id="container">

    <SfSpinner Visible="@VisibleProperty">

    </SfSpinner>

    <SfGrid DataSource="datosPedidosPendientes"

            TValue="PedidoPendiente"

            Toolbar="@(new List<string>() { "Search" })"

            EnableHeaderFocus="true"

            AllowPaging="true"

            AllowSelection="true"

            AllowSorting="true"

            AllowFiltering="true"

            AllowResizing="true"

            EnableHover="false"

            RowHeight="38"

            Locale="es-AR">

        <GridPageSettings PageSize="20" PageSizes="@(new int[]{ 10, 20, 30, 50, 100 })"></GridPageSettings>

        <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings>

        <GridEvents TValue="PedidoPendiente" DetailDataBound="@ExpandirPedidoPendiente"></GridEvents>

        <GridColumns>

            <GridColumn Field=@nameof(PedidoPendiente.FechaEmision) Width="8" HeaderText="Fecha" Type="ColumnType.Date" Format="d"></GridColumn>

            <GridColumn Field=@nameof(PedidoPendiente.ClasePedido) Width="12" HeaderText="Clase"></GridColumn>

            <GridColumn Field=@nameof(PedidoPendiente.NumeroPedido) Width="7" HeaderText="Pedido"></GridColumn>

            <GridColumn Field=@nameof(PedidoPendiente.FormaEntrega) Width="11" HeaderText="Forma Ent."></GridColumn>

            <GridColumn Field=@nameof(PedidoPendiente.FechaPrometidoPara) Width="11" HeaderText="Prom. Para" Type="ColumnType.Date" Format="d"></GridColumn>

            <GridColumn Field=@nameof(PedidoPendiente.Moneda) Width="9" HeaderText="Moneda"></GridColumn>

            <GridColumn Field=@nameof(PedidoPendiente.ImportePendiente) Width="10" HeaderText="Importe" Type="ColumnType.Number" Format="C2" TextAlign="TextAlign.Right"></GridColumn>

            <GridColumn Field=@nameof(PedidoPendiente.LugarEntrega) Width="10" HeaderText="Sucursal"></GridColumn>

            <GridColumn Field=@nameof(PedidoPendiente.OC) Width="8" HeaderText="OC"></GridColumn>

            <GridColumn Field=@nameof(PedidoPendiente.RemitidoParcialmente) Width="9" HeaderText="R. Parc." DisplayAsCheckBox="true" TextAlign="TextAlign.Center"></GridColumn>

            <GridColumn Field=@nameof(PedidoPendiente.OrigenPedido) Width="10" HeaderText="Origen"></GridColumn>

            <GridColumn Field=@nameof(PedidoPendiente.ReferenciaCotizacion) Width="10" HeaderText="Referencia"></GridColumn>

        </GridColumns>

        <GridTemplates>

            <DetailTemplate>

                    <SfGrid DataSource="datosPosicionesPedidosPendientes"

                        TValue="PosicionPedidoPendiente"

                        Toolbar="@(new List<string>() { "Search" })"

                        EnableHeaderFocus="true"

                        AllowPaging="false"

                        AllowSelection="true"

                        AllowSorting="true"

                        AllowFiltering="true"

                        AllowResizing="true"

                        EnableHover="false"

                        RowHeight="38"

                        Locale="es-AR">

                        <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings>

                        <GridColumns>

                            <GridColumn Field=@nameof(PosicionPedidoPendiente.NumeroRenglon) Width="5" HeaderText="Renglon" IsPrimaryKey="true"></GridColumn>

                            <GridColumn Field=@nameof(PosicionPedidoPendiente.CodigoArticulo) Width="6" HeaderText="Código"></GridColumn>

                            <GridColumn Field=@nameof(PosicionPedidoPendiente.DescripcionArticulo) Width="30" HeaderText="Descripción"></GridColumn>

                            <GridColumn Field=@nameof(PosicionPedidoPendiente.PresentacionCotizada) Width="8" HeaderText="Pres. Cot."></GridColumn>

                            <GridColumn Field=@nameof(PosicionPedidoPendiente.PresentacionEnviada) Width="8" HeaderText="Pres. Enviada"></GridColumn>

                            <GridColumn Field=@nameof(PosicionPedidoPendiente.MarcaArticulo) Width="8" HeaderText="Marca"></GridColumn>

                            <GridColumn Field=@nameof(PosicionPedidoPendiente.CantidadPendiente) Width="8" HeaderText="Cantidad" Type="ColumnType.Number"></GridColumn>

                            <GridColumn Field=@nameof(PosicionPedidoPendiente.PrecioUnitario) Width="8" HeaderText="Precio Unitario" Type="ColumnType.Number" Format="C2" TextAlign="TextAlign.Right"></GridColumn>

                            <GridColumn Field=@nameof(PosicionPedidoPendiente.ImporteTotal) Width="8" HeaderText="Importe Total" Type="ColumnType.Number" Format="C2" TextAlign="TextAlign.Right"></GridColumn>

                            <GridColumn Field=@nameof(PosicionPedidoPendiente.Stock) Width="5" HeaderText="Stock"></GridColumn>

                        </GridColumns>

                    </SfGrid>

            </DetailTemplate>

        </GridTemplates>

    </SfGrid>

</div>

@code {

    private bool VisibleProperty { get; set; } = false;

    [Parameter] public GestionCliente Cliente { get; set; }

    public List<PedidoPendiente> datosPedidosPendientes { get; set; }

    public List<PosicionPedidoPendiente> datosPosicionesPedidosPendientes { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)

    {

        if (firstRender)

        {

            VisibleProperty = true;

            await Task.Delay(200);

            this.StateHasChanged(); //Para forzar a renderizar el componente y mostrar la grilla cargada.

        }

        else

        {

            if (datosPedidosPendientes == null)

            {

                datosPedidosPendientes = await Service.ObtenerPedidosPendientes(Cliente.CodigoCliente, Cliente.CodigoCanal);

                VisibleProperty = false;

                this.StateHasChanged(); //Para forzar a renderizar el componente y mostrar la grilla cargada.

            }

        }

    }

    protected async Task ExpandirPedidoPendiente(DetailDataBoundEventArgs<PedidoPendiente> args)

    {

        VisibleProperty = true;

        await Task.Delay(200);

        datosPosicionesPedidosPendientes= await Service.ObtenerPosicionesPedidosPendientes(args.Data.NumeroPedido);

        VisibleProperty = false;

    }

}

Could you give me a solution for this?

[Rahul Narayanasamy]

Hi Claudio, 

Greetings from Syncfusion. 

We suspect that you are facing difficulties while showing the hierarchy Grid data. We need to pass the corresponding expanded record id in Query property of detail Grid to show the corresponding child Grid data properly. Find the below code snippets and documentation link for your reference. 

<SfGrid DataSource="@Employees"> 

                    <GridTemplates> 

                        <DetailTemplate> 

                            @{ 

                                var employee = (context as EmployeeData); 

                                <SfGrid TValue="Order" Query="@GetEmployeesQuery(employee)" AllowPaging="true"> 

                                    <GridPageSettings PageSize="8"></GridPageSettings> 

                                    <SfDataManager Url=https://js.syncfusion.com/demos/ejservices/Wcf/Northwind.svc/Orders CrossDomain="true"></SfDataManager> 

                                    . . . 

                                    <GridColumns> 

                                        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="110"> </GridColumn> 

                                        . . . 

                                    </GridColumns> 

                                </SfGrid> 

                            } 

                        </DetailTemplate> 

                    </GridTemplates> 

                    <GridColumns> 

                        <GridColumn Field=@nameof(EmployeeData.EmployeeID) HeaderText="Employee ID" TextAlign="TextAlign.Right" Width="110"> </GridColumn> 

                        . . . 

                    </GridColumns> 

</SfGrid> 

 

@code{ 

    public Query GetEmployeesQuery(EmployeeData value)    {        return new Query().Where("EmployeeID", "equal", value.EmployeeID);    }

    . ..  

} 

Reference: 

https://blazor.syncfusion.com/documentation/datagrid/row#rendering-custom-component  

https://blazor.syncfusion.com/demos/datagrid/hierarchy-grid?theme=bootstrap4 

Please let us know if you have any concerns. 

Regards, 

Rahul