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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Bind Angular TreeView to RemoteData

Thread ID:

Created:

Updated:

Platform:

Replies:

118957 Apr 27,2015 11:11 AM UTC Apr 30,2015 11:45 AM UTC JavaScript 4
loading
Tags: ejTreeView
Rob ONeill
Asked On April 27, 2015 11:11 AM UTC

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 [Syncfusion]
Replied On April 28, 2015 01:16 PM UTC

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
Replied On April 29, 2015 02:40 PM UTC

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
Replied On April 30, 2015 07:40 AM UTC

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 [Syncfusion]
Replied On April 30, 2015 11:45 AM UTC

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


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.

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

;