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

how to set custom values to ej-tree control

Thread ID:

Created:

Updated:

Platform:

Replies:

119288 Jun 2,2015 05:38 AM UTC Jun 3,2015 12:27 PM UTC JavaScript 2
loading
Tags: ejTreeView
Gomtesh
Asked On June 2, 2015 05:38 AM UTC




<div ng-controller="SidebarController">
    <a id="treeView" ej-treeview e-fields-datasource="dataList" e-fields-id="id" e-fields-parentid="pid" e-fields-text="name" e-datasource="localdata" e-fields-haschild="hasChild" e-fields-expanded="expanded" e-fields-imageurl="imageUrl" e-nodeselect="selected" />
</div>




var ListViewData = [
                 { id: 1, name: "Fiction Book Lists", hasChild: true, expanded: true },
                 { id: 2, pid: 1, name: "Fiction Book1", url: '../view/fictionbooks/FictionBook1.html' },
                 { id: 3, pid: 1, name: "Fiction Book2" },
                 { id: 4, name: "Mystery Book Lists", hasChild: true, expanded: true },
                 { id: 5, pid: 4, name: "Mystery Book1" , url: '../view/mysterybooks/MysteryBook1.html' },
                 { id: 6, pid: 4, name: "Mystery Book2" },
                 { id: 7, name: "Horror Novels", hasChild: true },
                 { id: 8, pid: 7, name: "Horror Book1" },               
                 { id: 9, name: "Novel Lists", hasChild: true },
                 { id: 10, pid: 9, name: "Novel Book1" }];


In above json data    { id: 2, pid: 1, name: "Fiction Book1", },etc i have to pass one custome url string shown in above json data  that should be accessible in selecte function like "args.url"
 when i click on that node in treeview



 

Gomtesh
Replied On June 2, 2015 05:54 AM UTC




<div ng-controller="SidebarController">
    <a id="treeView" ej-treeview e-fields-datasource="dataList" e-fields-id="id" e-fields-parentid="pid" e-fields-text="name" e-datasource="localdata" e-fields-haschild="hasChild" e-fields-expanded="expanded" e-fields-imageurl="imageUrl" e-nodeselect="selected" />
</div>




var ListViewData = [
                 { id: 1, name: "Fiction Book Lists", hasChild: true, expanded: true },
                 { id: 2, pid: 1, name: "Fiction Book1", url: '../view/fictionbooks/FictionBook1.html' },
                 { id: 3, pid: 1, name: "Fiction Book2" },
                 { id: 4, name: "Mystery Book Lists", hasChild: true, expanded: true },
                 { id: 5, pid: 4, name: "Mystery Book1" , url: '../view/mysterybooks/MysteryBook1.html' },
                 { id: 6, pid: 4, name: "Mystery Book2" },
                 { id: 7, name: "Horror Novels", hasChild: true },
                 { id: 8, pid: 7, name: "Horror Book1" },               
                 { id: 9, name: "Novel Lists", hasChild: true },
                 { id: 10, pid: 9, name: "Novel Book1" }];


In above json data    { id: 2, pid: 1, name: "Fiction Book1", },etc i have to pass one custome url string shown in above json data  that should be accessible in selecte function like "args.url"
 when i click on that node in treeview



 

 $scope.selected = function (args) {
//here i have to access that url string        

    }

Sasikala Nagarajan [Syncfusion]
Replied On June 3, 2015 12:27 PM UTC

Hi Gomtesh,

Thanks for using Syncfusion products,

We have analyzed your requirement. We would like let you know that, we can achieve your requirement using our existing property link attribute.
This property will add the specified attributes to Tree nodes anchor element.

Please refer the below code snippet:

[html]

<div id="TreeView" ej-treeview e-showcheckbox="true" e-fields-datasource="instanceTreeViewList1" e-fields-id="id" e-fields-parentid="parentId" e-fields-text="name" e-fields-haschild="hasChild" e-fields-expanded="isExpanded" e-fields-ischecked="isChecked" e-fields-linkattribute="url" e-nodeselect="loadpage"></div>



Then in 'nodeselect' event argument, we can able to get the selected node. From the selected node, we can find the anchor element to get the URL.

Please refer the below code snippet to get the url from the anchor tag.

[script]

$scope.selected = function (args) {

alert($(args.currentElement).find("a").attr("rel='nofollow' href"));

}


Also, if you want to prevent the page navigation while clicking on node( link attribute added anchor tag), then you can prevent the anchor tag'sdefault action in nodeClick event.

Please refer the below code snippet

[script]


function nodeclick(args) {

args.event.preventDefault();

}


Please check with the below code snippets and let us know if you have 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

;