Disable other commands/drag during ajax postback?

6 posts, 1 answers
  1. Pete
    Pete avatar
    14 posts
    Member since:
    May 2009

    Posted 28 May 2009 Link to this post

    Hi,

    I have a raddocklayout with dynamically created zones and docks (inside an updatepanel) that I am using to allow users to edit the layout of their custom web page. I have found that if I don't allow an ajax command to complete (from dock A) before then attempting to drag another dock (B) it seems to recreate dock B in its original location (whilst I still have dock B being dragged) thus creating two copies of B.

    I expect this issue would be fixed by preventing any dragging or commands from being executed when an ajax command is being processed. I also wish to prevent the user from clicking on a command twice as they await its execution.

    So, my question is if its possible to "disable" all the docks or prevent the docks from being dragged/executing commands when an ajax callback is underway? I assume this would have to be done using javascript as any server side code won't disable the commands/drag functionality until after the postback (and subsequent updatepanel changes have occurred).

    I hope that makes sense, let me know if you require further details.
  2. Pete
    Pete avatar
    14 posts
    Member since:
    May 2009

    Posted 28 May 2009 Link to this post

    I should note that I've already figured out how to disable commands by just adding a javascript function for the OnClientCommand that checks the value of a hidden field to see if a request is underway. So really I just need to figure out how to prevent dragging from the client side, but I thought it best to outline the whole scenaro.
  3. Answer
    Petio Petkov
    Admin
    Petio Petkov avatar
    825 posts

    Posted 29 May 2009 Link to this post

    Hi Pete,

    My suggestion is to show loading panel until the ajax call is finished. I attached a simple example which illustrates how to achieve it.

    Kind regards,
    Petio Petkov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  4. Pete
    Pete avatar
    14 posts
    Member since:
    May 2009

    Posted 01 Jun 2009 Link to this post

    Thanks for that example.

    As far as I can tell this example will show the loading panel when ButtonAddDock's Click event is fired?

    If so, then I was wondering how I go about this with dynamically added docks, do I have to add a new AjaxSetting to the RadAjaxManager1 for each dock I create? And will each AjaxSetting need to reference each dock in it's UpdatedControls collection?

    Or could the UpdatedControls just contain a reference to the RadDockLayout?

    Or am I misunderstanding how the RadAjaxManager works?
  5. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 04 Jun 2009 Link to this post

    I tried the example and LoadingPanel is showed each time a new RadDock is added/collapsed/moved. So you don't need to add anything else.
    The loading panel is shown via JavaScript when the RadAjaxManager's RequestStart event is fired and it hides when RadAjaxManager.ResponseEnd event is fired.
  6. Pete
    Pete avatar
    14 posts
    Member since:
    May 2009

    Posted 04 Jun 2009 Link to this post

    Yeah, I understand that, but the trouble is, as I originally stated, I would like to show the loading panel whenever any dock's command is called (and all docks are added dynamically) or when a new dock is dragged from the "library", which amounted to be basically (in the case of my page) on any AJAX call.

    What I've done instead is added the following JavaScript to show the panel whenever any AJAX call is made:

    <script language="javascript" type="text/javascript">  
     
        var loadingPanel = "";  
        var pageRequestManager = Sys.WebForms.PageRequestManager.getInstance();  
        var postBackElement = "";  
        pageRequestManager.add_initializeRequest(initializeRequest);  
        pageRequestManager.add_endRequest(endRequest);  
       
        function initializeRequest(sender, eventArgs) {  
            loadingPanel = $find("<%=RadAjaxLoadingPanel1.ClientID %>");  
            postBackElement = '<%=LibraryZoneUpdatePnl.ClientID %>';  
            loadingPanel.show(postBackElement);  
        }  
     
        function endRequest(sender, eventArgs) {  
            loadingPanel = $find("<%=RadAjaxLoadingPanel1.ClientID %>");  
            loadingPanel.hide(postBackElement);  
        }  
     
    </script> 


    Note: I changed postBackElement = eventArgs.get_postBackElement().id; to postBackElement = '<%=LibraryZoneUpdatePnl.ClientID %>'; as otherwise the panel only showed on top of the dock that fired the event and I wanted to prevent any other commands from any other docks from being fired while the AJAX call was underway, thus I set the updatepanel containing the whole dock layout to be the element sent to be hidden by the loading panel.

    That way whenever an AJAX call is fired off then the loading panel shows on top of all the docks, preventing the user from clicking the command again or clicking another command while the call takes place. I just found that if I didn't do this then when a command was clicked there was no feedback to the user (until the command's effects were shown after the AJAX call ended) and so I was worried they would click again and again thinking nothing had happened.

    Thanks for your help all!

     

Back to Top