Changing Text of a Node

11 posts, 0 answers
  1. Devon
    Devon avatar
    11 posts
    Member since:
    Jul 2012

    Posted 03 Aug 2012 Link to this post

    I have a simple onsuccess script for a MVC call
    <script type="text/javascript">
        function Success(packageid, name) {
             
            $.ajax({
                url: "treeview/Index",
                dataType: 'html',
                type: 'Get',
                success: function (r) {
                    var treeview = $("#PackageNavigationTreeView").data("kendoTreeView");
                    var node = treeview.findByValue("'" + packageid + "'")
                    treeview.select(node);
                },
                error: function () {
                    alert('Error');
                }
            });
        }
     
    </script>

    After success I "re-select" the selected node but I want to be able to change the text of the node as well.

    node.text("new name") will rename the node but erase the "children".

    Is there a simple way to rename the node?

  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 06 Aug 2012 Link to this post

    Hello Devon,

    Use the text method of the treeview object.

    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!
  3. mitch
    mitch avatar
    5 posts
    Member since:
    Aug 2010

    Posted 08 Aug 2012 Link to this post

    Alex, doesn't the text method of the tree-view object just get the text rather than allow someone to rename the text node itself?

    The docs say :-
    "Gets the text of a node in a TreeView."

    I too am looking for a way to rename text nodes.

  4. Rob
    Rob avatar
    4 posts
    Member since:
    Aug 2012

    Posted 08 Aug 2012 Link to this post

    Agreed, I've hacked away at this but cannot find a solution.

    The obvious thing would be to do something like:

    $('#tree').data('kendoTreeView').select().text('New Text');

    This changes the text but messes up the node so it no longer seems to register as a tree node properly an is not selectable.

    I've also tried in vain to update the underlying data that the tree is bound to but that doesn't seem to work either.

    A solution would be very welcome, pretty please? :)
  5. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 09 Aug 2012 Link to this post

    I am sorry for misleading you. The method allows you to change the node text after the 2012.2.712 build, which is after the official release (it works in the internal builds).

    @Rob: That is close, though you might want to set the text of the .t-in element -- this way you won't break the tree structure.

    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!
  6. Eric
    Eric avatar
    1 posts
    Member since:
    Mar 2012

    Posted 11 Aug 2012 Link to this post

    Hi Alex,

    I notice, the offical API does not provide method to change the node text. (only provide method to get it)

    Does it really work now?

    I have tried, but failed!
    Maybe my code is wrong.
    And I wonder how to change the node text.

    My code is:
    var tree = $("#divTree").data("kendoTreeView");
    var node = tree.select();
    tree.text(node, "New Text");

    Waiting for you reply, thank you very much!

    Eric
  7. Devon
    Devon avatar
    11 posts
    Member since:
    Jul 2012

    Posted 14 Aug 2012 Link to this post

    It's been about 2 weeks is this a bug or is there a solution to changing the node text.

  8. mitch
    mitch avatar
    5 posts
    Member since:
    Aug 2010

    Posted 14 Aug 2012 Link to this post

    From what Alex has said

    "The method allows you to change the node text after the 2012.2.712 build"

    This build hasn't been released to the community yet, so its a new feature in the new (to be released build). If you have a support agreement or paid access to the KendoUI Suite you can download it from your "my downloads" under "internal builds"


    I think the three options are :-

    1. Wait until its released
    2. If your premium use a internal build
    3. Attempt  possible work around until this is released such as ... 
    node.find(">div>.k-in").contents(":last").replaceWith("new text")
  9. Devon
    Devon avatar
    11 posts
    Member since:
    Jul 2012

    Posted 17 Aug 2012 Link to this post

    Sorry, I missed Alex's response scrolling through on my phone, thanks for the clarification.

    I upgraded to the new kendoui.aspnetmvc.2012.2.815.commercial and the text(node, "newtext") functions as it should except when I'm trying to display a "div" inside the text. When I append a new node I am able to specify encoded:false to get the html string to "Render"

    var newNode = treeView.append({ text: jsonResult.text, id: jsonResult.package.PackageID, spriteCssClass: "tree-icon-package", encoded: false }


    When I try to do the same with the .text() function it just displays the markup
    treeview.text(node, jsonResult.text);

    Is there a way to specify encoded: false to get my div to display?

     

  10. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 22 Aug 2012 Link to this post

    Hello Devon,

    I am afraid the TreeView does not have such option. It always encodes the nodes. You need to manually manually append the li element whcih basically has the following structure.
    <li class="k-item k-last" data-uid="052c7333-f8fe-4106-bfd7-9ed97aee2e45">
        <div class="k-bot">
             <span class="k-in">insert markup here</span>
        </div>
    </li>


    All the best,
    Petur Subev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Farshid
    Farshid avatar
    5 posts
    Member since:
    Apr 2008

    Posted 26 Dec 2013 Link to this post

    I did it !

     function refreshTreeNode(data)
        {
            var currentText = $("#treeviewFiles").data("kendoTreeView").select().find('span.k-in').first().text();
            var node = $("#treeviewFiles").data("kendoTreeView").select().find('span.k-in').first();
            var nodeSpan = $("#treeviewFiles").data("kendoTreeView").select().find('span.k-in > span.k-sprite').first();
            node.text('');
            node.append(nodeSpan);
            node.append(data);
        }
Back to Top