how use two kendo filter components for nested kendo grid (Hierarchy)

问题

I use kendo grid in my asp.net core project v 2.1. I have 3 table person and wife and child. I want to use kendo with hierarchy tables. the primary table is person and the second table is wife or child. for filter the kendo grid I use kendo Filter component (not itself kendo grid filter). I add the first filter component for the primary table (person table) and it works fine. I want to add a secondary filter component for the wife table. how I should do this? plz, help me thanks.

Picture 1:

Picture 2: ​

<kendo-datasource type="DataSourceTagHelperType.Ajax" name="dataSource1" server-operation="true">
    <transport>
        <read url="@Url.Action("GetAllPerson", "Reports")" />
    </transport>
    <schema>
        <model id="PersonId"></model>
    </schema>
</kendo-datasource>
​
@(Html.Kendo().Filter<DomainClasses.Person.Person>()
  .Name("filter")
  .Operators()
  .ApplyButton(true)
  .DataSource("dataSource1")
  .Fields(f =>
  {
      f.Add(p => p.PersonTypes).Label("Person Type");
      f.Add(p=>  p.PersonName).Label("Name");
      f.Add(p => p.PersonFamily).Label("Family");
      f.Add(p => p.PersonAliasName).Label("Alias Name);
      f.Add(p => p.PersonFatherName).Label("Father Name");
      f.Add(p => p.PersonBirthCertificate).Label("National Code");
      f.Add(p => p.PersonCategory).Label("Category");
      f.Add(p => p.PersonCounty).Label("City");
  })
)
​
@(Html.Kendo().Grid<DomainClasses.Person.Person>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Select().Width(50);
        columns.Bound(p => p.PersonId).Hidden();
        columns.Bound(p => p.PersonTypes).Width(100);
        columns.Bound(p => p.PersonName).Width(200);
        columns.Bound(p => p.PersonFamily).Width(200);
        columns.Bound(p => p.PersonAliasName).Width(150);
        columns.Bound(p => p.PersonFatherName).Width(150);
        columns.Bound(p => p.BirthDatePersian).Width(120);
        columns.Bound(p => p.PersonProvince).Width(100);
        columns.Bound(p => p.PersonCounty).Width(120);
        columns.Bound(p => p.PersonVillage).Width(150);
        columns.Bound(p => p.PersonStreet).Width(200);
        columns.Bound(p => p.PersonEducation).Width(120);
        columns.Bound(p => p.PersonBirthCertificate).Width(130);
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Groupable()
    .Events(e=>e.Change("onChange"))
    .DataSource("dataSource1")
    .PersistSelection()
.ClientDetailTemplateId("spouseTemplate")
.Events(e => e.DataBound("dataBound"))
)
​
@(Html.Kendo().Grid<DomainClasses.Spouse.Spouse>()
    .Name("grid_#=PersonId#")
    .Columns(columns =>
    {
        columns.Bound(o => o.SpouseName).Width(200);
        columns.Bound(o => o.SpouseFamily).Width(200);
        columns.Bound(o => o.SpouseFatherName).Width(200);
        columns.Bound(o => o.SpouseIsAlive);
        columns.Bound(o => o.SpouseHousingSituation).Width(150);
        columns.Bound(o => o.SpouseAddress).Width(200);
        columns.Bound(o => o.SpousePhone).Width(150);
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(10)
        .Read(read => read.Action("GetSposes", "Reports", new { personId = "#=PersonId#" }))
    )
    .Pageable()
    .Sortable()
    .Filterable()
    .HtmlAttributes(new {style="width:1300px;" })
    .ToClientTemplate()
)

来源：https://stackoverflow.com/questions/61959186/how-use-two-kendo-filter-components-for-nested-kendo-grid-hierarchy