Treeview update problem

[Henrik]

Hi,

I have this setup:

A page containing a RadToolBar and a user control containing a RadTreeView:

<abc:TreeView ID="tvEmner" runat="server" /><!-- User control containing a telerik:RadTreeView control -->

In the usercontrol, the radtreeview is declared like this:

<asp:Panel ID="pnlEmner" runat="server">
<tel:RadTreeView ID="tvEmner" EnableDragAndDrop="true" Width="300px" Height="250px"
                                 OnNodeDrop="OnEmneDropped" OnNodeClick="OnEmneClicked" OnNodeExpand="OnEmneExpanded"
                                 OnClientNodeClicking="onEmneNodeClicking"
                                 OnClientContextMenuItemClicking="onEmneContextMenuItemClicking" OnClientContextMenuShowing="onEmneContextMenuShowing"
                                 runat="server">
    <ContextMenus>
        <tel:RadTreeViewContextMenu ID="cmRoot" runat="server">
      <Items>
        <tel:RadMenuItem Value="Create" PostBack="false" Text="Opret emne">
        </tel:RadMenuItem>
      </Items>
      <CollapseAnimation Type="none" />
        </tel:RadTreeViewContextMenu>

    </ContextMenus>
    <DataBindings>
        <tel:RadTreeNodeBinding Expanded="True" />
  </DataBindings>

</tel:RadTreeView>
</asp:Panel>

I have the following scenario:
1. The user selects a node in the treeview
2. The user clicks a "Add node" button in the toolbar.
3. The toolbar client side-opens a modal window (radwindow) , in which the name of the new node is entered.
4. When the modal window closes, the treeview should be reloaded to reflect that the new node has been added

To do this, the page calls this JavaScript in the usercontrol containing the treeview:

var node = Al.EmneTreeView.getSelectedNode(); // function that gets the selected node
node.collapse();
node.get_treeView().trackChanges();
node.get_nodes().clear();
node.set_expandMode(Telerik.Web.UI.TreeNodeExpandMode.ServerSideCallBack);
node.get_treeView().commitChanges();
node.expand();

I know that the node is added to the datasource for the tree view and I can see that the JavaScript code is executed. However, the list of nodes is not reloaded in the GUI.

I have also implemented the option to add nodes through a right-click context menu. In this scenario, everything works fine.
I have tried to add the user control to the radajaxmanager proxy, with no success, like this:

<tel:RadAjaxManagerProxy ID="PageAjaxManager" runat="server">
        <AjaxSettings>
            <tel:AjaxSetting AjaxControlID="tbButtons">
                <UpdatedControls>
                    <tel:AjaxUpdatedControl ControlID="tbButtons" />
                    <tel:AjaxUpdatedControl ControlID="tvEmner" LoadingPanelID="AjaxLoadingPanel" />
                </UpdatedControls>
            </tel:AjaxSetting>
        </AjaxSettings>
    </tel:RadAjaxManagerProxy>

Since it works in the context menu scenario, I assume it has something to do with the toolbar not having "access" to update the radtreeview in the user control.

I hope someone can help me with this. Any help will be appreciated.

/Henrik

[Yana]

Hi Henrik,

I tried the provided code with some modifications and it worked without a problem, you don't need to use RadAjaxManager, because when ExpandMode is set to ServerSideCallBack, it uses its built-in ajax mechanism. I've attached my test page,  please download it and give it a try.

All the best,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.