Changing Text of a Node

[Devon]

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?

[Alex Gyoshev]

Hello Devon,

Use the text method of the treeview object.

Kind regards,
Alex Gyoshev
the Telerik team

[mitch]

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.

[Rob]

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? :)

[Alex Gyoshev]

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

[Eric]

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

[Devon]

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

[mitch]

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")


[Devon]

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?

 

[Petur Subev]

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

[Farshid]

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