This is a migrated thread and some comments may be shown as answers.

attach key and value pair to node

18 Answers 834 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Hendra
Top achievements
Rank 1
Hendra asked on 03 Sep 2011, 08:26 PM
Is there a way to attach key value pair to node like you have in Treeview of ASP.NET MVC?
Something like this
new TreeViewItem
                                {
                                    Text = item.FirstName + " " + item.LastName,
                                    Value = item.EmployeeID.ToString(),
                                    LoadOnDemand = item.Employees.Count > 0,
                                    Enabled = true
                                };

18 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 07 Sep 2011, 02:03 PM
Hi Hendra,

This functionality is currently unsupported, but we are slowly progressing towards it. Currently, you can work-around that by disabling the encoding and outputting the value field manually, i.e.
{ text: "Foo<input name='nodeValue' value='3' />", encoded: false }

All the best,
Alex Gyoshev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Martin
Top achievements
Rank 1
answered on 04 May 2012, 02:51 PM
Hi, 
Im trying to use the treeview as a menu, and when a user clicks an item, i need i.e an ID of the clicked item.
Will this workaround allow med to add iD's to the datasource for each item? 
And the big question: How will i get the ID when a user clicks an item?

With this structure: { text: "Foo<input type='hidden' name='nodeValue' value='3' />", encoded: false }

can i bind an alert event when selected? 
Kindda like this?

function onSelect(e) { alert("Selected: " + treeview.text(e.nodeValue)); }

Help is much appreciated :)
Kind regards
Martin
0
Jay
Top achievements
Rank 1
answered on 04 May 2012, 03:27 PM
Also VERY interested in this. 

Basically, I already have the "id" in the datasource.  I just need to know how to access it to do something with the onSelect event.

0
Martin
Top achievements
Rank 1
answered on 04 May 2012, 04:03 PM
I managed to get it to work like this:

<ul id="treeview">
<li data-expanded="true" data-id="1"><span class="k-sprite html"></span>Item 1
<ul>
<li data-id="2"><span class="k-sprite html"></span>Item 1.1</li>
<li data-id="3"><span class="k-sprite html"></span>Item 1.2</li>
<li data-id="4"><span class="k-sprite html"></span>Item 1.3</li>
</ul>
</li>
</ul>

And then accessing it like this:

treeview = $("#treeview").kendoTreeView({
dragAndDrop: true,
select: function(e) {
alert("selected id: " + $(e.node).data("id"));
}
});

Now I only need a way to get the current structure - i.e. as an array or similar so I can save it in the database.
Any ideas on how to iterate through the treeview?

Kind regards
Martin
0
Alex Gyoshev
Telerik team
answered on 07 May 2012, 09:44 AM
Hello Martin,

var treeview = $("#treeview").data("kendoTreeView");
function treeToJson(root) {
    return root.children().map(function() {
        return {
            text: treeview.text(this),
            items: treeToJson($(this).children(".k-group"))
        };
    }).toArray();
}
var json = treeToJson(treeview.element);


All the best,
Alex Gyoshev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Martin
Top achievements
Rank 1
answered on 10 May 2012, 09:57 AM
Hi Alex, 

Thanks for your script :)

Unfortunately it doesn't work for me - i get an
 Uncaught TypeError: Cannot read property 'element' of undefined 

i suspect it has something to do with me initializing the treeview from a ul/li list?
I've checked that its not a typo and that I actually get the tree object, because I can use it to select an item in the tree using 

var treeview = $("#"+treeviewId).data("kendoTreeView");
var item = $('li[data-id="foo"]');
treeview.select(item);

but it seems I cant get the elements. 
Any help?

I really need some way of saving the structure and priorities and i would be perfekt to get a json-string, as I can loop through it and update database with the current structure.

Help is deeply appreciated,
Kind regards
Martin
0
Alex Gyoshev
Telerik team
answered on 10 May 2012, 10:10 AM
Hello Martin,

The snippet works in the console in the treeview / basic usage demo. Observe what are the changes in your scenario in order to get to the problem. A probable cause is that the widget is not initialized when you run the script, or that the ID attribute does not match.

Regards,
Alex Gyoshev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Martin
Top achievements
Rank 1
answered on 10 May 2012, 12:17 PM
Hi again,
thanks for your patience :) 
I still cant get it to work, and i know that i get the object just fine - i can console.log(treeview.element); perfectly :)
Ill try and paste all my code here, and I hope you can help me little.

<html>
<head>
<!-- Stylesheets -->
<link href="/_css/kendo.common.min.css" rel="stylesheet" />
    <link href="/_css/kendo.weblogik.css" rel="stylesheet" />

<!-- Js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
<script src="/_js/kendo.web.min.js"></script>
<script>
function initTreeview() {
var treeview = $("#menuTreeView").kendoTreeView({
dragAndDrop: true,
select: function(e) { alert("You selected id: "+$(e.node).data("id")); },
drop: function(e){ showMeTheJson(); }
});
}

function treeToJson(root) {
return root.children().map(function() {
return {
text: treeview.text(this),
items: treeToJson($(this).children(".k-group"))
};
}).toArray();
}

