AjaxLoadingPanel tied to a button click

4 posts, 0 answers
  1. Adam
    Adam avatar
    10 posts
    Member since:
    Jul 2013

    Posted 02 Jul 2013 Link to this post

    I have just started working with the Telerik controls and HTML, and have had a small roadblock in getting the AjaxLoadingPanel to show. The webpage is very primitive, and the button (that I'd like to trigger the load screen) already has a server-side click event that initiates a copy process written in VB. I don't believe this is possible, but it would seem easy to tie the load screen to the click event in the VB code, and begin it and end it in the codebehind. I don't believe this is how it works though.

    I think that my HTML page layout could be one of the reasons that the AjaxLoadingPanel doesn't show. My HTML page doesn't sit in a panel or on a grid, so the entire panel isn't ever updated. Right now the Control ID is set to a button, because it's the only real control I have on the page that does something. However, the load never shows, so I must be doing something incorrectly.

    I am running this in IE10. I read through a sticky on the front page that alluded to bugs with a similar situation as this, but they seemed to be in earlier versions of IE. I don't know if that really pertains to me.
    The HTML page has two comboboxes and two buttons. The first combobox allows you to choose a sales rep, and upon clicking "copy," all of those rep's sales are copied to the other rep. Therefore, I would like to have the load screen show during the copy process, which can be 5+ seconds depending on how many sales records the first rep has.

    Thanks in advance!
    <head id="Head1" runat="server">
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <cc1:ABLDocumentDomain runat="server">
            </cc1:ABLDocumentDomain>
             <div>
                <rad:RadAjaxManager ID="ctlAjaxMgr" runat="server">
                    <ClientEvents OnRequestStart="ABLControls_LockPage();" OnResponseEnd="ABLControls_UnlockPage();" />
                    <AjaxSettings>
                        <rad:AjaxSetting AjaxControlID="ctlAjaxMgr">
                            <UpdatedControls>
                                <rad:AjaxUpdatedControl ControlID="ctlCopy" LoadingPanelID="ctlLoadingPanel" />
                            </UpdatedControls>
                        </rad:AjaxSetting>
                    </AjaxSettings>
                </rad:RadAjaxManager>
     
     
                <%--Copy From Agency table--%>
                <table id="tblBoxHolder" cellspacing="2" style="border-right: #a9c6ee 2px solid;
                    padding-right: 0px; border-top: #a9c6ee 2px solid; padding-left: 0px; padding-bottom: 0px;
                    margin: 0px; border-left: #a9c6ee 2px solid; padding-top: 0px; border-bottom: #a9c6ee 2px solid;
                    height: 1px;" width="50%"; align="center">
                    <tr>
                        <%--Table Header--%>
                        <td align="right" colspan="2" style="height: 10px; text-align: Center; vertical-align: middle;
                            background-color: #a9c6ee; font-weight: bold;">
                             Copy Spec Sheets From Agency:
                        </td>
                    </tr>
                    <tr>
                        <%--From Agency label and combobox rows--%>
                        <td class="style3">
                            Rep #:
                        </td>
                        <td style="width: 80%">
                            <rad:RadComboBox ID="ctlViewFromAgencyRepCombo" runat="server" AutoPostBack="true" AppendDataboundItems = "true" DataSourceID="odsRepNumFromAgency" DataTextField="REP_NUMBER"
                            DataValueField="REP_NUMBER" Skin="ABL_Std" SkinsPath="~/RadControls/ComboBox/Skins" Width="320px" Height="200px" OnSelectedIndexChanged="ctlViewFromAgencyRepCombo_SelectedIndexChanged">
                            <Items>                
                                 <rad:RadComboBoxItem Text="-- Select One --" Value="-1" />
                            </Items>
                            </rad:RadComboBox>
                        </td>
                    </tr>
                    <tr>
     
                <%--Copy To Agency table--%>
                <table id="Table2" cellspacing="2" style="border-right: #a9c6ee 2px solid;
                    padding-right: 0px; border-top: #a9c6ee 2px solid; padding-left: 0px; padding-bottom: 0px;
                    margin: 0px; border-left: #a9c6ee 2px solid; padding-top: 0px; border-bottom: #a9c6ee 2px solid;
                    height: 1px;" width="50%", align="center";>
                    <tr>
                        <td align="right" colspan="2" style="height: 10px; text-align: Center; vertical-align: middle;
                            background-color: #a9c6ee; font-weight: bold;">
                             Copy Spec Sheets To Agency:
                        </td>
                    </tr>
                    <tr>
                        <%--To Agency label and combobox rows (dependent on selected rep). DataID and binding info is in the codebehind.--%>
                        <td class="style3">
                            Rep #:
                        </td>
                        <td style="width: 80%">
                            <rad:RadComboBox ID="ctlViewToAgencyRepCombo" runat="server" AutoPostBack="true" AppendDataboundItems = "true"
                            Skin="ABL_Std" SkinsPath="~/RadControls/ComboBox/Skins" Width="320px" enabled="false" OnSelectedIndexChanged="CopyCheck"
                            Height="200px">
                            <Items>
                                 <rad:RadComboBoxItem Text="-- Select One --" Value="-1" />
                            </Items>
                            </rad:RadComboBox>
                        </td>
                    </tr>
     
                <%--Close and Copy buttons--%>
                </table>
                <br />
                <br />
                <table width="50%", align="center">
                    <tr>
                        <td align="center">
                            <asp:Button ID="ctlCopy" runat="server" Text="Copy" Visible="True" style="width: 95px;" enabled="false" OnClick="ctlCopy_CopySpecSheets" />
                            <asp:Button ID="ctlClose" runat="server" Text="Close" Visible="True" style="width: 95px;" onclientclick="CloseForm()" />
                        </td>
                    </tr>
                </table>
                <rad:AjaxLoadingPanel ID="ctlLoadingPanel" runat="server" Height="75px" MinDisplayTime="1000"
                    Transparency="5" Width="75px">
                    <asp:Image ID="Image1" runat="server" AlternateText="Loading..." ImageUrl="~/Images_ABL_Std/Grid/loading.gif" />
                </rad:AjaxLoadingPanel>
            </div>
  2. Eyup
    Admin
    Eyup avatar
    3013 posts

    Posted 05 Jul 2013 Link to this post

    Hi Adam,

    Please note that the button should be an Ajax initiator:
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="CopyButtonID">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="SecondComboID" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    In case you want to display a loading panel over the whole page, you can refer to the following code library:
    http://www.telerik.com/community/code-library/aspnet-ajax/ajax/how-to-make-a-radajaxloadingpanel-span-over-the-whole-page.aspx
    This article demonstrates how to center the loading panel on the screen:
    http://www.telerik.com/help/aspnet-ajax/ajax-center-loadingpanel.html

    Hope this helps.

    Regards,
    Eyup
    Telerik
    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 the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Adam
    Adam avatar
    10 posts
    Member since:
    Jul 2013

    Posted 08 Jul 2013 Link to this post

    Perfect! I was wondering what that relationship was, and adding a separate AjaxSetting section just for the button made the loading panel show up:

    My issue now is that the load appears to be blocking a page refresh that wasn't blocked before. There is supposed to be some output pushed to the screen, and the output doesn't show until the next action on the page is completed (ex: selected a different value in a combobox will cause the page to refresh and show the output from the loading process). Any ideas on what could possibly be wrong?
    <rad:AjaxSetting AjaxControlID="ctlCopy">
        <UpdatedControls>
            <rad:AjaxUpdatedControl ControlID="ctlCopy" LoadingPanelID="ctlLoadingPanel" />
        </UpdatedControls>
    </rad:AjaxSetting>
  5. Adam
    Adam avatar
    10 posts
    Member since:
    Jul 2013

    Posted 09 Jul 2013 Link to this post

    This issue was resolved. I needed to add Copy as an AjaxUpdatedControl, and this allowed it to refresh after the process was complete.
Back to Top