attach key and value pair to node

19 posts, 0 answers
  1. Hendra
    Hendra avatar
    5 posts
    Member since:
    Sep 2012

    Posted 03 Sep 2011 Link to this post

    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
                                    };
  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 07 Sep 2011 Link to this post

    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!
  3. Martin
    Martin avatar
    7 posts
    Member since:
    May 2012

    Posted 04 May 2012 Link to this post

    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
  4. Jay
    Jay avatar
    9 posts
    Member since:
    Dec 2011

    Posted 04 May 2012 Link to this post

    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.

  5. Martin
    Martin avatar
    7 posts
    Member since:
    May 2012

    Posted 04 May 2012 Link to this post

    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
  6. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 07 May 2012 Link to this post

    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!
  7. Martin
    Martin avatar
    7 posts
    Member since:
    May 2012

    Posted 10 May 2012 Link to this post

    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
  8. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 10 May 2012 Link to this post

    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!
  9. Martin
    Martin avatar
    7 posts
    Member since:
    May 2012

    Posted 10 May 2012 Link to this post

    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
  10. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 10 May 2012 Link to this post

    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!
  11. Martin
    Martin avatar
    7 posts
    Member since:
    May 2012

    Posted 10 May 2012 Link to this post

    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


  12. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 10 May 2012 Link to this post

    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!
  13. Martin
    Martin avatar
    7 posts
    Member since:
    May 2012

    Posted 14 May 2012 Link to this post

    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
  14. Gang
    Gang avatar
    1 posts
    Member since:
    Aug 2012

    Posted 06 Aug 2012 Link to this post

    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();
     }
  15. Joe
    Joe avatar
    6 posts
    Member since:
    Dec 2011

    Posted 30 Aug 2012 Link to this post

    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



  16. matthew
    matthew avatar
    10 posts
    Member since:
    Feb 2007

    Posted 09 Sep 2012 Link to this post

    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();
        }


  17. Joe
    Joe avatar
    6 posts
    Member since:
    Dec 2011

    Posted 10 Sep 2012 Link to this post

    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
  18. matthew
    matthew avatar
    10 posts
    Member since:
    Feb 2007

    Posted 14 Sep 2012 Link to this post

    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
  19. Joe
    Joe avatar
    6 posts
    Member since:
    Dec 2011

    Posted 14 Sep 2012 Link to this post

    Yes, this is easy to do using templates:

    KendoUI Treview Templates Demo

    Joe
    TSolucio
Back to Top