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

[Jean-Marc]

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

[msigman]

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>

[Jean-Marc]

Thank you Msigman, unfortunally it does not apply to my case.
I really need an explicit way for calling ajaxloadingpanel.

[Princy]

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