RadTreeView and Updating AjaxPanels

2 posts, 0 answers
  1. Paisley
    Paisley avatar
    1 posts
    Member since:
    Feb 2012

    Posted 15 Mar 2012 Link to this post

    In my project I have a RadTreeView and a RadToolbar, when a node is selected on the RadTreeView I want to update the Toolbar with buttons that correspond to actions you can perform with the selected node.  In order to do this, I placed the RadToolbar in a RadAjaxPanel and call ajaxRequest with the corresponding information needed to determine what buttons to display in the toolbar.

    This works fine and dandy until the an attempt to update the toolbar is made at the same time as one of the nodes is expanded in the tree (The nodes are all set to ServerSideCallBack ExpandMode).  When this happens (which is quite frequent), the node expansion is cancelled and instead the tree is left in it's current state.  As far as I can discern (judging from the captured request body in internet explorer), the tree is piggybacking a client state update onto the ajaxRequest made for the panel which is in turn causing the tree to be "updated" from the server before the actual request for the node data completes, leaving the tree in whatever it's current state is (pre node expansion).

    Below is a project I made in which I tried to replicate this behavior,  any suggestions to get around this behavior is very much welcome (preferably not doing by weird stuff like timeouts or similar hacks in the javascript).

    Here is the asp:
    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="TestRadTreeView._Default" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
     
    <head runat="server">
        <title></title>
        <telerik:RadCodeBlock ID="rmCodeBlock" runat="server">
            <script type="text/javascript">
                function UpdatePanel() {
                    var findresult = $find('<%= contextMenuAjaxPanel.ClientID %>');
                    $find('<%= contextMenuAjaxPanel.ClientID %>').ajaxRequest(arguments);
                }
            </script>
        </telerik:RadCodeBlock>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadStyleSheetManager ID="rmCSS" runat="server" EnableStyleSheetCombine="true" />
        <telerik:RadSkinManager ID="rmSkin" runat="server" />
         <telerik:RadScriptManager ID="rmScript" runat="server" EnableScriptCombine="true"
            EnableTheming="True">
            <Scripts>
                <%--Needed for JavaScript IntelliSense in VS2010--%>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <div>
        <telerik:RadAjaxPanel ID="contextMenuAjaxPanel" runat="server">
                <telerik:RadToolBar ID="rtbContext" runat="server" Width="100%" OnClientButtonClicking="UpdatePanel">
                    <Items>
                        <telerik:RadToolBarButton runat="server" Text="TEST"/>
                    </Items>
                </telerik:RadToolBar>
            </telerik:RadAjaxPanel>
            <telerik:RadTreeView ID="rtvTree" runat="server" Width="500px" Height="500px" ExpandAnimation-Duration="0"
                CollapseAnimation-Duration="0" OnClientNodeExpanding="UpdatePanel"/>
        </div>
        </form>
    </body>
    </html>

    and here is the codebehind:

    Imports Telerik.Web.UI
     
    Public Class _Default
        Inherits System.Web.UI.Page
     
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            rtvTree.Nodes.Add(New RadTreeNode("Test") With { _
                .ExpandMode = TreeNodeExpandMode.ServerSideCallBack _
            })
        End Sub
     
     
        Private Sub rtvTree_NodeCollapse(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadTreeNodeEventArgs) Handles rtvTree.NodeCollapse
            e.Node.Selected = True
        End Sub
     
        Private Sub rtvTree_NodeExpand(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadTreeNodeEventArgs) Handles rtvTree.NodeExpand
            e.Node.Nodes.Add(New RadTreeNode("Test") With { _
                .ExpandMode = TreeNodeExpandMode.ServerSideCallBack _
            })
        End Sub
     
    End Class

    In the aspx file, if you remove the OnClientNodeExpanding "UpdatePanel" property from the toolbar then the nodes will expand fine (although you wouldn't be getting updates for the toolbar any longer).
  2. Bozhidar
    Admin
    Bozhidar avatar
    1103 posts

    Posted 19 Mar 2012 Link to this post

    Hi Paisley,

    I've answered your support ticket, but I'll post the answer here as well, so that everyone can see what the issue was.

    Usually if an ajax request starts before another request has finished, the first ajax request is aborted. That is what is happening in your case. The problem is that the OnClientNodeExpanded event is raised before the callback that the TreeView makes to load its nodes has completed, and cancels it.

    Fortunately there is a simple workaround that you can use. Instead of the OnClientNodeExpanded event, use the OnClientNodePopulated event to trigger the ajax call. This event is raised after the initial ajax request of the TreeView LOD mechanism has completed successfully, so there is no conflict.

    Kind regards,
    Bozhidar
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top