如何将 Blazor Syncfusion SfGrid 与嵌套对象一起使用

Question

我正在使用 Syncfusion Grid 来显示

ChildRecord

对象的列表。

ChildRecord

类包含一个

Name

类。

Name

类包含孩子的名字和姓氏作为字符串。出于某种原因，网格将

Name

对象内的变量显示为空白。我已附上相关代码。

<SfGrid DataSource="@ChildRecords" AllowPaging="true" AllowSorting="true" AllowFiltering="true" AllowGrouping="true">
<GridPageSettings PageSize="5"></GridPageSettings>
<GridColumns>
    <GridColumn Field=@nameof(ChildRecord.Name.FirstName) HeaderText="First Name" Width="150"></GridColumn>
    <GridColumn Field=@nameof(ChildRecord.Name.LastName) HeaderText="Last Name" Width="150"></GridColumn>
    <GridColumn Field=@nameof(ChildRecord.ID) HeaderText="ID" Width="150"></GridColumn>
    <GridColumn Field=@nameof(ChildRecord.DoB) HeaderText="DoB" Width="150"></GridColumn>
</GridColumns>

以下是表格在 Blazor 应用程序中的呈现方式：

我假设 SfGrid 在内部以不支持嵌套对象的方式实现。我想知道这个问题是否有解决方法。

Answer 1

您想在网格中显示嵌套属性（复杂数据）值。您可以在

DataGrid

中使用点（

.

）运算符在

column.field

中实现复杂的数据绑定。在下面的例子中，

Name.FirstName

和

Name.LastName

是复杂的数据。

参考：

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; } 
  } 
}