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

Dynamically Show/Hide Nodes

I am using a tree view that is up to three layers deep on a server-side Blazor site.  I have a requirement where I need to either show/hide the root nodes under specific conditions/user interactions on the page.  I have tried various solution such as changing the data source, calling the refresh method on the tree view and tree view fields settings controls, and calling StateHasChanged, but it doesn't update the tree.

I can only get it to display all the data if I generate the list during the OnInit method or have it as a hard-coded field.  Is there any way to dynamically update the tree view from methods within the page itself?

Thank You

6 Replies

KM Kanagambigai Murugan Syncfusion Team July 26, 2019 12:42 PM UTC

Hi Dominick, 
Sorry for the inconvenience caused. 
Currently, we have known bug while changing the TreeView’s datasource dynamically. We are working on this with high priority. We will resolve this and will provide you the updated sample on or before 1st August 2019. We appreciate your patience until then. 
You can track the status of the bug report via the following link: 
Please let us know if you have any concerns. 
Kanagambigai M. 

AD Axel Draws August 1, 2019 07:31 AM UTC

Hello Kanagambigai,

Is the fix still planned to be released today?


KM Kanagambigai Murugan Syncfusion Team August 2, 2019 03:33 PM UTC

Hi Dominick, 

We are glad to inform that our latest ( NuGet release has been rolled out and your reported defect has been resolved in this version. We have prepared a sample to change the datasource dynamically in the button click event. Please refer to the code snippet 

<EjsTreeView @ref="tree" TValue="HardDrive"> 
    <TreeViewFieldsSettings TValue="HardDrive" Id="NodeId" Text="NodeText" HasChildren="HasChild" ParentID="ParentId" DataSource="@Drive" Expanded="Expanded"></TreeViewFieldsSettings> 
<button class="btn btn-primary" @onclick="@DynamicData">Change DataSource</button> 
void DynamicData() 
        this.Drive = Drive1; 

Since we have some major changes in this release, kindly go through the following release notes 

Please let us know if you need any further assistance. 

Kanagambigai M. 


DM Dominick Marciano August 13, 2019 03:49 AM UTC

I am having issues with getting the dynamic data to load. I have a method call BuildCategories which gets the data and then builds a temporary list:

 var categories = await AssemblyService.GetAssemblyCategories();
 var tempCategories = new List();
 tempCategories.Add(new CategoryItem()
                Id = "0",
                Text = "All",
                Expanded = true,
                HasChildren = true

At the end of the method it sets the DataSource:

Categories = tempCategories

And my TreeView is defined as:


Now I have to call the build method from the OnAfterRender method because I have to retrieve some information from session storage and need to use JsInterop.  If I don't put StateHasChanged() at the end of the build method, nothing shows.  If I do, the I get the following error message:

this.adaptor.processQuery is not a function
TypeError: this.adaptor.processQuery is not a function
    at e.executeLocal (https://cdn.syncfusion.com/ej2/17.2.34/dist/ej2.min.js:1:1117777)
    at Object.a [as getDataSource] (https://cdn.syncfusion.com/ej2/17.2.34/dist/ej2.min.js:1:1126627)
    at t.getGroupedData (https://cdn.syncfusion.com/ej2/17.2.34/dist/ej2.min.js:1:2482634)
    at t.setRootData (https://cdn.syncfusion.com/ej2/17.2.34/dist/ej2.min.js:1:2475129)
    at t.setDataBinding (https://cdn.syncfusion.com/ej2/17.2.34/dist/ej2.min.js:1:2474270)
    at t.reRenderNodes (https://cdn.syncfusion.com/ej2/17.2.34/dist/ej2.min.js:1:2517477)
    at t.onPropertyChanged (https://cdn.syncfusion.com/ej2/17.2.34/dist/ej2.min.js:1:2545443)
    at t.e.dataBind (https://cdn.syncfusion.com/ej2/17.2.34/dist/ej2.min.js:1:396519)
    at t.dataBind (https://cdn.syncfusion.com/ej2/17.2.34/dist/ej2.min.js:1:450253)
    at t.e.setProperties (https://cdn.syncfusion.com/ej2/17.2.34/dist/ej2.min.js:1:395782)

However, if I call the BuildCategories method from the OnInit method, then it works fine.  I should mention that even though the method is called from the OnAfterRender method, I do have a boolean to prevent the method from recalling the function indefinitely.

DM Dominick Marciano August 13, 2019 04:03 AM UTC

I took a look at the sample you provided and modified it slightly so it kind of reflects what I'm doing.  The only change I made was that Drive1 list object is setup in the OnAfterRender method; everything else was kept the same.  This slight changes causes the TreeView to not display correctly and multiple console errors are shown in Chrome when the button is clicked.  Any guidance/explanation would be greatly appreciated.

Thank You

Attachment: DynamicTree_Modified_94231d94.zip

KM Kanagambigai Murugan Syncfusion Team August 13, 2019 12:16 PM UTC

Hi Dominick, 

Thanks for the update. 

We have validated the “this.adaptor.processQuery is not a function”  error message. We suspect that you may use outdated scripts in your application. Kindly ensure whether you are using updated scripts and Nuget ( in your application. 

<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/17.2.40/material.css" rel="stylesheet" /> 

And also we have validated the attached sample. In that we recommend you initialize the Drive1 inside the OnAfterRender method as per the following code snippet. 
protected override void OnAfterRender() 
    Drive1 = new List<HardDrive>(); 
    // Dynamic DataSource 
    Drive1.Add(new HardDrive 
        NodeId = "01", 
        NodeText = "Local Disk (E:)", 
        HasChild = true, 

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

Kanagambigai M. 

Live Chat Icon For mobile
Up arrow icon