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

Angular Treeview with a Template

Thread ID:

Created:

Updated:

Platform:

Replies:

118984 May 1,2015 02:01 PM UTC May 7,2015 12:52 PM UTC JavaScript 5
loading
Tags: ejTreeView
Rob ONeill
Asked On May 1, 2015 02:01 PM UTC

Hi,
Can anyone explain how set a Template in the TreeView when using angular, that will reference values like e-fields-text ?

Cheers ... Rob.

Sasikala Nagarajan [Syncfusion]
Replied On May 4, 2015 01:20 PM UTC

Hi Rob,

Thanks for using Syncfusion products,

We have analysed your requirement and prepared the simple sample based on your requirement.

Please get the sample from below location

Sample

In given sample we have formed the treeview items in div element and referred this template formation in e-template property in angular treeview.

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 May 5, 2015 08:52 AM UTC

Hi,
Thanks, that's worked great.

In the treeview we are also using checkboxes with the top node in the list being a Select All checkbox. We want to be able to check that checkbox, and either check / uncheck all the others in the list. I have attached the nodeCheck nodeUncheck events to the angular controller, but updating the $scope datasource doesn't make any difference. Can you help? 
I have attached a project with code that I am trying.

Cheers ... Rob.

Attachment: TreeviewAngular_50b1d03a.zip

Sasikala Nagarajan [Syncfusion]
Replied On May 6, 2015 01:02 PM UTC

Hi Rob,

Thanks for the update,

We have analyzed your requirement and we can achieve your requirement using our existing public method checknode and unchecknode. These methods used to check/uncheck the selected item in treeview control.

Please get the sample from below location

Sample

Please refer the below code snippet

$scope.instanceItemChecked1 = function (args) {

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

if (args.id == "1") {

angular.forEach($scope.instanceTreeViewList1, function (item) {

if (item.id != "1") {

item.isChecked = true;

obj.checkNode($('li#' + item.id));

}

});

$scope.$apply();

}

};

$scope.instanceItemUnchecked1 = function (args) {

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

if (args.id == "1") {

angular.forEach($scope.instanceTreeViewList1, function (item) {

if (item.id != "1") {

item.isChecked = false;

obj.uncheckNode($('li#' + item.id));


}

});

$scope.$apply();
}

};


Please use given code snippet to achieve the reported requirement and let us know if you further queries.

Regards,

Sasikala Nagarajan

Rob ONeill
Replied On May 6, 2015 02:19 PM UTC

Hi,
Thank for your update.
Is there no other way of achieving this other than use the DOM inside an Angular Controller as this goes against the whole purpose of AngularJS controllers which should not interact with any DOM object. I expected that there would be some sort of 2 way binding with angular that would be updated be setting values in the scope of the controller.

Cheers ... Rob.

Sasikala Nagarajan [Syncfusion]
Replied On May 7, 2015 12:52 PM UTC

Hi Rob,

Sorry for the inconvenience caused. Currently there is no support for deep watch functionality in ejAngular. Already we have logged this as a feature request (“Deep watch functionality in ej angular”) in our database. A support incident to track the status of this feature 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


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

;