1. Home
  2. Forum
  3. Blazor
  4. Select and expand all parent nodes based on the value assigned as "Id" when using DataBinding

Select and expand all parent nodes based on the value assigned as "Id" when using DataBinding

Hi!

We are using the SfTreeView component (version 18.1). 

Let me explain what we try to do.

We have a tree loaded with several thousand items, which are all related using a ParentId. 
We are using a Scoped variable to hold data, this contains the current item that we are viewing. We want this Id to be selected (and the parent nodes should be expanded) when this variable changes.
For this, we have a event handler set up on this "Data" class. When the Id variable changes, it calls all event handlers that are attached.
The component that has our TreeView attaches a event handler which does get called properly. At that point, we want to find the corresponding node in the tree, expand all parent nodes and select the target node.

Our tree is set up like this:

<SfTreeView TValue="TreeItemViewModel" @ref="Tree">
        <TreeViewEvents NodeSelected="NavigateToElement" TValue="TreeItemViewModel" />
        <TreeViewFieldsSettings TValue="TreeItemViewModel" Id="Id" ParentID="ParentId" Text="Name" HasChildren="HasChildren" Tooltip="Stereotype" DataSource="this.TreeViewItems">
        </TreeViewFieldsSettings>
</SfTreeView>


Then we have the code that is in the page:
@code {
    public SfTreeView<TreeItemViewModel> Tree { get; set; }

    public List<TreeItemViewModel> TreeViewItems { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        this.TreeViewItems = await this.TreeViewController.GetTreeView();
    }

    protected override void OnInitialized()
    {
        this.PortalData.OnChange += async () => await UpdateTreeForNewItem();
    }

    public void Dispose()
    {
        this.PortalData.OnChange -= async () => await UpdateTreeForNewItem();
    }

    public async Task UpdateTreeForNewItem() {
        // When this.PortalData.CurrentId changes, this method gets called properly, as it should.
        // Now, "this.PortalData.CurrentId" contains the ID of the data bound element (typeof TreeItemViewModel). How do we find this target node in the tree and expand all parent nodes?
    }
}

I have tried using this.Tree.GetNode(this.PortalData.CurrentId). It does return a node but all values are empty.

Short question:
We have a treeview that is databound to a list of TreeItemViewModel. We want to find the tree node based on TreeItemViewModel.Id and expand all parent nodes so the treeview is accurate when the active item is changed (by other causes than the tree itself). Is this possible?

Could you please provide me a solution or workaround to accomplish what we try to do?

Thanks!

9 Replies
SP Sowmiya Padmanaban Syncfusion Team March 27, 2020 08:41 AM UTC

Hi Jaco,  
 
Greetings from Syncfusion support. 
 
Query1 -  Fetch the Data. 
 
We have checked your reported query. We suspect that your requirement is to fetch the particular data based on Node Id. In TreeView component, you can fetch the particular data using  getTreeData() , getNode() method. 
 
Refer the below code snippet. 
public async Task  click() 
    { 
        var text = await this.tree.GetTreeData(MyFolder[0].Id); 
        var nodeDetails =  await this.tree.GetNode(MyFolder[0].Id); 
    } 
 
 
Query2 – Expand all the Nodes 
 
If you want to expand all the Nodes in Treeview Component. You can use ExpandAll() method of Treeview component. Refer the below code snippet. 
 
  public async Task  click() 
    { 
      // Expand all the nodes in TreeView component. 
        this.tree.ExpandAll(); 
   } 
 
 
Refer the below sample for your reference. 
 
If we misunderstood your requirement. Can you please share the additional details regarding your requirement. It will be helpful for us to provide you the prompt solution needed. 
 
1.      If possible reproduce the issue in attached sample. 
2.      If possible, share us a video or pictorial representation sample of your expected requirement. 
 
Please let us know if you have any concerns. 
 
Regards,  
Sowmiya.P 



JD Jaco de Vries March 27, 2020 12:00 PM UTC

Hi,

Thank you for your response. I have found out that we are indeed able to find the element using that way. However there is one problem: GetNode() only seems to work properly when the node is visible (e.g. it's parent is expanded). When the tree item is not visible (because the tree wasn't expanded) it will return a Node object but all of the values are "" and False.

Is it possible to get the node even though it is not visible? Our entire tree is loaded once the page renders but it is entirely collapsed because it is too large (currently running a database as source which has over 48.000 nodes). So once the page is loaded, the data source contains all items but they are simply not visible yet because the tree is collapsed.