function showMeTheJson() {
var treeview = $("#menuTreeView").data("kendoTreeView");
//console.log(treeview.element); //This works - I can see the object just fine
var theElusiveJson = treeToJson(treeview.element);
alert(JSON.stringify(theElusiveJson));
}
</script>
</head>
<body onload="initTreeview();">
<ul id="menuTreeView">
<li data-expanded="true" data-id="1"><span class="k-sprite html"></span>Item 1
<ul>
<li data-id="2"><span class="k-sprite html"></span>Item 1.1</li>
<li data-id="3"><span class="k-sprite html"></span>Item 1.2</li>
<li data-id="4"><span class="k-sprite html"></span>Item 1.3</li>
</ul>
</li>
<li data-id="5"><span class="k-sprite html"></span>Item 2</li>
</ul>
</body>
</html>

Kind regards, and once again thanks,
Martin
0
Alex Gyoshev
Telerik team
answered on 10 May 2012, 01:05 PM
Hello Martin,

Do you get a JavaScript error when you run the code? It might hint where the problem lies :)

For example, the treeview variable in the treeToJson method might be undefined. It is defined globally in the snippet that I posted.

Kind regards,
Alex Gyoshev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Martin
Top achievements
Rank 1
answered on 10 May 2012, 01:35 PM
Yes I do get a javascript error :)
And it is the treeview variable that is undefined, but how do I fix that?
My application does not allow me to have a globally defined treeview - i.e. I need to initiate it via the initTreeView function.

Any ideas on how the treeToJson could be rewritten so it works?

Sorry if I don't fully understand the treeview/object :/

Kind regards,
Martin


0
Alex Gyoshev
Telerik team
answered on 10 May 2012, 01:50 PM
Hello Martin,

Here's an updated snippet.

function treeToJson(treeview, root) {
    root = root || treeview.element;
    return root.children().map(function() {
        var result = { text: treeview.text(this) },
            items = treeToJson(treeview, $(this).children(".k-group"));

        if (items.length) {
            result.items = items;
        }

        return result;
      }).toArray();
}

function showMeTheJson() {
    var treeview = $("#menuTreeView").data("kendoTreeView");
    var json = treeToJson(treeview);
    alert(JSON.stringify(json));


Regards,
Alex Gyoshev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Martin
Top achievements
Rank 1
answered on 14 May 2012, 04:56 PM
Hi Alex, 

Just wanted to thank you so much - of course that worked beautifully :)
This way the tree can be populated with id's and saved again on dragend, thus creating a realtime menustructure for my users to manage :)

Cheers & regards,
/Martin
0
Gang
Top achievements
Rank 1
answered on 06 Aug 2012, 03:31 PM
Hi Alex,

I tried the code you posted on May 10, 2012 but It didn't work for me.  It returned "[Object { text=""}]".  Here are the code I used, please advise.  Thanks in advance!

 function submit() {
    var treeview = $("#treeview-left").data("kendoTreeView");
    var json = treeToJson(treeview);
    console.log(json);
 }
 
 function treeToJson(treeview, root)
 {
     root = root || treeview.element;
     return root.children().map(function() {
        var result = { text: treeview.text(this) },
             items = treeToJson(treeview, $(this).children(".k-group"));
 
        if (items.length) {
             result.items = items;
        }

        return result;
       }).toArray();
 }
0
Joe
Top achievements
Rank 1
answered on 30 Aug 2012, 09:33 AM
Hi Gang,

I just ran into the same problem you comment. I had to modify the function a little to get it working:

function treeToJson(treeview, root) {
    root = root || treeview.element.children(".k-group");
    return root.children().map(function() {
        var result = { text: treeview.text(this).replace(/\n|\t/g,'').trim() };
            items = treeToJson(treeview, $(this).children(".k-group"));
        if (items.length) {
            result.items = items;
        }
        return result;
      }).toArray();
}

Joe Bordes
TSolucio



0
matthew
Top achievements
Rank 1
answered on 10 Sep 2012, 12:28 AM
How can I also get the value of  the id?

I tried the following code but it failed.

    function treeToJson(treeview, root) {
        root = root || treeview.element.children(".k-group");
        return root.children().map(function () {
            var result = { text: treeview.text(this).replace(/\n|\t/g, '').trim(), id: treeview.data("id", this) };
            items = treeToJson(treeview, $(this).children(".k-group"));
            if (items.length) {
                result.items = items;
            }
            return result;
        }).toArray();
    }


0
Joe
Top achievements
Rank 1
answered on 10 Sep 2012, 09:12 AM
Hi Matthew,

I'm not quite sure what you are looking for. In the context of the line you modified "this" is the DOM element of the tree node. That is, a <li>. That <li> does not have any id assigned, if it did you could get it using normal jquery methods.

If you are trying to associate information to each tree node and retrieve it here, what I did was use a template for the tree node creation (there is an example in the demos) and then use jquery to pickup the info

Joe
TSolucio
0
matthew
Top achievements
Rank 1
answered on 14 Sep 2012, 07:42 AM
Hi Joe,

Thanks for you reply.

Is it possible to bind text, id and other attributes to the treeview?

For example, when the treeview json datasource is posted to the server side, is it possible to get the checkbox status or id attribute of each node?

Thanks
0
Joe
Top achievements
Rank 1
answered on 14 Sep 2012, 08:17 AM
Yes, this is easy to do using templates:

KendoUI Treview Templates Demo

Joe
TSolucio
Tags
TreeView
Asked by
Hendra
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Martin
Top achievements
Rank 1
Jay
Top achievements
Rank 1
Gang
Top achievements
Rank 1
Joe
Top achievements
Rank 1
matthew
Top achievements
Rank 1
Share this question
or