Refresh Node

[ashalan]

Greetings,

how would I got about refreshing a node in a tree that is built using LoadOnDemand? (ExpandMode set to ServerSideCallback)

The idea is to have a Node labelled 'refresh' as the first childnode of the node that is supposed to be refreshed. Like so:
-NodeToBeRefreshed
---Refresh
---ChildNode1
---ChildNode2
---ChildNode3

Clicking the Refresh Node should depopulate the 'NoteToBeRefreshed' and repopulate it.

I tried doing it server side by hooking up the click event of the node, check if it is a refresh node (which is marked as such in its value property), clear all childnodes of the parent node and then populate the parent node again.

However, two issues arise:
a. the image of all nodes that have been populated on demand beforehand vanish
c. the page is postbacked (I could live with that) and the tree is scrolled back to its top

Of course, a client side solution would be just as welcome (if not even more so).
What I came up with so far is the following:

    function OnClientNodeClicked(treeView, args)
    {
        var node = args.get_node();
        // we only refresh a node, if its value is 'refresh'
        if(node.get_value() == "refresh" )
        {
            RefreshNode(node);
            return;
        }
    }
    function RefreshNode(node)
    {
        // get the parent node
        var parentNode = node.get_parent();
        // clear the parent node of all its child nodes
        var tree = node.get_treeView();
        tree.trackChanges();
        parentNode.get_nodes().clear();
        tree.commitChanges();
        //  collapse the parent node
        parentNode.collapse();
    }

The missing part here, however, is how to mark the parent node as not yet expanded (so to trigger the ServerSideCallback OnExpand event), plus the client side expanding of the parent node to trigger that event.

Thanks in advance

[ashalan]

Hmm,

is having the ability to refresh a node so exotic? Maybe I am completely wrong, but isn't the purpose of populating nodes on demand via Ajax to be able to display data that isn't always the same? If the underlying data was static, why would anybody bother to populate on demand? And if the underlying data is not static, isn't the need for a node refresh nothing but natural?

[Nikolay]

Hello ashalan,

Attached, please find a small and running project on the matter.

To accomplish the task I did the following:

1. I hooked on the OnClientNodeCollapsed event
2. I cleared the nodes there and reset the ExpandMode of the node to ServerSideCallback

Thus, the NodeExpand event is always fired - upon each expand of the node.

Please download the files and give them a go.

Hope this helps.

Kind regards,
Nick
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[ashalan]

Thanks for the demo, with a few tweaks it is now working as intended.

For those interested:

For nodes that need the ability to allow the user to refresh its contents I did the following:

1. Add a node with the .Text attribute set to 'Refresh' below the node that needs refresh capability, like so:

+ ParentNode
|-- Refresh
|-- Subnode1
|-- Subnode2

2. Hooked the OnClientNodeClicked event
3. For the OnClientNodeClicked javascript event handler I use the following code:

    function OnClientNodeClicked(treeView, args)
    {
        var node = args.get_node();
        if(node.get_text().toLowerCase() == "refresh")
        {
            var parent = node.get_parent();
            treeView.trackChanges();
            parent.get_nodes().clear();
            parent.set_expanded(false);
            treeView.commitChanges();
            parent.set_expandMode(Telerik.Web.UI.TreeNodeExpandMode.ServerSideCallBack);

            parent.expand();
        }
    }

Works like a charm :)

Btw, how do I mark a thread as answered?