Call Node Expand on demand more than once

[christopher willis]

I have a treeview, and node expand is handled by server side callback (on demand), which works fine.  What I want to is expand the same node repeatedly with the server side callback, based on some ajax server side events from a different panel.

I have an ajax panel next to the tree view with buttons to add new things to the folders (nodes), which needs to change the contents of a node on the tree. 

Seems if I could add a client side function to force a node to clear children then call server side load on demand, I could call that from ajax1.ResponseScripts.Add(...) repeatedly.

Is this possible?  Thanks.

[Nikolay]

Hi christopher willis,

You could use a pure client-side approach instead:

var node = treeView.get_nodes().getNode(0);        
node.get_nodes().clear();
node.set_expandMode(2);
node.set_expanded(false);
node.set_expanded(true);

Hope this helps.

Greetings,
Nick
the Telerik team

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

[christopher willis]

Thanks, I had to make a few modifications to get it working:

var mTreeNode = null;
function ReExpandNode(nodeval)
{
    var tree = mTree();
    var node = tree.findNodeByValue(nodeval);
    if (node==null) return;

    tree.trackChanges();
    node.get_nodes().clear();
    tree.commitChanges();

    node.set_expandMode(2);
    node.set_expanded(false);
    mTreeNode = node;
    window.setTimeout(NodeReExpandCallback, 300);

}

function NodeReExpandCallback()
{
    if (mTreeNode==null) return;
    mTreeNode.set_expanded(true);
    mTreeNode = null;
}

The tree.trackchanges() was necessary or else it showed 5 copies of the node children.

It also didn't work until I added the window.setTimeout(..).  That may be because I called it from server side:
ajax1.ResponseScripts.Add('ReExpandNode...

[Nikolay]

Hi christopher willis,

Thanks for sharing your approach. I am sure it will help other community members.

Regards,
Nick
the Telerik team

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

[Srujana]

Hi Telerik team,

I am trying to refresh the treenode(that is loaded on demand),  I have a treeview on left panel that display the treestructure with 5 levels(are loaded on demand using serversidecallback) and Gridview on right panel that dispaly list of nodes(with details on each node in treeview), the grid is dispalyed on node click event of the treeview, Grid has the capability to edit/ add new so the user can edit existing node or create new node in a modal window. Everytime there is a edit/create upon closing modal window I refresh both the Grid and Treeview(only selected node) using a Javascript function that is called on 'onClose' of modal window(which is a Radwindow).
Grid part is working fine, but the treenode is not clearing the old items, and keeps adding nodes everytime there is a refresh. I am using the same logic that is used by post below, I am seeing the duplicates. I am attaching a screenshot for reference. Here is my serverside load on demand and javascript that I am using to refresh the nodes and grid.

private static void PopulateNodeOnDemand(RadTreeNodeEventArgs e, string level, TreeNodeExpandMode expandMode)
      {
          int parentID = Convert.ToInt32(e.Node.Value);
          IEnumerable<TreeNodeData> results = null;
          if (level == "1")
          {
              results = TaskProData.Get.TreeView.Units.BySite(parentID);
          }
          else if (level == "2")
          {
              results = TaskProData.Get.TreeView.Routes.ByUnit(parentID);
          }
          else if (level == "3")
          {
              results = TaskProData.Get.TreeView.Stops.ByRoute(parentID);
          }
          else if (level == "4")
          {
              results = TaskProData.Get.TreeView.Tasks.ByStop(parentID, Convert.ToInt32(e.Node.ParentNode.Value));
          }
          if (results != null && results.Count() > 0)
          {
              results = results.OrderBy(a => a.NodeTitle);
              foreach (TreeNodeData item in results)
              {
                  RadTreeNode node = new RadTreeNode();
                  node.Text = item.NodeTitle;
                  node.Value = item.NodeId.ToString();
                  node.ImageUrl = ImageUrl;
                  if (Convert.ToInt32(item.ChildrenCount) > 0)
                  {
                      node.ExpandMode = expandMode;
                  }
                  e.Node.Nodes.Add(node);
              }
          }
          e.Node.Expanded = true;

      }

var mTreeNode = null;
function CloseRoute(args, args1, args2) {
    alert('AdminUI');
    var masterTable = $find("<%=RadGrid1.ClientID %>").get_masterTableView();
    masterTable.rebind();
    var tree = $find("<%= RadTreeView1.ClientID %>");
    var node = tree.get_selectedNode();

        if (node == null) return;
         node.get_treeView().trackChanges();
         node.get_nodes().clear();
         tree.commitChanges();
        node.set_expandMode(2);
        node.set_expanded(false);
        mTreeNode = node;
        window.setTimeout(NodeReExpandCallback, 300);
}
function NodeReExpandCallback() {
        if (mTreeNode == null) return;
        mTreeNode.set_expanded(true);
        mTreeNode = null;
 }

Please let me know if you see anything wrong with my code? or any other possible solution.

Thanks.

[Plamen]

Hello Srujana,

You can refer to our Load on demand demo and check your logic in the load event because it is possible to have the nodes already added and then after calling the expand method you add them ones again.

Hope this will help.

Regards,
Plamen Zdravkov
the Telerik team

[Paul]

I am trying to refresh a tree item's children (client side) using load on demand from the code posted to this forum and all that happens is I get the load on demand spinner.  My javascript follows.  Note: my server side WebMethod never gets called.  Please assist.

var mTreeNode = null;
function OnReloadSelectedTreeItem()
{
var oTree = $find("<%=cntlRadTreeView.ClientID%>");
var node = oTree.get_selectedNode();
if (node == null) return;
oTree.trackChanges();
node.get_nodes().clear();
oTree.commitChanges();
node.set_expandMode(2);
node.set_expanded(false);
mTreeNode = node;
window.setTimeout(NodeReExpandCallback, 300);
}

function NodeReExpandCallback()
{
if (mTreeNode == null) return;
mTreeNode.set_expanded(true);
mTreeNode = null;
}

// TreeView declaration follows.
<telerik:RadTreeView ID="cntlRadTreeView" runat="server" Height="300px" Width="100%" OnClientNodeClicked="OnTreeClientNodeClicked" OnClientLoad="OnTreeClientLoad" OnClientContextMenuItemClicking="OnTreeClientMenuItemSelected" OnClientNodeDataBound="OnClientNodeDataBoundHandler" PersistLoadOnDemandNodes="false">
<WebServiceSettings Path="NWPortal2.aspx" Method="GetItems" />
</telerik:RadTreeView>

[Srujana]

For me it is taking longer in one instance, and it never gets called  in another instance. I would suggest you wait longer just to see if it is calling the serverside method at all.

[Paul]

In my case the server side code never gets called even after adding a longer timeout (20 seconds) before automatically expanding the node.

[Plamen]

Hi Paul ,

Could you please open a support ticket and send us a sample demo project that demonstrates the issue to examine it locally?

Otherwise I couldn't reproduce the problem you are having with the code that you posted.

Regards,
Plamen Zdravkov
the Telerik team

[Plamen]

Hello Paul ,

I am attaching the project that solved the issue for the community.

Greetings, Plamen Zdravkov
the Telerik team

[Nicolaï]

Thanks for sharing your code, Srujana..!
Helped me through some issues.