how to set custom values to ej-tree control

[Gomtesh]

<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]

<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]

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