Read selected node's values from kendo tree view?

Question

I have a kendo treeview having a node with {id, value}. and I want to get selected node's id and value when I click on a button.

How can I get it? Is there any inbuilt functions there to get it?

Here is my sample code:

$("mytree").kendoTreeView({
                dataSource: mydata,
                dataTextField: "Name",
                dataValueField: "Id",
            });

ryan · Accepted Answer · 2013-08-30T14:09:04.713

22

Use the .select() method. Be sure to look at the other methods available as well.

var tv = $('.mytree').data('kendoTreeView'),
    selected = tv.select(),
    item = tv.dataItem(selected);
if (item) {
  alert('Selected item: ' + item.Name + ' : ' + item.Id + ' (uid: ' + item.uid + ')');
} else {
  alert('Nothing selected');
}

Fiddle here

edited Aug 30 '13 at 14:09

answered Aug 30 '13 at 13:48

ryan

6,541
5
43
68

Hey Ryan, thanks for your reply. But here it is giving null for item.text and item.id is giving some Guid. I'm expecting the exact text and value which is binded through datasource. – jestges Aug 30 '13 at 14:04
My text/value fields in the example didn't exactly match yours. See my update and updated fiddle – ryan Aug 30 '13 at 14:09
Hey Ryan, I dont know what I'm doing wrong. I followed the same way, but it is giving tv.dataItem is not a function error. – jestges Aug 30 '13 at 14:20
Hey Ryan, I'm sorry I missed something. It is working as expected. Thanks – jestges Aug 30 '13 at 14:26

score 5 · Answer 2 · answered Mar 27 '14 at 16:31

5

**

var tv = $("#treeview-right").data("kendoTreeView");
    var selectedNode = tv.select();
    var item = tv.dataItem(e.node);
    item.text will give you the text of the selected node.

**

answered Mar 27 '14 at 16:31

satish

61
2
4

Can you edit your post and add some description why you answered with this code so people can vote for you?? – Mahdi Alkhatib Oct 27 '15 at 11:50
e would be undefined if you do not tie into the event handler. @PAULDAWG I will provide a better answer. – Tom Stickel Apr 04 '16 at 02:27
Works with kendoTreeList as well – 130nk3r5 Jul 27 '17 at 07:47

score 3 · Answer 3 · answered Apr 04 '16 at 02:38

I disagree with the selected answer because depending on what you actually DO, you can be 1 step behind the actually selected value.

If you had some simple delete function then this type of code works fine

var treeview = $("#treeview").data("kendoTreeView");
var selectedNode = treeview.select(),
item = treeview.dataItem(selectedNode);

However, once you start playing with the treeview more you will end up regretting that as I have.

Best practice is to tie to the event handler

e.g.

var treeview = $("#treeview").kendoTreeView({
    expanded: true,
    select: onSelect,
    ....        
}).data("kendoTreeView");

select function

function onSelect(e) {

    var treeview = $("#treeview").data("kendoTreeView");
    var item = treeview.dataItem(e.node);

     if (item) {
         console.log('Selected item: ' + item.whatever + ' | Id = ' + item.Id + ' | Type = ' + item.Type);
         var someVariable = item.whatever;
     } else{
        console.log('nothing selected');
     }

Read selected node's values from kendo tree view?

3 Answers3