Bind Angular TreeView to RemoteData

[Rob ONeill]

Hi,

I am trying to create an angular TreeView, and populate it with data from a web api controller. I have tried using an angular controller / factory combination and an angular controller / datamanager combination. Neither works although the datamanager scenario gets some of the data needed.

Please see uploaded project for code

Cheers ... Rob.

Attachment: TreeviewAngular_c2ebcd9c.zip

[Sasikala Nagarajan]

Hi Rob,

Thanks for using Sycnfusion products,

We have analyzed your requirement and we have prepared the sample based on your requirement.
Please get the sample from below location
Sample

In this sample, we have get the data from controller using $http.get method in angular factory.

[script]

userApp.factory('userFactory', function ($http) {

return {

getFormData: function (callback) {

$http.get('api/AngularForm').success(callback);

}

}
})

In success event of get method, we have updated the treeview fields. Please refer the below code snippet

[script]

userFactory.getFormData(function (results) {

$scope.dataList = results.localData;

obj = $("#treeView").data("ejTreeView");

obj.option("fields", { id: "id", text: "name", parentId: "pid", hasChild: "hasChild", dataSource:$scope.dataList })
})

Please check the given sample let us know if it helps. If we misunderstood your queries, please provide more details about the requirement that will be easy for us to provide the exact solution
Please let us know if you have further queries,
Regards,
Sasikala Nagarajan

[Rob ONeill]

Hi,

Thank you for the sample. We have managed to get the angularjs webapi working in our project, but I think we may have spotted a defect with the angularjs treeview. In both our project and your sample above the keyboard interaction does not work correctly.

If you add checkboxes to the Treeview when a node is selected you cannot use the space bar to check the checkbox. Also the down / up arrows key jump 2 nodes instead of the single one. This seems to happen when you use the factory webapi call and then populate the datasource. Everything is ok when the datasource is populated by static data in the controller.

Can you let me know if you can replicate this issue, and if there is a work around.

Cheers ... Rob.

[Rob ONeill]

To see the above error I have attached a project that contains 2 indentical treeviews, one populate with hardcoded data from the angular controller, and one with data from the web api. You should be able to compare and see the defect quite easily here.

Again using the keyboard you cannot check the checkbox using the space key, and and the up/down arrows jump 2 nodes instead of one.

Cheers ... Rob.

Attachment: TreeviewAngular_3ed99c8c.zip

[Sasikala Nagarajan]

Hi Rob,

Thanks for the update,

We were able to reproduce the problem and we considered “keyboard interaction does not work correctly when the data source populated dynamically” as bug. A support incident to track the status of this defect has been created under your account. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

For your convenience we have prepared the workaround solution to resolve the reported issue.

By refreshing (unbind then bind) the events, after setting the fields property in treeview will resolve the issue.

Please find the below code snippet:

function getFormData() {

userFactory.getFormData(function (data) {

$scope.dataList = data.localData;

obj = $("#treeView").data("ejTreeView");

obj.option("fields", { id: "id", text: "name", parentId: "pid", hasChild: "hasChild", dataSource: $scope.dataList });

obj._off(obj.element, 'keydown');

obj._on(obj.element, "keydown", obj._KeyPress);

})

}

Please use highlighted code in your project and let us know if you have any further queries,

Regards,

Sasikala Nagarajan