Our main goal is to select the node and expand all of it's parents. We basically have an event where we want a specific node to be selected in the tree.
We do not want to expand the tree in it's entirety because that would be too large.

In short:
GetNode() only seems to work when the tree is expanded far enough so the node is visible on the screen.
When the node is not visible (yet) because the tree wasn't expanded enough, GetNode() will return a object but all values are either "" or false.

Thanks!



JD Jaco de Vries March 27, 2020 01:18 PM UTC

I have modified the project you supplied to reproduce the issue. For more explaination please also see my previous post.

Thanks!

Attachment: BlazorApp2_c5e7fb96.zip

SP Sowmiya Padmanaban Syncfusion Team March 30, 2020 10:30 AM UTC

Hi Jaco,  
 
Greetings from Syncfusion support. 
 
Query 1 – GetNode does not return the nodeDetails. 
 
We have checked your reported problem that getNode() does not return the node details. GetNode method returns the node details only if the node are present in DOM. To achieve your requirement, we suggest you to use getTreeData() method  to fetch the node details. 
 
GetTreeData() – It fetches all the nodeDetails specified in the Datasource. 
 
Refer the below code snippet. 
   var text = await this.tree.GetTreeData(“05”); 
 
Query2 – Expand all the parent node of particular node. 
 
Yes, it is possible to achieve in TreeView component. You can fetch the parentId of the particular node until then parentId is null. Pass the value in ExpandAll() method. It expand the parent nodes of the particular child node. 
 
Refer the below code snippet. 
  public async Task  click() 
    { 
      // pass the particular child id in check method. 
        this.check("5"); 
    } 
    public async Task check( string parentId) 
    { 
       if (parentId != null) 
        { 
           //Get the nodeDetails of the particular id. 
            var text = await this.tree.GetTreeData(parentId); 
            // Fetch the parent id of the particular node. 
            var parentId1 = text[0].ParentId; 
            // Add all the Parent Id values in a list. 
            array.Add(parentId1); 
            // Pass the parent Id to fetch the corresponding node Parent Id details  
            this.check(parentId1);           
        } 
     // expand all the parent Items in Corresponding Node 
      this.tree.ExpandAll(array); 
 
    } 
 
 
Refer the below sample link for your reference. 
 
Please let us know, if you have any concerns. 
 
Regards,  
Sowmiya.P 



JD Jaco de Vries March 30, 2020 01:07 PM UTC

Hi,

Thank you, that worked perfectly! We are almost there.
One more question, can you please explain how to select a node programmatically? I have tried two things but none of them worked:

var node = this.Tree.GetNode("5");
node.Selected = true;

-- and --

this.Tree.SelectedNodes = new string[] { "5" };

I want the node to be selected (and highlighted like it was selected).

Are we doing something wrong?

Thanks.

MK Muthukrishnan Kandasamy Syncfusion Team March 31, 2020 06:49 AM UTC

Hi Jaco, 
 
Sorry for the inconvenience. 
 
Currently we are having issue with in SelectedNodes property in TreeView control. The fix for this issue will be included in the upcoming volume release which is will be rolled out first week of April 2020. 
 
 
Once, the fix is included we will provide the solution to meet your requirement. Please be patience until then.  
 
 
Regards, 
Muthukrishnan K  


SP Sowmiya Padmanaban Syncfusion Team April 6, 2020 08:42 AM UTC

Hi Jaco,  
 
We are glad to announce that our Essential Studio 2020 Volume 1 release v18.1.0.42  is rolled out and is available for download under the following link. 
 
 
As promised, we have included a fix for “Dynamically select the TreeView node”. To access this fix, update your (Syncfusion.Blazor) NuGet package to the latest version (V18.1.0.42). 
 
<SfButton OnClick="click" Content="selectedNode"></SfButton> 
    
 public void click() 
    {    
        string[] SelectedNode = new string[] { "3" }; 
        this.tree.SelectedNodes = SelectedNode; 
    } 
 
Refer the sample link below. 
 
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. 
 
 
Regards,  
Sowmiya.P 


JD Jaco de Vries April 23, 2020 07:13 AM UTC

We've got it to work, thank you!

SP Sowmiya Padmanaban Syncfusion Team April 23, 2020 07:24 AM UTC

Hi Jaco,  
  
We are happy to hear that your problem has been resolved. Please let us know, if you need any help from us. We will happy assist you. 
  
Regards,  
Sowmiya.P 


Loader.
Up arrow icon