We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

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

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
Child records displayed in Detail TreeGrid.PNG


1 Reply 1 reply marked as answer

SM Shek Mohammed Asiq Abdul Jabbar Syncfusion Team March 2, 2023 03:47 PM UTC

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

Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon