Get selected node databound item id

10 posts, 1 answers
  1. Andrei
    Andrei avatar
    2 posts
    Member since:
    Mar 2012

    Posted 24 Jul 2012 Link to this post

    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.
  2. Answer
    Constantine
    Constantine avatar
    9 posts
    Member since:
    Apr 2012

    Posted 24 Jul 2012 Link to this post

    Try this:

    var data = $('treeview').data('kendoTreeView').dataItem(e.node);
     
    console.log(data.id);
  3. Andrei
    Andrei avatar
    2 posts
    Member since:
    Mar 2012

    Posted 25 Jul 2012 Link to this post

    Thank you! Exactly what I needed!
  4. Nathan
    Nathan avatar
    23 posts
    Member since:
    Jul 2012

    Posted 25 Mar 2014 in reply to Constantine Link to this post

    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).
  5. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1221 posts

    Posted 19 Oct 2016 Link to this post

    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.
     
  6. Tayger
    Tayger avatar
    109 posts
    Member since:
    Jan 2015

    Posted 26 Jun Link to this post

    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

     

     

  7. Tayger
    Tayger avatar
    109 posts
    Member since:
    Jan 2015

    Posted 26 Jun in reply to Tayger Link to this post

    On trial2 I also tried: 

    selItem.text = 'set this text';

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

    But no success, just nothing happens

  8. Tayger
    Tayger avatar
    109 posts
    Member since:
    Jan 2015

    Posted 26 Jun in reply to Tayger Link to this post

    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!

     

     

  9. Tayger
    Tayger avatar
    109 posts
    Member since:
    Jan 2015

    Posted 26 Jun in reply to Tayger Link to this post

    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');

     

  10. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1221 posts

    Posted 27 Jun Link to this post

    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.
Back to Top