Treeview: Expand and Collapse by level.

Question

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>

@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);

}

Sharon Sanchez Selvaraj · Accepted Answer

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. 
 
https://www.syncfusion.com/downloads/support/directtrac/general/ze/TreeView_Sample-974096434.zip 
 
Please get back to us if you need further assistance. 
 
Regards, 
 
Sharon Sanchez S.

Indhumathy Loganathan · Answer

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. 
 
Sample: https://www.syncfusion.com/downloads/support/forum/164856/ze/TreeView438720305 
 
Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TreeViewRecording1214299307 
 
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

Marcelo Oliveira Santos · Answer

Hi Indhumathy,Thanks for your quick reply.Please see the video I sent you.Expand should be triggered when everything is collapsed.Thanks,MarceloAttachment: treeview_recorder_2d008348.rar