How to use fetched data in TreeViewTemplates

[MikeR]

I'm fetching data from a serverside controller using an UrlAdaptor. How can I use the returned data in a TreeViewTemplates.

I tried this but it does not work:

<EjsTreeView id="tree" ModelType="@modelType" LoadOnDemand="true">

            <TreeViewTemplates>

                <NodeTemplate>

                    <div>

                        <img class="eimage" src="@context.IconURL" alt="employee" />

                        <span class="treeName">@context.Name</span>

                    </div>

                </NodeTemplate>

            </TreeViewTemplates>

Code:

public StructureItem modelType = new StructureItem();

    public class StructureItem

    {

        public string StructureNodeID { get; set; }

        public string ParentID { get; set; }

        public string Name { get; set; }

        public string IconURL { get; set; }

        public bool HasChildren { get; set; }

        public bool expanded { get; set; }

    }

Best Regards

Mike

[Kanagambigai Murugan]

Hi Mike, 

  

Sorry for the inconvenience caused. 

  

Currently we have issues in TreeView templates while enabling LoadOnDemand feature. We have logged a bug report regarding this and we are working on this with high priority. We will fix this issue in our upcoming patch release which is expected to be rolled out on 1^st August, 2019. Until then, we appreciate your patience. 

  

You can track the status of this bug report in the following link: 

https://www.syncfusion.com/feedback/7628/treeview-template-not-rendering-properly-while-enabling-load-on-demand 

  

Please let us know if you have any queries. 

  

Regards, 

Kanagambigai M. 

[Kanagambigai Murugan]

Hi Mike, 

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 render the TreeView using templates with LoadOnDemand enabled. 

 

<EjsTreeView  TValue="StructureItem" ModelType="@modelType"> 

    <TreeViewFieldsSettings TValue="StructureItem" Query="new ej.data.Query().addParams('ParentID','5')" Id="employeeID" Text="firstName" HasChildren="employeeID"> 

            <EjsDataManager Url="/api/Default" Adaptor="Syncfusion.EJ2.Blazor.Adaptors.UrlAdaptor" CrossDomain="true"></EjsDataManager> 

            <TreeViewFieldChild TValue="StructureItem" Id="orderID" Text="firstName" ParentID="employeeID" Expanded="expanded"> 

                <EjsDataManager Url="api/Child" Adaptor="Syncfusion.EJ2.Blazor.Adaptors.UrlAdaptor" CrossDomain="true"></EjsDataManager> 

            </TreeViewFieldChild> 

        </TreeViewFieldsSettings> 

        <TreeViewTemplates> 

                <NodeTemplate> 

                    @{ 

                        var templateData = (@context as StructureItem); 

                        <div> 

                            <div class="treeviewdiv"> 

                                <div style="float:left"> 

                                    <span class="treeName">@templateData.FirstName</span> 

                                </div> 

                            </div> 

                        </div> 

                    } 

                </NodeTemplate> 

            </TreeViewTemplates> 

</EjsTreeView> 

Sample: https://www.syncfusion.com/downloads/support/forum/146080/ze/TreeView1723169115  

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.