Treeview load data on external event with UrlAdaptor

[Unknown]

Hello

I am using ASP.NET CORE EJ 2 version 16.1.0.37 (nuget package).

How can I load the Treeview data on an external event (using UrlAdaptor)?

I tried the following:

Do not set any data source for the Treeview.

On the external event, set the data source of the Treeview.

Cause the Treeview to load the data.

The Treeview:

@Html.EJS().TreeView("myTreeviewId").Fields(fields =>

{

     fields.Id("nodeId").Text("nodeText");

}).Render()

The external event:

...

var tree = document.getElementById("myTreeviewId").ej2_instances[0];

tree.fields.dataSource = new ej.data.DataManager({

     url: "myUrl",

     adaptor: 'UrlAdaptor'

});

tree.refresh();

...

However, when I tried this I always get an error when "tree.refresh()" is called.

split-button.js:294 Uncaught TypeError: this.adaptor.processQuery is not a function

    at e.executeQuery (split-button.js:294)

    at t.setDataBinding (split-button.js:294)

    at t.reRenderNodes (split-button.js:294)

    at t.onPropertyChanged (split-button.js:294)

    at t.e.dataBind (split-button.js:294)

    at t.dataBind (split-button.js:294)

    at t.onDriverDropDownChange (Driver:174)

    at e.notify (split-button.js:294)

    at t.e.trigger (split-button.js:294)

    at t.detachChangeEvent (split-button.js:294)

How can I fix this?

OR is there a better way to reload the Treeview's data on an external event?

Kind regards

Phil

[Ashokkumar Balasubramanian]

Hi Phil, 

 

We have checked your provided code block and your reported problem. The reported problem due to on directly bind the dataSource on TreeView component. If you want to dynamically bind the dataSource, we should completely change the overall fields property, please check the below code block. 

 

[Script] 

 

var data = new DataManager({ 

          url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc', 

          adaptor: new ODataAdaptor, 

          crossDomain: true, 

      }); 

      // Set queries to filter and fetch remote data 

      var query= new Query().from('Employees').select('EmployeeID,FirstName,Title').take(5); 

       

      var query1= new Query().from('Orders').select('OrderID,EmployeeID,ShipName').take(5); 

       

      var fields = { dataSource: data, query: query, id: 'EmployeeID', text: 'FirstName', hasChildren: 'EmployeeID', 

            child: { dataSource: data, query: query1, id: 'OrderID', parentID: 'EmployeeID', text: 'ShipName' } 

      }; 

      var tree = document.getElementById("tree").ej2_instances[0]; 

      tree.fields = fields; 

 

Note: No need to bind the Fields column on initial rendering. 

 

For your reference, we have prepared the demo sample, please find the it in below location. 

 

https://plnkr.co/edit/HnjtHIEezJhcnVRZrDRP?p=preview 

 

Please let us know, if you have any concern on this. 

 

Regards, 

Ashokkumar B. 

[Unknown]

Thanks, this helped me a lot.

The loading of the data works as expected.

[Piramanayagam Ramakrishnan]

Hi Phil, 

 

We glad to hear that, reported requirement is achieved in TreeView component. Please let us know further assistance on this. 

 

Regards, 

Piramanayagam R