1. Home
  2. Forum
  3. Blazor
  4. Treeview: Expand and Collapse by level.

Treeview: Expand and Collapse by level.

Why in the code below only the collapse button
it works?

I want to be able to expand and collapse by  Type level.

Code:

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons
@using  System.Collections.ObjectModel
@using System.Diagnostics


<SfTreeView TValue="Peoples" @ref="tree" EnablePersistence="true" ShowCheckBox="true">
    <TreeViewFieldsSettings TValue="Peoples" Id="Id" DataSource="@MyData" Text="Name" ParentID="ParentId" HasChildren="HasSubFolders" Expanded="Expanded"></TreeViewFieldsSettings>
</SfTreeView>
<SfButton Content="Expand Level B" @onclick="ExpandLevelB"></SfButton>
<SfButton Content=" Collapse Level B" @onclick="CollapseLevelB"></SfButton>
@code{
    SfTreeView<Peoples> tree;
    public class Peoples
    {
        public string Id { get; set; }
        public string ParentId { get; set; }
        public string Name { get; set; }
        public string Type { get; set; }
        public bool Expanded { get; set; }
        public bool HasSubFolders { get; set; }
    }

    ObservableCollection<Peoples> MyData = new ObservableCollection<Peoples>();
    protected override void OnInitialized()
    {
        base.OnInitialized();
        MyData.Add(new Peoples
        {
            Id = "1",
            Name = "Main",
            HasSubFolders = true,
            Type = "A",
            Expanded = false
        });
        MyData.Add(new Peoples
        {
            Id = "2",
            ParentId = "1",
            Name = "AM1",
            Type = "B",
            HasSubFolders = true,
            Expanded = false
        });
        MyData.Add(new Peoples
        {
            Id = "3",
            ParentId = "1",
            Name = "AM2",
            Type = "B",
            HasSubFolders = true,
            Expanded = false
        });
        MyData.Add(new Peoples
        {
            Id = "4",
            ParentId = "1",
            Name = "AM3",
            Type = "B",
            HasSubFolders = true,
            Expanded = false
        });
        MyData.Add(new Peoples
        {
            Id = "5",
            ParentId = "2",
            Name = "AF1",
            Type = "C",
            HasSubFolders = true,
            Expanded = false
        });
        MyData.Add(new Peoples
        {
            Id = "6",
            ParentId = "3",
            Name = "AF2",
            Type = "C",
            HasSubFolders = true,
            Expanded = false
        });
        MyData.Add(new Peoples
        {
            Id = "7",
            ParentId = "4",
            Name = "AF3",
            Type = "C",
            HasSubFolders = true,
            Expanded = false
        });
        MyData.Add(new Peoples
        {
            Id = "8",
            ParentId = "5",
            Name = "Member 1",
            Type = "D",
            Expanded = false
        });
        MyData.Add(new Peoples
        {
            Id = "9",
            ParentId = "6",
            Name = "Member 2",
            Type = "D",
            Expanded = false
        });
        MyData.Add(new Peoples
        {
            Id = "10",
            ParentId = "7",
            Name = "Member 3",
            Type = "D",
            Expanded = false
        });
    }


    public List<string> array = new List<string>();
    public String[] str;

    public async Task ExpandLevelB()
    {
     
        int x = MyData.Count;
        int y = 0;
   
        while (y < x)
        {

            if (MyData.ElementAt(y).Type == "B")
            {
                array.Add(MyData.ElementAt(y).Id.ToString());

            }
            y = y + 1;

        }
        str = array.ToArray();
        await tree.ExpandAll(str);
       
    }
 public async Task CollapseLevelB()
    {
     
        int x = MyData.Count;
        int y = 0;
   
        while (y < x)
        {

            if (MyData.ElementAt(y).Type == "B")
            {
                array.Add(MyData.ElementAt(y).Id.ToString());

            }
            y = y + 1;

        }
        str = array.ToArray();
        await tree.CollapseAll(str);
       
    }


3 Replies 1 reply marked as answer
IL Indhumathy Loganathan Syncfusion Team April 26, 2021 09:08 AM UTC

Hi Marcelo, 
 
Greetings from Syncfusion support. 
 
We have run the TreeView sample in latest package version 19.1.57. In your shared code, you have been expanding and collapsing the set of nodes that are available in level B. We are able to expand and collapse the B level nodes in the sample through button click. Please find the sample and video demonstration from below link. 
 
 
 
Also, we have noticed that you have been using EnablePersistence property which would maintain the state of the TreeView on page reload. If we have misunderstood, please share more details regarding your requirement with TreeView. Whether you want to expand the level B nodes on initial rendering or while clicking the button. Else, do you want to expand the level B nodes when the parent node is in collapsed state. 
 
Please let us know if you need any further assistance.

Regards, 
Indhumathy L 


MO Marcelo Oliveira Santos April 26, 2021 11:52 AM UTC

Hi Indhumathy,

Thanks for your quick reply.
Please see the video I sent you.

Expand should be triggered when everything is collapsed.

Thanks,
Marcelo




Attachment: treeview_recorder_2d008348.rar

SS Sharon Sanchez Selvaraj Syncfusion Team April 27, 2021 02:12 PM UTC

Hi Marcelo, 
 
We have checked with your provided video and modified the previous sample similar to your requirement. For this scenario, we have expanded the level B when clicking the corresponding expand button. And for collapsing B, the node gets collapsed when clicking the required button. However as you have enabled EnablePersistence, expanding and collapsing the Levels A and C manually would remain in the same state which was given. 
 
Refer to the modified code below 
 
public async Task ExpandLevelB() 
    { 
 
        int x = MyData.Count; 
        int y = 0; 
 
        while (y < x) 
        { 
 
            if (MyData.ElementAt(y).Type == "B" && MyData.ElementAt(y).Id == "3") 
            { 
                array.Add(MyData.ElementAt(y).Id.ToString()); 
                array.Add(MyData.ElementAt(y).ParentId.ToString()); 
            } 
            y = y + 1; 
 
        } 
        str = array.ToArray(); 
        await tree.ExpandAll(str); 
    } 
    public async Task CollapseLevelB() 
    { 
        int x = MyData.Count; 
        int y = 0; 
        while (y < x) 
        { 
       if (MyData.ElementAt(y).Type == "B" && MyData.ElementAt(y).Id == "3") 
            { 
                array.Add(MyData.ElementAt(y).Id.ToString()); 
 
            } 
            y = y + 1; 
        } 
        str = array.ToArray(); 
        await tree.CollapseAll(str); 
 
    } 
 
Refer to the sample. 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
 
Sharon Sanchez S. 


Marked as answer
Loader.
Up arrow icon