Issue with Expand/Collapse Behavior in SfDropDownTree Parent Node

[Tien Pham]

Hi Syncfusion Team,

I am currently using the SfDropDownTree component. When I click on a parent node (the red-highlighted area), the parent node gets selected. However, I can only collapse the parent node by clicking on the arrow to the left (the green-highlighted area).

Expected Behavior:
I would like to modify this behavior so that clicking anywhere on the parent node (either the red or green area) collapses or expands the parent node without selecting it. Only the child nodes should be selectable.

[Tien Pham]

i use code form this document: https://blazor.syncfusion.com/documentation/dropdown-tree/selection

@using Syncfusion.Blazor.Navigations

<SfDropDownTree TItem="EmployeeData" TValue="string" Placeholder="Select an employee" Width="500px">
        <DropDownTreeField TItem="EmployeeData" DataSource="Data" ID="Id" Text="Name" HasChildren="HasChild" ParentID="PId"></DropDownTreeField>
</SfDropDownTree>

@code {
    List<EmployeeData> Data = new List<EmployeeData>
    {
        new EmployeeData() { Id = "1", Name = "Steven Buchanan", Job = "General Manager", HasChild = true, Expanded = true },
        new EmployeeData() { Id = "2", PId = "1", Name = "Laura Callahan", Job = "Product Manager", HasChild = true },
        new EmployeeData() { Id = "3", PId = "2", Name = "Andrew Fuller", Job = "Team Lead", HasChild = true },
        new EmployeeData() { Id = "4", PId = "3", Name = "Anne Dodsworth", Job = "Developer" },
        new EmployeeData() { Id = "10", PId = "3", Name = "Lilly", Job = "Developer" },
        new EmployeeData() { Id = "5", PId = "1", Name = "Nancy Davolio", Job = "Product Manager", HasChild = true },
        new EmployeeData() { Id = "6", PId = "5", Name = "Michael Suyama", Job = "Team Lead", HasChild = true },
        new EmployeeData() { Id = "7", PId = "6", Name = "Robert King", Job = "Developer" },
        new EmployeeData() { Id = "11", PId = "6", Name = "Mary", Job = "Developer" },
        new EmployeeData() { Id = "9", PId = "1", Name = "Janet Leverling", Job = "HR"}
    };

    class EmployeeData
    {
        public string Id { get; set; }
        public string Name { get; set; }
        public string Job { get; set; }
        public bool HasChild { get; set; }
        public bool Expanded { get; set; }
        public string PId { get; set; }
    }
}

[Vishwanathan Muruganantham]

Hi Tien,

We have reviewed your query and understand that you expect the parent node to collapse and expand when clicking the node, while preventing the selection of the parent node. We suggest utilizing the “ExpandOn” property and preventing the selection using the “ValueChanging” event. This will allow the node to expand/collapse when clicked and prevent the parent node from being selected.

Refer to the below code snippet for reference.

….

 

<SfDropDownTree TItem="EmployeeData" TValue="string" Placeholder="Select an employee" Width="500px" ExpandOn="ExpandAction.Click" ValueChanging="OnValueChanging">

    <DropDownTreeField TItem="EmployeeData" DataSource="Data" ID="Id" Text="Name" HasChildren="HasChild" ParentID="PId"></DropDownTreeField>

</SfDropDownTree>

 

