This is a migrated thread and some comments may be shown as answers.

AjaxLoadingPanel tied to a button click

3 Answers 277 Views

Ajax

This is a migrated thread and some comments may be shown as answers.

Adam asked on 02 Jul 2013, 06:16 PM

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!

<html xmlns="http://www.w3.org/1999/xhtml">

<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 />

<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>

3 Answers, 1 is accepted

answered on 05 Jul 2013, 01:49 PM

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.

answered on 08 Jul 2013, 03:44 PM

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>

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

AjaxLoadingPanel tied to a button click

3 Answers, 1 is accepted