Disable other commands/drag during ajax postback?

[Pete]

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.

[Pete]

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.

[Petio Petkov]

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.

[Pete]

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?

[Obi-Wan Kenobi]

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.

[Pete]

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!