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:
and here is the codebehind:
In the aspx file, if you remove the
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"><html xmlns="http://www.w3.org/1999/xhtml"><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.UIPublic 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 SubEnd ClassIn 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).1 Answer, 1 is accepted
0
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
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.
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.