Binding nested Json object into dynamic GridColumn

[Eduardo]

Greetings, Syncfusion team!

I would like to display a grid with products from an order.

During the OnInitialized method, I'm making a GET request:

The response is the Json below:

In this first level, we have the data from the Item in the Order, which is called PedidoItem

In the second level, nested inside PedidoItem, we have the products data:

I must access both data in the first and in the second level, and I've tried doing it in the following way:

But when I run the code, and access the page, an error occours, the data is not shown in the grid:

Notice that, instead of getting the PedidoItem.Produto.Id, the grid gets the Id directly from PedidoItem.

And I get the following error message:

Is there anything wrong with my code? How can I properly access the nested data and display it on the grid?

I'd gladly appreciate some help here!

Best Regards,

Eduardo

[Jeevakanth Palaniappan]

Hi Consensu , 

 

Greetings from Syncfusion support. 

 

We have checked your query and found that you need to bind complex data for the grid. Please find the below documentation for your reference. 

 

https://blazor.syncfusion.com/documentation/datagrid/columns/#complex-data-binding 

 

Get back to us if you have any other queries. 

 

Regards, 

Jeevakanth SP. 

[Eduardo]

Hello, again

I believe that I'm already using Complex Data Dinding on this grid, and I tried to use it like it is the Syncfusion documentation :

I'm using the dot operator in "Field", and I can even access the object "Produto" and it's property "Nome" inside of "PedidoItem".

I noticed that the examples shown in Syncfusion documentations are using only two levels of objects, like: "PedidoItem.Nome", and it's working fine for me. 

But I need to access even another level, like: "PedidoItem.Produto.Nome", and this is possible when writting the code, but not working when I run it:

I thought that it might be because of me using "@nameof()", but even without it, I get the same error, as shows the image below:

Is there any example of complex data binding like the one that I'm trying to do here (accessing Object.Object.Property)?

Am I doing something wrong?

I'm sending the code in case it helps.

Best regards,

Eduardo Passero

Attachment: CadastroPedido_81ef7284.zip

[Jeevakanth Palaniappan]

Hi Consensu , 

 

We suggest you to remove the PedidoItem from the field name as like we have removed the EmployeeData from the field. We have attached the code snippet and the sample for your reference. 

 

<SfGrid DataSource="@Employees" Height="315"> 

    <GridColumns> 

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

        <GridColumn Field="Name.FirstName" HeaderText="First Name" Width="150"></GridColumn> 

        <GridColumn Field="Name.LastName" HeaderText="Last Name" Width="130"></GridColumn> 

        <GridColumn Field="Name.InnerName.FirstName" HeaderText="Last Name" Width="130"></GridColumn> 

        <GridColumn Field="Name.InnerName.LastName" HeaderText="Last Name" Width="130"></GridColumn> 

        @*<GridColumn Field="EmployeeData.Name.InnerName.FirstName" HeaderText="Last Name" Width="130"></GridColumn> 

        <GridColumn Field="EmployeeData.Name.InnerName.LastName" HeaderText="Last Name" Width="130"></GridColumn>*@ 

        <GridColumn Field=@nameof(EmployeeData.Title) HeaderText="Title" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

    </GridColumns> 

</SfGrid> 

 

Your code 

 

        <SfGrid DataSource="@pedidoitems"> 

            <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" Mode="EditMode.Dialog"></GridEditSettings> 

            <GridColumns> 

                <GridColumn Field=@nameof(PedidoItem.Id) HeaderText="Using nameof" Width="3"></GridColumn> 

                <GridColumn Field=@nameof(PedidoItem.Produto.Nome) HeaderText="Using nameof" Width="3"></GridColumn> 

                <GridColumn Field="PedidoItem.Id" HeaderText="Not using nameof" Width="3"></GridColumn> 

                <GridColumn Field="Produto.Nome" HeaderText="Not using nameof" Width="3"></GridColumn> 

@*<GridColumn Field="PedidoItem.Produto.Nome" HeaderText="Not using nameof" Width="3"></GridColumn>*@ 

            </GridColumns> 

        </SfGrid> 

 

Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp1346263891 

 

https://blazor.syncfusion.com/documentation/datagrid/columns/#complex-data-binding 

 

Please get back to us if you have any other queries. 

 

Regards, 

Jeevakanth SP. 

[Eduardo]

Thank you very much, it solved the problem!

[Jeevakanth Palaniappan]

Hi Consensu, 

 

Thanks for the update. Please get back to us if you have any other queries. 

 

Regards, 

Jeevakanth SP. 

[Eduardo]

Greetings again!

I decided to use this same thread to ask another question because it's about the same code.

I can use the Complex Data in the grid, but now I must bind it to the Edit Dialog.

I'm trying to do it like this:

The Blue rectangle shows the successful binding, I can display the attribute correctly if it's not binded to a field.

When I try to bind the complex object to the field, it doesn't work so well:

How can I make this work properly?

I'm sending the code in case it helps

Best Regards,

Eduardo Passero

Attachment: CadastroPedido_9f6765b4.zip

[Jeevakanth Palaniappan]

Hi Consensu , 

 

We have prepared a sample for complex binding with dialog template. Please find it below. 

 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="@EditMode.Dialog"> 

        <Template> 

            @{ 

                var order = (context as EmployeeData); 

            } 

            <div> 

                <div class="mb-4"><SfNumericTextBox TValue="int?" ID="EmployeeID" Enabled="@((order.EmployeeID == null) ? true : false)" @bind-Value="order.EmployeeID"></SfNumericTextBox></div> 

                <div class="mb-4"><SfNumericTextBox TValue="int?" ID="Name__ID" @bind-Value="order.Name.ID"></SfNumericTextBox></div> 

                <div class="mb-4"><SfNumericTextBox TValue="int?" ID="Name__InnerName__ID" @bind-Value="order.Name.InnerName.ID"></SfNumericTextBox></div> 

            </div> 

        </Template> 

    </GridEditSettings> 

Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp-474146724 

Documentation : https://blazor.syncfusion.com/documentation/datagrid/editing/#perform-crud-operation-for-complex-object-using-edittemplate 

Please get back to us if you have any other queries. 

Regards, 

Jeevakanth SP.