Master Detail TreeGrid - incorrectly displays all child records in the Detail TreeGrid

[Unknown]

I am trying to implement the Blazor Master Detail Grid example but instead of using the DataGrid control I am using the TreeGrid.

I have a Master TreeGrid showing Teams and a Detail TreeGrid showing Roles. When a Team is selected I want to display only the Roles in that Team. However, when I filter the data for the Detail TreeGrid it shows the matching Roles but it also displays all the child records of the matching Roles. I have tried setting FilterHierarchyMode to None but this hasn't made any difference. Am I doing something wrong?

Here is my Code:

<div class="col-lg-12 control-section">

    <div class="content-wrapper">

        <div class="row">

            <SfTreeGrid DataSource="@TeamData" Height="312" IdMapping="TeamId" ParentIdMapping="ParentTeamId" TreeColumnIndex="1">

                <TreeGridEvents RowSelected="TeamRowSelecthandler" TValue="TeamModel"></TreeGridEvents>

                <TreeGridColumns>

                    <TreeGridColumn Field="TeamId" HeaderText="Team ID" Width="10"></TreeGridColumn>

                    <TreeGridColumn Field="Name" HeaderText="Team Name" Width="145"></TreeGridColumn>

                    <TreeGridColumn Field="ManagerRoleId" HeaderText="Manager" Width="10"></TreeGridColumn>

                    <TreeGridColumn Field="BudgetCodeId" HeaderText="Budget Code" Width="10"></TreeGridColumn>

                    <TreeGridColumn Field="CompanyId" HeaderText="Company" Width="10"></TreeGridColumn>

                    <TreeGridColumn Field="Department" HeaderText="Department" Width="10"></TreeGridColumn>

                    <TreeGridColumn Field="Active" HeaderText="Active" Width="10"></TreeGridColumn>

                </TreeGridColumns>

            </SfTreeGrid>

        </div>

    </div>

</div>

<div class='e-statustext'>Showing roles in Team: <b>@SelectedTeam</b></div>

<div class="col-lg-12 control-section">

    <div class="content-wrapper">

        <div class="row">

            <SfTreeGrid DataSource="@RoleData" Query="DataQueryRoles" Height="312" IdMapping="RoleId" ParentIdMapping="ReportsToRoleId" TreeColumnIndex="1">

                <TreeGridEvents RowSelected="RoleRowSelecthandler" TValue="RoleModel"></TreeGridEvents>

                <TreeGridFilterSettings HierarchyMode="FilterHierarchyMode.None"></TreeGridFilterSettings>

                <TreeGridColumns>

                    <TreeGridColumn Field="RoleId" HeaderText="Role ID" Width="10"></TreeGridColumn>

                    <TreeGridColumn Field="JobTitle" HeaderText="Job Title" Width="145"></TreeGridColumn>

                    <TreeGridColumn Field="ReportsToRoleId" HeaderText="Manager" Width="10"></TreeGridColumn>

                    <TreeGridColumn Field="TeamId" HeaderText="Team" Width="10"></TreeGridColumn>

                    <TreeGridColumn Field="CampusId" HeaderText="Campus" Width="10"></TreeGridColumn>

                    <TreeGridColumn Field="Active" HeaderText="Active" Width="10"></TreeGridColumn>

                </TreeGridColumns>

            </SfTreeGrid>

        </div>

    </div>

</div>

@code{

    public IEnumerable<TeamModel> TeamData;

    public IEnumerable<RoleModel> RoleData;

    public string SelectedTeam { get; set; } = string.Empty;

    public int? TeamRowIndex { get; set; }

    public string SelectedRole { get; set; } = string.Empty;

    public int? RoleRowIndex { get; set; }

    public Query? DataQueryRoles { get; set; } = null;

    protected override async Task OnInitializedAsync()

    {

        this.TeamData = await OrganisationService.GetTeams();

        this.RoleData = await OrganisationService.GetRoles();

    }

    public void TeamRowSelecthandler(RowSelectEventArgs<TeamModel> Args)

    {

        SelectedTeam = Args.Data.Name;

        TeamRowIndex = Args.Data.TeamId;

        this.DataQueryRoles = new Query().Where(new WhereFilter() { Field = "TeamId", Operator = "equal", value = TeamRowIndex });

    }

    public void RoleRowSelecthandler(RowSelectEventArgs<RoleModel> Args)

    {

        SelectedRole = Args.Data.JobTitle;

        RoleRowIndex = Args.Data.RoleId;

    }

}

Here is a screenshot of the problem

[Shek Mohammed Asiq Abdul Jabbar]

Hi James,

Greetings from Syncfusion Support.

Query #: Need to show only the parent record in the second tree grid.

We can replicate the issue from our end. Query that you have used in the treegrid (i.e., Second tree grid), will only return the corresponding records where the Id matched (“TeamId” in your case) but it will not do filtering on second TreeGrid.

To perform filtering at initial render we suggest to use TreeGridFilterColumns  property as like the following code.  Based on your requirement, we have only filtered the parent records by passing ParendIdMapping value.  Also, we have attached the sample for your reference.

<TreeGridFilterSettings HierarchyMode="Syncfusion.Blazor.TreeGrid.FilterHierarchyMode.None">

    <TreeGridFilterColumns>

        <TreeGridFilterColumn Field="ParentId" MatchCase=false Operator="Syncfusion.Blazor.Operator.Equal" Predicate="or" Value="@val"></TreeGridFilterColumn>

    </TreeGridFilterColumns>

</TreeGridFilterSettings>

 

@code {

   public int? val = null;

}

Please refer to the following documentation : https://blazor.syncfusion.com/documentation/treegrid/filtering/filtering#initial-filter

If we misunderstood your query, please share more details for better understanding.

Kindly get back to us for further assistance.

Regards,

Shek Mohammed Asiq

Attachment: Counter_(7)_(1)_5d48264d.zip