@code {

    void OnValueChanging(DdtChangeEventArgs<string> args)

    {

        if (args?.NodeData?.HasChildren == true)

        {

            args.Cancel = true;

        }

    }

 

…

 

Please check the sample and let us know if you need any further assistance.

Sample: attached as zip file.

Best Regards,
Vishwanathan

Attachment: BlazorDropdownTree_f39c8b4d.zip

[Tien Pham]

Hi Vishwanathan,

Thank you for your response. I applied your code, but modified the data slightly as follows:

List<EmployeeData> Data = new List<EmployeeData>
{
    new EmployeeData() { Id = "1", Name = "Steven Buchanan", Job = "General Manager", HasChild = true, Expanded = true },
    new EmployeeData() { Id = "2", PId = "1", Name = "Laura Callahan", Job = "Product Manager" },
    new EmployeeData() { Id = "3", PId = "1", Name = "Andrew Fuller", Job = "Team Lead" },
    new EmployeeData() { Id = "4", PId = "1", Name = "Anne Dodsworth", Job = "Developer" },
    new EmployeeData() { Id = "10", Name = "Lilly", Job = "Developer", HasChild = true },
    new EmployeeData() { Id = "5", PId = "10", Name = "Nancy Davolio", Job = "Product Manager" },
    new EmployeeData() { Id = "6", PId = "10", Name = "Michael Suyama", Job = "Team Lead" },
    new EmployeeData() { Id = "7", PId = "10", Name = "Robert King", Job = "Developer" },
    new EmployeeData() { Id = "11", PId = "10", Name = "Mary", Job = "Developer" },
    new EmployeeData() { Id = "9", PId = "10", Name = "Janet Leverling", Job = "HR" }
};

The code works as expected in terms of the original issue, but a new issue has appeared related to collapsing and re-expanding parent nodes. Here's how to reproduce the issue:

1. Run the code with the modified data above. (Dropdown tree initital like image below)
   
   
2. Click on the parent node Lilly to expand it.
3. Click again on Lilly to collapse it.
4. Click on the parent node Steven Buchanan, and instead of collapsing immediately, it re-expands.

Expected Behavior:

I would like the parent nodes not to re-expand when clicked. In step 4, I expect Steven Buchanan to collapse immediately upon the first click.

Possible Cause:

While testing the collapse and expand functionality, I noticed an inconsistency: sometimes the parent node shows as collapsed, but its child content remains expanded. For example, the arrow icon (red-highlighted) indicates the collapsed state, yet the child content (green-highlighted) is still visible.

I believe this might be causing the re-expand issue mentioned earlier. It seems that, despite the parent node’s state being set to collapse, the UI shows it as expanded. So, when clicking on the node again, it appears to re-expand.

Thank you for your assistance!

[Vishwanathan Muruganantham]

Hi Tien,

Upon further validation, we have considered the “Expand icon not updated properly and parent re expand while collapse the node in Dropdown Tree component” as bug on our end. The fix for this issue will be included in the Volume 3 SP release, planned for mid-November 2024.

Feedback: https://www.syncfusion.com/feedback/62592/expand-icon-not-updated-properly-and-parent-re-expand-while-collapse-the-node-in

Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.

We appreciate your patience.

Regards,
Vishwanathan

[Tien Pham]

thank you

[Tien Pham]

Hi Syncfusion Team,

I’ve encountered another issue related to our previous discussion, specifically when using the search (filter) functionality. With the following data setup:

List<EmployeeData> Data = new List<EmployeeData>

{

    new EmployeeData() { Id = "1", Name = "Steven Buchanan", Job = "General Manager", HasChild = true, Expanded = true },

    new EmployeeData() { Id = "2", PId = "1", Name = "Laura Callahan", Job = "Product Manager" },

    new EmployeeData() { Id = "3", PId = "1", Name = "Andrew Fuller", Job = "Team Lead" },

    new EmployeeData() { Id = "4", PId = "1", Name = "Anne Dodsworth", Job = "Developer" },

    new EmployeeData() { Id = "10", Name = "Lilly", Job = "Developer", HasChild = true },

    new EmployeeData() { Id = "5", PId = "10", Name = "Nancy Davolio", Job = "Product Manager" },

    new EmployeeData() { Id = "6", PId = "10", Name = "Michael Suyama", Job = "Team Lead" },

    new EmployeeData() { Id = "7", PId = "10", Name = "Robert King", Job = "Developer" },

    new EmployeeData() { Id = "11", PId = "10", Name = "Mary", Job = "Developer" },

    new EmployeeData() { Id = "9", PId = "10", Name = "Janet Leverling", Job = "HR" }

};

<SfDropDownTree TItem="EmployeeData" TValue="string" Placeholder="Select an employee" PopupWidth="400px" ExpandOn="ExpandAction.Click" ValueChanging="OnValueChanging"

    AllowFiltering="true">

    <DropDownTreeField TItem="EmployeeData" DataSource="Data" ID="Id" Text="Name" HasChildren="HasChild" ParentID="PId"></DropDownTreeField>

</SfDropDownTree>

Issue: When searching with a keyword that only matches a parent node (without any matching child nodes), the parent node appears in the search results and is selectable. However, I would like the parent nodes to be excluded if none of their child nodes match the search criteria.

Steps to Reproduce:

1. Enter "L" in the search bar.
2. Select the parent node “Lilly.”
   
   
   

Expected Behavior: When performing a search, if a branch has no child nodes matching the search keyword, the parent node should also be excluded from the search results. In this case, the parent node "Lilly" should be removed from the search results (like bellow image).

[Vishwanathan Muruganantham]

Hi Tien,

We have reviewed your query and understand that the parent node should be excluded if it has no matching child. To achieve this, we can use the “Filtering” event, prevent the default filter, and then perform a custom filtering action.

Refer to the code snippet below for reference.

….

 

<SfDropDownTree @ref="sfDropDownTree" TItem="EmployeeData" TValue="string" Placeholder="Select an employee" ExpandOn="ExpandAction.Click" ValueChanging="OnValueChanging"

                AllowFiltering="true" Filtering="OnFilter">

    <DropDownTreeField TItem="EmployeeData" DataSource="FilteredData" ID="Id" Text="Name" HasChildren="HasChild" ParentID="PId"></DropDownTreeField>

 

</SfDropDownTree>

 

@code {

    SfDropDownTree<string, EmployeeData> sfDropDownTree;

    List<EmployeeData> FilteredData;

 

    …..

 

    protected override void OnInitialized()

    {

        FilteredData = Data.ToList();

    }

 

    void OnValueChanging(DdtChangeEventArgs<string> args)

    {

        if (args?.NodeData?.HasChildren == true)

        {

            args.Cancel = true;

        }

    }

 

    // Custom filtering method

    void OnFilter(DdtFilteringEventArgs args)

    {

        args.Cancel = true;

        if (args.Text == "")

        {

            FilteredData = Data.ToList();

        }

        string keyword = args.Text.ToLower();

        // Filter the data based on the keyword

    FilteredData = Data

        .Where(node => (node.Name.ToLower().StartsWith(keyword) && !node.HasChild) ||

                       (node.HasChild && Data.Any(child => child.PId == node.Id && child.Name.ToLower().StartsWith(keyword))))

        .Select(node =>

        {

            if (node.HasChild && Data.Any(child => child.PId == node.Id && child.Name.ToLower().Contains(keyword)))

            {

                node.Expanded = true;

            }

            else

            {

                node.Expanded = false;

            }

            return node;

    }

….

Sample: attached as zip file.

Please check the sample and let us know if you need any further assistance.

Best Regards,
Vishwanathan

Attachment: DDTfilter_c131df3a.zip

[Tien Pham]

      I implemented the filtering functionality as suggested, and it now performs as expected in terms of displaying only relevant child nodes.

      However, when I combine search filtering with collapse/expand actions, it triggers the same collapse/expand issues we previously discussed (and reported in the related feedback: https://www.syncfusion.com/feedback/62592/expand-icon-not-updated-properly-and-parent-re-expand-while-collapse-the-node-in ). Please ensure that the fix for the collapse/expand bug also considers cases involving filtering with search.

Note: i check and link  https://www.syncfusion.com/feedback/62592/expand-icon-not-updated-properly-and-parent-re-expand-while-collapse-the-node-in is dead

[Vishwanathan Muruganantham]

Hi Tien,

We have reviewed your query and understand that you are facing a similar expand/collapse issue with the filtering action. We have included this case in the previous issue. The Feedback portal was previously down due to server issues, but the issue has now been resolved. You can visit the Feedback portal again.

Feedback: https://www.syncfusion.com/feedback/62592/expand-icon-not-updated-properly-and-parent-re-expand-while-collapse-the-node-in

Best Regards,
Vishwanathan

[Tien Pham]

okay thank you  Vishwanathan

[Vishwanathan Muruganantham]

Hi Tien,

Thanks for your patience.

We are glad to announce that our Essential Studio® 2024 Volume 3 Service Pack Release v27.2.2 is rolled out and is available for download under the following link.

https://www.syncfusion.com/forums/195187/essential-studio-2024-volume-3-service-pack-release-v27-2-2-is-available-for-download

The issue where the Expand icon not updated properly and parent re expand while collapse the node in Dropdown Tree component has been resolved in this release. To access this fix, we recommend updating the package to version 27.2.2 We have included a sample in the latest version for your reference.

Sample: attached as zip file.

Feedback link: https://www.syncfusion.com/feedback/62592/expand-icon-not-updated-properly-and-parent-re-expand-while-collapse-the-node-in

Release Notes: We will refresh release notes at earliest.

Root Cause: The issue occurs because ExpandedNodes is not properly updated when the ExpandOn type is set to 'Click' in the Dropdown Tree component.

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

Best regards,

Vishwanathan

Attachment: DropDownTree_27.2.2_b38f2315.zip