Random Javascript Errors using RadDock

2 posts, 0 answers
  1. Pat Brophy
    Pat Brophy avatar
    2 posts
    Member since:
    Aug 2009

    Posted 17 Sep 2009 Link to this post

    Problem Overview:
    We are utilizing the RadDock controls to provide some dashboard/portal like functionality in our web site.  Users are allowed to add RadDocks to the page dynamically.  We have closely followed the example given at this website: http://demos.telerik.com/aspnet-ajax/dock/examples/dynamicdocks/defaultcs.aspx  Essentially, the issue seems to appear when we are utizing AJAX to automatically post back for all dockposition changes.  I have seen several types of these questions raised via google/telrik searches, but none specifically identical to my situation.  So, I have created a sample project which is a whittled down, simplified version of our real application which demonstrates the issue.

    The most prominent javascript error seems to be:
    1 Webpage error details 
    2  
    3 User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; MDDR; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; InfoPath.2; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729) 
    4 Timestamp: Wed, 16 Sep 2009 21:39:37 UTC 
    5  
    6  
    7 Message: 'undefined' is null or not an object 
    8 Line: 5033 
    9 Char: 2 
    10 Code: 0 
    11 URI: http://as-qa-vm/AIMSNET/Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_scriptManager_HiddenField&compress=1&_TSM_CombinedScripts_=%3b%3bTelerik.Web.UI%2c+Version%3d2009.2.826.35%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen-US%3ad2d891f5-3533-469c-b9a2-ac7d16eb23ff%3a874f8ea2%3a24ee1bba%3a19620875%3a33108d14%3abd8f85e4%3ae330518b%3a1e771326%3ac8618e41%3a854aa0a7%3a5a6d9d23 
    12  




    Symptoms/Cause
    When users quickly move RadDocks around on the page the position of the RadDocks seem to get lost and they free float on the page causing javascript errors.  A sure fire way to cause this error seems to be rapidly double clicking on the header bar of a RadDock.  This will eventually result in a JavaScript error in which subsequent actions cause page to have several javascript errors rending the page useless.

    Please NOTE:  Double clicking was not the only method used to create the random javascript errors, however it seems to be the best way to easily reproduce the issue.  I think all the javascript errors we have seen stem from the same root issue, whatever that may be.

    We have tried several variations of using UpdatePanel and the RadAjaxPanel with Loading Panel.  Any help that anyone can give would be appreciated.

    Sample ASPX Page
    1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RadAjaxPanelDoesNotWork.aspx.cs" Inherits="WebUI.RadAjaxPanelDoesNotWork" %> 
    2 <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
    3  
    4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    5  
    6 <html xmlns="http://www.w3.org/1999/xhtml" > 
    7 <head runat="server"
    8     <title></title
    9 </head> 
    10 <body> 
    11 <form id="form1" runat="server"
    12      
    13         <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
    14         </telerik:RadScriptManager> 
    15          
    16         <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
    17             <AjaxSettings> 
    18                 <telerik:AjaxSetting AjaxControlID="Column1"
    19                     <UpdatedControls> 
    20                         <telerik:AjaxUpdatedControl ControlID="Column1"  
    21                             LoadingPanelID="RadAjaxLoadingPanel1" /> 
    22                         <telerik:AjaxUpdatedControl ControlID="Column2"  
    23                             LoadingPanelID="RadAjaxLoadingPanel1" /> 
    24                         <telerik:AjaxUpdatedControl ControlID="Column3"  
    25                             LoadingPanelID="RadAjaxLoadingPanel1" /> 
    26                     </UpdatedControls> 
    27                 </telerik:AjaxSetting> 
    28                 <telerik:AjaxSetting AjaxControlID="Column2"
    29                     <UpdatedControls> 
    30                         <telerik:AjaxUpdatedControl ControlID="Column1"  
    31                             LoadingPanelID="RadAjaxLoadingPanel1" /> 
    32                         <telerik:AjaxUpdatedControl ControlID="Column2"  
    33                             LoadingPanelID="RadAjaxLoadingPanel1" /> 
    34                         <telerik:AjaxUpdatedControl ControlID="Column3"  
    35                             LoadingPanelID="RadAjaxLoadingPanel1" /> 
    36                     </UpdatedControls> 
    37                 </telerik:AjaxSetting> 
    38                 <telerik:AjaxSetting AjaxControlID="Column3"
    39                     <UpdatedControls> 
    40                         <telerik:AjaxUpdatedControl ControlID="Column1"  
    41                             LoadingPanelID="RadAjaxLoadingPanel1" /> 
    42                         <telerik:AjaxUpdatedControl ControlID="Column2"  
    43                             LoadingPanelID="RadAjaxLoadingPanel1" /> 
    44                         <telerik:AjaxUpdatedControl ControlID="Column3"  
    45                             LoadingPanelID="RadAjaxLoadingPanel1" /> 
    46                     </UpdatedControls> 
    47                 </telerik:AjaxSetting> 
    48             </AjaxSettings> 
    49         </telerik:RadAjaxManager> 
    50          
    51         <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"  
    52             Skin="Default" MinDisplayTime="500"
    53         </telerik:RadAjaxLoadingPanel> 
    54          
    55         <asp:Button ID="btnAdd" OnClick="btnAdd_Click" runat="server" Text="Add Dock"/> 
    56  
    57             <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server"
    58                     <telerik:RadDockLayout runat="server" ID="radDockLayout" OnSaveDockLayout="radDockLayout_SaveDockLayout" OnLoadDockLayout="radDockLayout_LoadDockLayout"
    59                         <table style="width:99%;"
    60                         <tr> 
    61                         <td style="width: 30%;" valign="top" runat="server" Id="tblColumn1"
    62                             <telerik:RadDockZone runat="server" ID="Column1" Orientation="vertical" Style="border: 0px; width: 100%; min-height: 400px; min-width:100px"
    63                             </telerik:RadDockZone> 
    64                         </td> 
    65                         <td style="width: 30%;" valign="top" runat="server" Id="tblColumn2"
    66                             <telerik:RadDockZone runat="server" ID="Column2" Orientation="vertical" Style="border: 0px; width: 100%; min-height: 400px; min-width:100px"
    67                             </telerik:RadDockZone> 
    68                         </td>                     
    69                         <td style="width: 30%;" valign="top" runat="server" Id="tblColumn3"
    70                             <telerik:RadDockZone runat="server" ID="Column3" Orientation="vertical" Style="border: 0px; width: 100%; min-height: 400px; min-width:100px;"
    71                             </telerik:RadDockZone> 
    72                         </td> 
    73                         </tr> 
    74                         </table> 
    75                     </telerik:RadDockLayout>                   
    76             </telerik:RadAjaxPanel> 
    77     </form> 
    78 </body> 
    79 </html> 
    80  
    81  


    Code Behind
    1 using System; 
    2 using System.Collections.Generic; 
    3 using System.Threading; 
    4 using System.Web.UI; 
    5 using System.Web.UI.WebControls; 
    6 using Telerik.Web.UI; 
    7  
    8 namespace WebUI 
    9
    10     public partial class RadAjaxPanelDoesNotWork : System.Web.UI.Page 
    11     { 
    12         private IList<DockState> dockStates = new List<DockState>(); 
    13         private bool shouldSaveDocks = true
    14  
    15         #region page events 
    16         protected void Page_Init(object sender, EventArgs e) 
    17         { 
    18             LoadDocks(); 
    19         } 
    20  
    21         protected void Page_Load(object sender, EventArgs e) 
    22         { 
    23             if (!Page.IsPostBack) 
    24             { 
    25                 shouldSaveDocks = false
    26             } 
    27         } 
    28  
    29         protected void radDockLayout_LoadDockLayout(object sender, DockLayoutEventArgs e) 
    30         { 
    31             //Populate the event args with the state information. The RadDockLayout control 
    32             //will automatically move the docks according that information. 
    33             var savedDockStates = GetDockStates(); 
    34  
    35             foreach (DockState dockState in savedDockStates) 
    36             { 
    37                 e.Positions[dockState.UniqueName] = dockState.DockZoneID; 
    38                 e.Indices[dockState.UniqueName] = dockState.Index; 
    39             } 
    40         } 
    41  
    42         protected void radDockLayout_SaveDockLayout(object sender, DockLayoutEventArgs e) 
    43         { 
    44             //Save the dock state in the db. This will enable us 
    45             // to recreate the dock in the next Page_Init. 
    46             if (shouldSaveDocks) 
    47             { 
    48                 List<DockState> dockStatesToSave = ((RadDockLayout)sender).GetRegisteredDocksState(); 
    49                 SaveDockStates(dockStatesToSave); 
    50             } 
    51         } 
    52  
    53         protected void btnAdd_Click(object sender, EventArgs e) 
    54         { 
    55             RadDock dock = CreateRadDock(); 
    56             Column1.Controls.Add(dock); 
    57             CreateSaveStateTrigger(dock); 
    58             dock.Title = "Sample User Control"
    59             LoadWidget(dock); 
    60         } 
    61         #endregion 
    62  
    63         #region Helper Methods 
    64         private void LoadDocks() 
    65         { 
    66             dockStates = GetDockStates(); 
    67  
    68             //Recreate the docks in order to ensure their proper operation 
    69             foreach (DockState dockState in dockStates) 
    70             { 
    71                 if (dockState.Closed == false) 
    72                 { 
    73                     RadDock dock = CreateRadDockFromState(dockState); 
    74                     //We will just add the RadDock control to the RadDockLayout. 
    75                     // You could use any other control for that purpose, just ensure 
    76                     // that it is inside the RadDockLayout control. 
    77                     // The RadDockLayout control will automatically move the RadDock 
    78                     // controls to their corresponding zone in the LoadDockLayout 
    79                     // event (see below). 
    80                     radDockLayout.Controls.Add(dock); 
    81                     //We want to save the dock state every time a dock is moved. 
    82                     CreateSaveStateTrigger(dock); 
    83                     LoadWidget(dock); 
    84                 } 
    85             } 
    86         } 
    87  
    88         private IList<DockState> GetDockStates() 
    89         { 
    90             List<DockState> _currentDockStates = (List<DockState>)Session["DockStates"]; 
    91             if (Object.Equals(_currentDockStates, null)) 
    92             { 
    93                 _currentDockStates = new List<DockState>(); 
    94                 Session["DockStates"] = _currentDockStates; 
    95             } 
    96             return _currentDockStates; 
    97         } 
    98  
    99         private void SaveDockStates(IEnumerable<DockState> dockStatesToSave) 
    100         { 
    101             Session["DockStates"] = dockStatesToSave; 
    102         } 
    103  
    104         private static RadDock CreateRadDockFromState(DockState state) 
    105         { 
    106             var dock = new RadDock { DockModeDockMode = DockMode.Docked, EnableAnimation = trueSkin = "Default"ID = string.Format("RadDock{0}", state.UniqueName) }; 
    107             dock.ApplyState(state); 
    108             //dock.EnableAnimation = false
    109             dock.Commands.Add(new DockCloseCommand()); 
    110             dock.Commands.Add(new DockExpandCollapseCommand()); 
    111  
    112             return dock; 
    113         } 
    114  
    115         private static RadDock CreateRadDock() 
    116         { 
    117             var dock = new RadDock { DockModeDockMode = DockMode.Docked, EnableAnimation = trueSkin = "Default"UniqueName = Guid.NewGuid().ToString() }; 
    118             dock.ID = string.Format("RadDock{0}", dock.UniqueName); 
    119             //dock.EnableAnimation = false
    120             dock.Commands.Add(new DockCloseCommand()); 
    121             dock.Commands.Add(new DockExpandCollapseCommand()); 
    122  
    123             return dock; 
    124         } 
    125  
    126         private void CreateSaveStateTrigger(RadDock dock) 
    127         { 
    128             //Ensure that the RadDock control will initiate postback 
    129             // when its position changes on the client or any of the commands is clicked. 
    130             //Using the trigger we will "ajaxify" that postback. 
    131             dock.AutoPostBack = true
    132             dock.CommandsAutoPostBack = true
    133  
    134         } 
    135  
    136         private void LoadWidget(RadDock dock) 
    137         { 
    138             Control widget = LoadControl("~/UserControls/SampleUserControl.ascx"); 
    139             dock.ContentContainer.Controls.Add(widget); 
    140         } 
    141  
    142         #endregion 
    143  
    144     } 
    145
    146  


  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 18 Sep 2009 Link to this post

    Hi Pat,

    We have answered your question in the corresponding support ticket. You can find the answer there. However for your convenience I am also pasting the response here, in the public forum.

    This error is encountered because of an AJAX request conflict. When the
    RadDock's title-bar is clicked many times the DockPositionChanged event is fired more than once. Because the dock's AutoPostBack property is set to true, a couple of AJAX requests are fired before any previous AJAX post back has finished. This on the other hand generates a duplicate of the RadDock and throws an exception.

    You can overcome this error by adding an AJAX Loading Panel that will ensure the AJAX post back to be finished before a new one is started. For your convenience, I have attached a sample project, that shows how this can be done. I have set the MinDisplayTime="1" and Transparency="100" properties on the RadAjaxLoadinPanel.



    Best wishes,
    Pero
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top