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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Dynamically Show/Hide Nodes

Thread ID:

Created:

Updated:

Platform:

Replies:

146219 Jul 26,2019 02:13 AM UTC Aug 13,2019 12:16 PM UTC Blazor 6
loading
Tags: TreeView
Dominick Marciano
Asked On July 26, 2019 02:13 AM UTC

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

Kanagambigai Murugan [Syncfusion]
Replied On 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. 
 
Regards, 
Kanagambigai M. 


Axel Draws
Replied On August 1, 2019 07:31 AM UTC

Hello Kanagambigai,

Is the fix still planned to be released today?

Thanks

Kanagambigai Murugan [Syncfusion]
Replied On August 2, 2019 03:33 PM UTC

Hi Dominick, 

We are glad to inform that our latest (17.2.0.40-beta) 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> 
</EjsTreeView> 
<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. 

Regards, 
Kanagambigai M. 

 


Dominick Marciano
Replied On 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.

Dominick Marciano
Replied On 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

Kanagambigai Murugan [Syncfusion]
Replied On 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 (17.2.0.40) 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. 

Regards, 
Kanagambigai M. 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon