Require Loading image as a progress bar

[Bala]

Hello I am trying to show a Loading Image before loading a Report Viewer in a button click . But Its not working . Please help .

 <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="rcbSearchHierarchy">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="pnlAssetHierarchy" LoadingPanelID="Loadingpnl"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="btnViewReport">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="rptVr" LoadingPanelID="Loadingpnl"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

<telerik:RadDockLayout runat="server" ID="RadDockLayout1">
                     <telerik:RadDockZone runat="server" ID="RadDockZone1" Width="99%" Skin="Vista"
                         FitDocks="false" BorderWidth="0px">
                         <telerik:RadDock runat="server" ID="RadDock1" Title="Report Criteria"
                             DefaultCommands="ExpandCollapse" Width="100%" EnableDrag="False" Skin="Vista"
                             DockMode="Docked" EnableRoundedCorners="false">
                             <ContentTemplate>
                                 <telerik:RadAjaxLoadingPanel ID="Loadingpnl" runat="server" Transparency="1">
                                     <asp:Image ID="LoadingImage" runat="server" ImageUrl="~/Images/Loading.gif"></asp:Image>
                                 </telerik:RadAjaxLoadingPanel>
                               <%--  <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                                     <ContentTemplate>--%>


                                         <table width="100%">
                                             <tr>
                                                 <td>
                                                     <asp:Panel ID="pnlAssetHierarchy" runat="server">
                                                         <%--<ContentTemplate>--%>
                                                             <uc1:AssetHierarchy runat="server" ID="AssetHierarchy" prmpage="4"/>
                                                         <%--</ContentTemplate>--%>
                                                     </asp:Panel>
                                                 </td>
                                             </tr>

                                             <tr>
                                                 <td>
                                                     <table cellpadding="0" cellspacing="0" width="100%">
                                                         <tr class="TableCont">
                                                             <th align="left"></th>
                                                         </tr>
                                                         <tr>

                                                             <td style="height: 24px">
                                                                 <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                                                                     <ContentTemplate>
                                                                         <asp:RadioButtonList ID="rblDataRange" runat="server" onClick="DateRangeOptionSelection();"
                                                                             RepeatDirection="Horizontal" TabIndex="8" CssClass="rbl" OnSelectedIndexChanged="rblDataRange_SelectedIndexChanged">
                                                                             <asp:ListItem Selected="True" Value="1">YTD </asp:ListItem>
                                                                             <asp:ListItem Value="2">Today</asp:ListItem>
                                                                             <asp:ListItem Value="3">Date Range</asp:ListItem>

                                                                         </asp:RadioButtonList>
                                                                     </ContentTemplate>
                                                                 </asp:UpdatePanel>
                                                             </td>
                                                         </tr>
                                                         <tr>

                                                             <td id="tdDateRange">
                                                                 <asp:Panel ID="pnlDateRange" runat="server">
                                                                     <asp:UpdatePanel ID="UpdatePanel3" runat="server">
                                                                         <ContentTemplate>
                                                                             <uc1:DatePicker runat="server" ID="DatePicker" />
                                                                         </ContentTemplate>
                                                                     </asp:UpdatePanel>
                                                                 </asp:Panel>
                                                         </tr>
                                                         <tr>
                                                             <td>
                                                                 <table style="width: 90px; font-family: sans-serif; font-size: small">
                                                                     <tr>
                                                                         <td>
                                                                             
                                                                             <asp:Button ID="btnViewReport" runat="server" Text=" View Report " Width="85px" OnClick="btnViewReport_Click" />
                                                                         </td>
                                                                         <td></td>
                                                                         <td>
                                                                             <telerik:RadButton ID="btnReset" runat="server" Text=" Reset " Width="85px" OnClick="btnReset_Click"></telerik:RadButton>

                                                                         </td>
                                                                     </tr>

                                                                 </table>
                                                             </td>
                                                         </tr>
                                                     </table>
                                                 </td>
                                             </tr>

                                         </table>
                                 <%--    </ContentTemplate>
                                 </asp:UpdatePanel>--%>
                             </ContentTemplate>
                         </telerik:RadDock>
                     </telerik:RadDockZone>
                 </telerik:RadDockLayout>
             </td>
         </tr>
         <tr style="height:95%">
             <td>
                <%-- <asp:UpdatePanel runat="server">
                     <ContentTemplate>--%>
                        
                         <rsweb:ReportViewer ID="rptVr" runat="server" Width="100%" Visible="False" ></rsweb:ReportViewer>
                    <%-- </ContentTemplate>
                 </asp:UpdatePanel>--%>
             </td>
         </tr>
 

    </table>


  
</asp:Content>

[Pavlina]

Hi,

For your scenario you can manually show RadAjaxPanel on a button click event before loading a Report Viewer using its client show() method:
http://www.telerik.com/help/aspnet-ajax/ajax-show-hide-loadingpanel.html

Then you could hide the already shown RadAjaxLoadingPanel on the event that best fits your needs. 

Regards,
Pavlina
Telerik