Block access to controls in the page on ajax postback

2 posts, 0 answers
  1. Elsa
    Elsa avatar
    2 posts
    Member since:
    Mar 2012

    Posted 16 Mar 2012 Link to this post

    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
  2. Antonio Stoilkov
    Admin
    Antonio Stoilkov avatar
    530 posts

    Posted 21 Mar 2012 Link to this post

    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
    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.
Back to Top