how to set custom values to ej-tree syncfusion control

Question

<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" />

 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 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 selected function like "args.url" when i click on that node in treeview

like

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

}

score 0 · Answer 1 · answered Jun 02 '15 at 11:17

We can access the selected node record in the nodeSelect as follows.

 $scope.selected = function(args){
                var getdata = function (data, id) {
                    var len = data.length;
                    while (len--) {
                        if (data[len]["id"] == id)
                            return data[len]["url"];
                    }                        
                }
                console.log(getdata(args.model.fields.dataSource, +args.id));
            }

Please refer the below link for arguments obtained on nodeSelect event.

http://help.syncfusion.com/UG/JS_CR/ejTreeView.html#event:nodeSelect

above code not working it gives error like Uncaught TypeError: Cannot read property 'id' of undefined for if (data[len]["id"] == id) — Gomtesh Hatgine, Jun 02 '15 at 12:04

Hari Krishnan · Answer 2 · 2015-06-02T13:26:30.587

First we need to map the attribute "url" to the property "linkAttribute" as shown below. This property will add the specified attributes to Tree nodes anchor element

<div>
<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" e-fields-linkattribute="url" />
</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.

        $scope.selected = function (args) {
            console.log($(args.currentElement).find("a").attr("href"));
        }

This will work for you.

how to set custom values to ej-tree syncfusion control

2 Answers2