how do I show the RadAjaxLoadingPanel when I perform a javascript __postback

4 posts, 0 answers
  1. Jean-Marc
    Jean-Marc avatar
    93 posts
    Member since:
    Mar 2011

    Posted 04 Jun 2013 Link to this post

    Problem: how to show a RadAjaxLoadingPanel from an ascx after a javascript _doPostBack

    First I explain my situation…

    Main page containing an ascx. In the main page I must have ajaxManager and ajaxLoadingPanel


    ASPX
     
    <telerik:RadCodeBlock ID="RadCodeBlockMain" runat="server">
        <script type="text/javascript">
     
            var currentLoadingPanel = null;
            var currentUpdatedControl = null;
            function RequestStart(sender, args) {
                currentLoadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID %>");
                currentUpdatedControl = "<%= Panel1.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>
     
     
     
     
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
    <telerik:RadAjaxManager ID="RadAjaxManagerMain" runat="server">
       <ClientEvents OnRequestStart="RequestStart" OnResponseEnd="ResponseEnd" />
    </telerik:RadAjaxManager>
     
    <asp:Panel ID="Panel1" runat="server" HorizontalAlign="Center">
    <uc:polContainer runat="server" ID="polContainer1" />
    </asp:Panel>
     
     
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" >
       <div>
          <asp:Image ID="Image1" runat="server" ImageUrl="/ajax_loader.gif" />
       </div>
    </telerik:RadAjaxLoadingPanel>


    ASCX

    Based on several conditions I fill a literal with Html code loaded on code behind which represents my results which consists in a set of items each one having a clickable part (*Y). The goal is – by clicking an item – reload the result page (ascx) with other items using ajax.

    I did that calling in *Y a javascript that performas a __dopostback. That works fine.

    The question is how do I show the RadAjaxLoadingPanel when I perform the postback? ?


    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function myFunct(id) {
                __doPostBack ('<%=UpdatePanel1.ClientID%>', id);           
            
        </script>
    </telerik:RadCodeBlock>
     
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
       <ContentTemplate>
            <asp:Literal ID="LiteralResult" runat="server" />        
       </ContentTemplate>   
    </asp:UpdatePanel>   
     
    .vb
    LiteralResult.text+=”<a onclick=""myFunct('" & id & "')"" >" & here_text & "</a>"
     
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Page.IsPostBack Then
     
            Dim passedTargetId As String = = Request.Params.Get("__EVENTTARGET")               
            Dim passedArgument As String = Request.Params.Get("__EVENTARGUMENT")
     
             If passedTargetId = UpdatePanel1.ClientID Then
                ‘do something
             End If
        End If
    End Sub

    Thank you for your attention

  2. msigman
    msigman avatar
    141 posts
    Member since:
    Apr 2008

    Posted 04 Jun 2013 Link to this post

    Hello,

    Have you tried setting it up in the standard way first?  What you've got there could work, but will require more effort since it's a more customized/explicit way of doing it.  Instead, you could try something like this to use the out-of-the-box functionality:
    <telerik:RadAjaxManager ID="RadAjaxManagerMain" runat="server">
        <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="Panel1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
    </telerik:RadAjaxManager>
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jean-Marc
    Jean-Marc avatar
    93 posts
    Member since:
    Mar 2011

    Posted 05 Jun 2013 Link to this post

    Thank you Msigman, unfortunally it does not apply to my case.
    I really need an explicit way for calling ajaxloadingpanel.
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 05 Jun 2013 Link to this post

    Hi Jean,

    The Show and Hide methods can be used to explicitly show/hide the ajaxloadingpanel on the client. This allows you to update controls according to some condition and display a loading panel over the control that will be updated. Please have a look at the following code to explicitly show an ajax loading panel from client side code.

    ASPX:
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Button1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="Panel2" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
        <ClientEvents OnRequestStart="RequestStart" OnResponseEnd="ResponseEnd" />
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
    </telerik:RadAjaxLoadingPanel>
    <asp:Button ID="Button1" runat="server" Text="Postback" OnClick="Button1_Click" />
    <asp:Panel ID="Panel1" runat="server" Width="200px">
        Panel 1
    </asp:Panel>
    <asp:Panel ID="Panel2" runat="server" Width="200px">
        Panel 2
    </asp:Panel>

    JavaScript:
    <script type="text/javascript">
        var currentLoadingPanel = null;
        var currentUpdatedControl = null;
        function RequestStart(sender, args) {
            currentLoadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID %>");
     
            if (args.get_eventTarget() == "<%= Button1.UniqueID %>") {
                currentUpdatedControl = "<%= Panel1.ClientID %>";
            }
            else {
                currentUpdatedControl = "<%= Panel2.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>

    Thanks,
    Princy
Back to Top