Blazor Data Grid Nested Property

[Tom]

How do I display a nested property object in a data grid? The following grid column result is empty:

<GridColumn Field="@nameof(Product.Category.Name)"

HeaderText="Purchase Place"

TextAlign="TextAlign.Left"

Width="130">

</GridColumn>

public class Product{

   public int Id {get; set;}

   public Category Category {get; set;}

}

public class Category{

  public int Id {get; set;}

  public string Name {get; set;}

}

I have found a work around by adding another property: public string CategoryName{get; set;} and setting it manually.

I have been searching the documentation, must have missed it.

[Rahul Narayanasamy]

Hi Tom,  

 

Greetings from Syncfusion. 

 

You want to display a nested property(complex data) values in the Grid. You can achieve complex data binding in the DataGrid by using the dot(.) operator in the column.field. In the following examples, Name.FirstName and Name.LastName are complex data.  

Reference: 

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

 

 

<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=@nameof(EmployeeData.Title) HeaderText="Title" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

    </GridColumns> 

</SfGrid> 

 

@code{ 

    . .. 

  public class EmployeeData 

{ 

    public int? EmployeeID { get; set; } 

    public EmployeeName Name { get; set; } 

    public string Title { get; set; } 

} 

 

public class EmployeeName 

{ 

    public string FirstName { get; set; } 

    public string LastName { get; set; } 

} 

 

} 

 

Please let us know if you have any concerns. 

 

Regards, 

Rahul 

 

[Tom]

Thanks

[Rahul Narayanasamy]

Hi Tom, 

Thanks for the update. 

Please get back to us if you need further assistance. 

Regards, 

Rahul 

[Kevin Kraeft]

Is it possible if the complex property was a List to display the Count as a column?

[Prathap Senthil]

Yes, it is possible. You can use the column template feature to display the count in the column. Kindly refer to the code snippet and sample below for your reference.

<SfGrid DataSource="orders" AllowPaging="true">

    <GridColumns>

        <GridColumn Field="OrderId" HeaderText="Order ID" Width="100"></GridColumn>

        <GridColumn Field="OrderName" HeaderText="Order Name" Width="150"></GridColumn>

        <!-- Custom column to display count of Products List -->

        <GridColumn HeaderText="Products Count" Width="150">

            <Template>

                @{

                    var order = (Order)context;

                    <span>@order.Products.Count</span>

                }

            </Template>

        </GridColumn>

    </GridColumns>

</SfGrid>

Note: When using template columns, they are primarily meant for rendering custom content and may not provide built-in support for datagrid actions like sorting, filtering, editing.

Additionally, note that by default, you must ensure that the Field property is defined. Based on the field value, the data operation and CRUD operation will be executed.

Reference: Column Template in Blazor DataGrid Component | Syncfusion

Sample: https://blazorplayground.syncfusion.com/embed/VNLoZKhJVIxJPUYq?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5