Dynamically Show/Hide Nodes

[Dominick Marciano]

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]

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 1^st August 2019. We appreciate your patience until then. 

 

You can track the status of the bug report via the following link: 

https://www.syncfusion.com/feedback/7783/property-binding-is-not-working-for-complex-property 

 

Please let us know if you have any concerns. 

 

Regards, 

Kanagambigai M. 

[Axel Draws]

Hello Kanagambigai,

Is the fix still planned to be released today?

Thanks

[Kanagambigai Murugan]

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; 

    } 

Sample:  https://www.syncfusion.com/downloads/support/forum/146219/ze/DynamicTree1670904355  

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

Release notes: https://ej2.syncfusion.com/blazor/documentation/release-notes/17.2.40/ 

Online Samples:  https://ej2.syncfusion.com/aspnet-core-blazor/TreeView/DefaultFunctionalities 

Documentation: https://ej2.syncfusion.com/blazor/documentation/treeview/getting-started/?no-cache=1 

Please let us know if you need any further assistance. 

Regards, 

Kanagambigai M. 

 

[Dominick Marciano]

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]

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]

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" /> 

<script src="https://cdn.syncfusion.com/ej2/17.2.40/dist/ej2.min.js"></script> 

<script src="https://cdn.syncfusion.com/ej2/17.2.40/dist/ejs.interop.min.js"></script> 

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, 

    }); 

 

Sample: https://www.syncfusion.com/downloads/support/forum/146219/ze/DynamicTree_Modified-1833107668 

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

Regards, 

Kanagambigai M.