Get selected node databound item id

5 Answers 2496 Views
TreeView
Andrei
Top achievements
Rank 1
Andrei asked on 24 Jul 2012, 09:09 AM
I have a treeview build with load on demand from a datasource that is a list of items, every item has an id. I want to send to the server using ajax the id of the selected item in the tree.
--- View code ---
@(Html.Kendo().TreeView()
        .Name("treeview")
        .DataTextField("Name")
        .DataSource(dataSource => dataSource
            .Read(read => read
                .Action("OmanagerItems", "TaskManager")
            )
        )
        .Events(events => events
            .Select("onSelect")
            .Expand("onExpand"))
    )
function onSelect(e) {
    var itemId = e.node.getAttribute("data-uid");
   // this is where i want to get the id of the selected item
}
 
// here i want to tell the server that i'm working on a task
function changeWorkingStatus(docId) {
    $.ajax({
        url: "/TaskManager/ChangeWorkingStatus",
        type: "POST",
        success: function (data) {
            updateInterface(data.IsWorking);
        }
    });
}

I'll appreciate any help, thank you.

5 Answers, 1 is accepted

Sort by
0
Accepted
Constantine
Top achievements
Rank 1
answered on 25 Jul 2012, 01:11 AM
Try this:

var data = $('treeview').data('kendoTreeView').dataItem(e.node);
 
console.log(data.id);
Andrei
Top achievements
Rank 1
commented on 25 Jul 2012, 06:25 AM

Thank you! Exactly what I needed!
Nathan
Top achievements
Rank 1
commented on 25 Mar 2014, 01:08 PM

This is somewhat close to what I'm trying to accomplish.  I'm trying to create a treeview and when you select a node, it will call an action in the controller.  The screen refreshes with data in a grid.  I just need to figure out how when you select a node, it calls the action in the controller.  This isn't necessarily an ajax call for a view will be return with the appropriate data that was sent in (node Id).
Tayger
Top achievements
Rank 1
Iron
commented on 26 Jun 2017, 07:54 PM

I am trying to access the selected item or node (I don't care) to set a new text on it. The following both trials run into errors:

// Trial 1
var mytree = $('#dialogtreediv').data('kendoTreeView').dataItem(e.node);
console.log (mytree); // -> undefined
mytree.text('New text');  // -> TypeError: undefined is not an object (evaluating 'mytree.text');

 

// Trial 2
var mytree = $("#dialogtreediv").data("kendoTreeView");
var selected = mytree.select();
var selItem = mytree.dataItem(selected);
 
console.log (selItem); // -> Found: proper output, so its there!
 
selItem.text('New text');  // -> TypeError: selItem.text is not a function. (In 'selItem.text('New text')', 'selItem.text' is "Leerer Text")

('Leerer Text' is the set text of the selected node)

Whats wrong with those trials and why is the function text() not working? 

Regards

 

 

Tayger
Top achievements
Rank 1
Iron
commented on 26 Jun 2017, 08:05 PM

On trial2 I also tried: 

selItem.text = 'set this text';

.... instead of selItem.text('New text');

But no success, just nothing happens

Tayger
Top achievements
Rank 1
Iron
commented on 26 Jun 2017, 08:57 PM

Another trial (not working):

$("#dialogtreediv").data("kendoTreeView").select(".k-first");

 

var treeview = $("#dialogtreediv").data("kendoTreeView");
console.log (treeview.dataSource.data()[0].text); // -> Its there: current text in output
treeview.dataSource.data()[0].text = 'new text';
treeview.dataSource.read();

 

I don't give up, will find a hack!

 

 

0
Ivan Danchev
Telerik team
answered on 19 Oct 2016, 02:21 PM
Hello,

This post is to prevent any confusion with regard to getting a proper reference to the TreeView. The correct selector to be used in the example Constantine posted is "#treeview" as the widget will be rendered with id="treeview" : 
var data = $('#treeview').data('kendoTreeView').dataItem(e.node);


Regards,
Ivan Danchev
Telerik by Progress
 
Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
 
0
Tayger
Top achievements
Rank 1
Iron
answered on 26 Jun 2017, 11:15 PM

Found a proper solution to set a next in a treenode, no answer required:

var dialogTree = $("#dialogtreediv").data("kendoTreeView");
var dialogItem = dialogTree.select();
// text function requires a second parameter
dialogTree.text(dialogItem, 'New text');

 

0
Ivan Danchev
Telerik team
answered on 27 Jun 2017, 07:46 AM
Hello Farai,

As you have found out the TreeView's text() ​method can be used to get or set a node's text. You can find more information about this method in the API documentation.

Regards,
Ivan Danchev
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Mike
Top achievements
Rank 1
answered on 03 Apr 2020, 08:27 PM

If you are in the onTreeSelect it looks like this...

function onTreeSelect(e) {
var data = this.dataItem(e.node);
currentFolder = data.id;
}

Tags
TreeView
Asked by
Andrei
Top achievements
Rank 1
Answers by
Constantine
Top achievements
Rank 1
Ivan Danchev
Telerik team
Tayger
Top achievements
Rank 1
Iron
Mike
Top achievements
Rank 1
Share this question
or