Block access to controls in the page on ajax postback

[Elsa]

Another developer also has the same requirement and his question is at: http://www.telerik.com/community/forums/aspnet-ajax/ajax/block-access-to-controls-in-the-page-on-ajax-postback.aspx. I wasn't sure whether adding a reply to his indicating my need to know the answer as well (since there's no way to "follow" or "subscribe" to a question unless you reply to it) or adding a new thread was appropriate. I chose to add a new thread.

Our Telerik version is 2012.1.215.40. I tried the following code, which I saw in a demo:

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            var currentLoadingPanel = null;
            var currentUpdatedControl = null;
            var idOfControl;

            function RequestStart(sender, args) {
                currentLoadingPanel = $find("<%= AjaxLoadingPanel.ClientID %>");
                // The control clicked is inside a RadAjaxPanel.
                // <telerik:RadAjaxPanel ID="AssessmentFilterAjaxPanel" runat="server" height="66px"
                // width="186px" HorizontalAlign="NotSet" LoadingPanelID="AjaxLoadingPanel" style="margin-right: 0px">
                 // <asp:PlaceHolder ID="AssessmentLinksPlaceholder" runat="server" EnableViewState="true"></asp:PlaceHolder>
                 // </telerik:RadAjaxPanel>
                 // The hyperlinks are created dynamically (it's faceted search) and the IDs start with "Assessment"
                idOfControl = args.get_eventTarget();

                if (idOfControl.indexOf("Assessment") > -1) {
                    // This control is inside a  RadAjaxPanel
                    // <telerik:RadAjaxPanel ID="PortfolioAjaxPanel" runat="server" Width="720px" HorizontalAlign="NotSet"           
                    // LoadingPanelID="AjaxLoadingPanel">
                    currentUpdatedControl = "<%= AssessmentInstanceRepeater.ClientID %>"; //
                }

                //show the loading panel over the updated control
                currentLoadingPanel.show(currentUpdatedControl);
            }

            function ResponseEnd() {
                //hide the loading panel and clean up the global variables
                if (currentLoadingPanel != null) {
                    currentLoadingPanel.hide(currentUpdatedControl);
                    currentUpdatedControl = null;
                    currentLoadingPanel = null;
                }
            }
        </script>
    </telerik:RadCodeBlock>   

The code inside the RadCodeBlock is not executed. I also refer to jQuery version 1.7.1 and use it successfully with $.noConflict();. This is the order of the scripts included (just in case this is the problem):

In the BODY:
    <telerik:RadScriptManager ID="ScriptManager1" runat="server" EnableTheming="True">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <script src="scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="scripts/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>  

[The RadCodeBlock goes here]

And right before closing the BODY:
    <script language="javascript" type="text/javascript">
        $.noConflict();

      jQuery(document).ready(function($) {
           // My code handling modal pop-ups, inline editing, hiding and showing content. This works correctly.
        });
    </script>

The RadAjaxManager has the following AjaxSetting:

            <telerik:AjaxSetting AjaxControlID="AssessmentLinksPlaceholder">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ClearAllLink" />
                    <telerik:AjaxUpdatedControl ControlID="AssessmentAppliedFilterPlaceholder" />
                    <telerik:AjaxUpdatedControl ControlID="AssessmentLinksPlaceholder" />
                    <telerik:AjaxUpdatedControl ControlID="StatusLinksPlaceholder" LoadingPanelID="AjaxLoadingPanel" />
                    <telerik:AjaxUpdatedControl ControlID="AssessmentInstanceRepeater" LoadingPanelID="AjaxLoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>

AJAX execution works correctly. The only problem I have to solve is how to disable or to block or to show the loading panel the other panels.

A reply to our problem is appreciated.

Elsa

[Antonio Stoilkov]

Hello Elsa,

You could achieve the desired functionality by following one of the described approaches:

• Set up a variable that will hold if a request is currently in process which will help you stop pending requests
• Place the RadAjaxLoadingPanel across the hole page and this way it will not be possible to interact with controls during request

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default"
    IsSticky="true" Style="position: absolute; top: 0px; height: 0px; width: 100%;
    height: 100%;">
</telerik:RadAjaxLoadingPanel>

• Disable all controls on the during request and enable them in the end

I hope this information will prove helpful.

All the best,
Antonio Stoilkov
the Telerik team