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

AjaxLoading Panel animation not spinning

5 Answers 186 Views

AjaxLoadingPanel

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

Vitaly asked on 10 May 2017, 02:18 PM

Hi,

I have javascript which gets call on client click from modal popup extender. When I click on OK button in confirm dialog box AjaxLoadingPanel animation not spinning.

Here is my javascript:

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript">
function DateSelected(sender, eventArgs) {
sender.get_textBox().focus();
}
</script>
<script type="text/javascript">
var currentLoadingPanel = null;
var currentUpdatedControl = null;
function OnClientClick() {
var txttext1 = document.getElementById('<%=txtComments.ClientID%>');
if (txttext1.value != "") {
$find("ModalBehaviour").hide();
currentLoadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID %>");
currentUpdatedControl = "<%= mainPanel.ClientID %>";
currentLoadingPanel.show(currentUpdatedControl);
return true;
}
else {
if (confirm("Are you sure you want to proceed without comments ?")) {
$find("ModalBehaviour").hide();
currentLoadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID %>");
currentUpdatedControl = "<%= mainPanel.ClientID %>";
currentLoadingPanel.show(currentUpdatedControl);
return true; }
else {
$find("ModalBehaviour").hide();
return false; }
}
}

</script>

Here is loading Panel:

<telerik:RadScriptManager ID="ScriptManager1" runat="server" />
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="mainPanel">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="mainPanel" LoadingPanelID="RadAjaxLoadingPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" EnableSkinTransparency ="true" runat="server" Skin="Office2010Blue">
</telerik:RadAjaxLoadingPanel>

This is part of the MainPanel:

<asp:Panel ID="mainPanel" runat="server">
<telerik:RadPanelBar ID="formPanel" runat="server" Width="99%" ExpandMode="MultipleExpandedItems" Skin="Forest" EnableEmbeddedSkins="false" BackColor="#2D6193" >
<Items>
<telerik:RadPanelItem Expanded="true" Text="PRINCIPAL PER SESSION REQUEST APPLICATION FORM " runat="server" Selected="true" Font-Bold="true" Font-Size ="13" Font-Names ="Verdana" ForeColor="white" >
<Items>
<telerik:RadPanelItem Value="principalForm" runat="server" Height="75">
<ItemTemplate>
<table>
<tr>
<asp:Panel ID="validationPanel" runat="server" Visible="false">
<td >
<fieldset style="width: 700px; height: 230px; margin-bottom: 10px;">
<legend style="padding-top:20px;">Please correct the following:</legend>
<asp:ValidationSummary ID="validationSummary1" runat="server" DisplayMode="BulletList" CssClass="validationsummary" />
<asp:CustomValidator ID="customValidator1" runat ="server" Display="none" OnServerValidate="customValidator1_ServerValidate" ></asp:CustomValidator>
</fieldset>
</td>
</asp:Panel>
</tr>
</table>

And finally modal popup extender:

<asp:Button ID="btnShow1" runat="server" Style="display: none; position: relative" Text="Show Modal Popup" />
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BackgroundCssClass="modalBackground"
DropShadow="true" PopupControlID="ApprPanel" TargetControlID="btnShow1" BehaviorID="ModalBehaviour"></cc1:ModalPopupExtender>
<asp:Panel ID="ApprPanel" runat="server" BackColor="White" BorderStyle="Solid" BorderWidth="2px"
Height="200px" Style="display: none; color:#b0c4de;" Width="570px" >
<div>
<table>
<tr >
<td style="border-right-style: none; border-left-style: none; border-bottom-style: none;
padding:5px;border-top-color: #abd971; background-color: #284A6D; text-align: center;">
<asp:Label ID="lblError" runat="server" Text="Please Enter Comments(optional)"
Font-Bold="True" Font-Size="Large" ForeColor="White"></asp:Label>
</td>
</tr>
<tr>
<td align="center" style="margin-top: 10px; vertical-align:middle;">
<asp:TextBox ID="txtComments" runat="server" Width="550px" onKeyUp="Count(this,250)" onChange="Count(this,250)"
Height="113px" TextMode="MultiLine"></asp:TextBox>
</td>
</tr>
<tr>
<td align="center" style="height: 39px">
<br />
<asp:Button ID="submitComments" runat="server" Text="Submit" CssClass="button" OnClick="submitComments_Click" OnClientClick="return OnClientClick()" />
</td>
</tr>
</table>
</div>
</asp:Panel>

Please help me to resolve this issue.

Thanks so much.

5 Answers, 1 is accepted

answered on 12 May 2017, 03:03 PM

Hello Vitaly,

In general, the AjaxControlToolkit controls and script manager are incompatible with other IScriptControls such as ours: http://docs.telerik.com/devtools/aspnet-ajax/general-information/troubleshooting/general-troubleshooting#telerik-controls-are-incompatible-with-ajax-control-toolkit. Moreover, we've had reports that indicate that they emit overrides to core MS AJAX methods that can break our controls.

That's why my suggestion is to replace the modal popup extender with RadWindow which is quite similar to it.

Here is how to show it: http://docs.telerik.com/devtools/aspnet-ajax/controls/window/getting-started/opening-windows.
How to put controls inline in it: http://docs.telerik.com/devtools/aspnet-ajax/controls/window/getting-started/using-radwindow-as-controls-container.
How to show it from the server: http://docs.telerik.com/devtools/aspnet-ajax/controls/window/troubleshooting/opening-from-the-server. To hide it, use the same approach but call the .close() method.
How to use it with AJAX: http://docs.telerik.com/devtools/aspnet-ajax/controls/window/how-to/how-to-use-radwindow-with-ajax.

Regards,

Rumen

Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

answered on 15 May 2017, 04:11 PM

Hi Rumen

thanks for you respond.

As you suggested I replace modal popup extender with radwindow:

<telerik:RadWindow ID="RadWindow1" runat="server" Modal="true" Animation="Fade" AutoSizeBehaviors="Default" Width="550px" Height="250px" Behaviors="None">
<ContentTemplate>
<asp:Panel ID="ApprPanel" runat="server" BackColor="White">
<div>
<table>
<tr >
<td style="border-right-style: none; border-left-style: none; border-bottom-style: none;
padding:5px;border-top-color: #abd971; background-color: #284A6D; text-align: center;">
<asp:Label ID="lblError" runat="server" Text="Please Enter Comments(optional)"
Font-Bold="True" Font-Size="Large" ForeColor="White"></asp:Label>
</td>
</tr>
<tr>
<td align="center" style="margin-top: 10px; vertical-align:middle;">
<asp:TextBox ID="txtComments" runat="server" Width="550px" onKeyUp="Count(this,250)" onChange="Count(this,250)"
Height="80px" TextMode="MultiLine" ></asp:TextBox>
</td>
</tr>
<tr>
<td align="center" style="height: 39px">
<br />
<asp:Button ID="submitComments" runat="server" Text="Submit" CssClass="button" OnClick="submitComments_Click" OnClientClick="ValidateFn(); return false;" />
</td>
</tr>
</table>
</div>
</asp:Panel>
</ContentTemplate>
</telerik:RadWindow>

However onclientclick I perform JS:

// __doPostBack("<%= submitComments.UniqueID %>", ""); }
}
</script>

When I use doPostBack radajaxloadpanel animation spinning is not working but when I comment out postback and use:

currentLoadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID %>");
currentUpdatedControl = "<%= mainPanel.ClientID %>";
currentLoadingPanel.show(currentUpdatedControl);

Animation is spinning but postback not working and nothing is happened.

Please help.

thanks.

Vitaly.

answered on 18 May 2017, 02:56 PM

Hello Vitaly,

Try the provided variant below

<telerik:RadAjaxManager runat="server" ID="ram1" DefaultLoadingPanelID="ralp1">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="ApprPanel">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="ApprPanel" />

<telerik:AjaxUpdatedControl ControlID="mainPanel" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel runat="server" ID="ralp1" Skin="Black"></telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxManager runat="server" ID="ram1" DefaultLoadingPanelID="ralp1">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="submitComments">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="ApprPanel" />

<telerik:AjaxUpdatedControl ControlID="mainPanel" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel runat="server" ID="ralp1" Skin="Black"></telerik:RadAjaxLoadingPanel>

Regards,
Rumen
Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

answered on 18 May 2017, 05:03 PM

Thank you Rumen. This one is working fine.

Now I try to replace AJAX modal popup extender in the next page.

But when I replace it, content not showing when I open RadWindow.The following please see the only change I did on this page:

<telerik:RadWindow ID="RadWindow1" runat="server" Modal="true" Animation="Fade" AutoSizeBehaviors="Default" Width="550px" Height="250px"
VisibleStatusbar="false" AutoSize="false" Behaviors="None" Skin="Outlook" >
<ContentTemplate>
<asp:Panel ID="PanelError" runat="server" BackColor="White" BorderStyle="Solid" BorderWidth="2px"
Height="200px" Style="display: none;" Width="550px">
<div>
<table style="width: 100%; line-height: normal; position: absolute; text-align: center;">
<tr>
<td align="center" style="width: 90%; height: 15px; font-size:medium; font-weight:bold; background-color: #b0c4de; color:Red;">
<b>SCHEDULE ERROR(S)</b>
</td>
</tr>
<tr>
<td align="center" style="width: 90%; height: 15px; font-size:small; font-weight:bold;color:Red; padding-bottom:5px;">
<b>The following should be corrected in Galaxy:</b>
</td>
</tr>
<tr></tr>
<tr>
<asp:Panel ID="SchNumofDaysErrPanel" runat="server" Visible="false" >
<td align="left" style="background-image: none;
text-align:justify;font-family:Arial; font-size:small; color:Navy; padding-bottom:5px; ">
<asp:BulletedList ID="BulletedList" runat="server" BulletStyle="Disc">
<asp:ListItem>Schedule does not correspond to num of preps(days)</asp:ListItem>
</asp:BulletedList>

</td>
</asp:Panel>
</tr>
<tr></tr>
<tr>
<asp:Panel ID="StartDErrPanel" runat="server" Visible="false">
<td align="left" style="background-image: none;
text-align:justify; font-family:Arial; font-size:small; color:Navy; ">
<asp:BulletedList ID="BulletedList1" runat="server" BulletStyle="Disc">
<asp:ListItem>Start Date must be valid work day</asp:ListItem>
</asp:BulletedList>
</td>
</asp:Panel>
</tr>
<tr></tr>
<tr>
<asp:Panel ID="EndDErrPanel" runat="server" Visible="false">
<td align="left" style="background-image: none;
text-align:justify; font-family:Arial;font-size:small; color:Navy;">
<asp:BulletedList ID="BulletedList2" runat="server" BulletStyle="Disc">
<asp:ListItem>End Date must be valid work day</asp:ListItem>
</asp:BulletedList>

</td>
</asp:Panel>
</tr>
<tr></tr>
<tr>
<asp:Panel ID="TermErrPanel" runat="server" Visible="false">
<td align="left" style="background-image: none;
text-align:justify; font-family:Arial;font-size:small; color:Navy; ">
<asp:BulletedList ID="BulletedList3" runat="server" BulletStyle="Disc">
<asp:ListItem>Scheduled dates not correspond to term id</asp:ListItem>
</asp:BulletedList>

</td>
</asp:Panel>
</tr>
<tr></tr>
<tr>
<asp:Panel ID="JobErrPanel" runat="server" Visible="false">
<td align="left" style="background-image: none;
text-align:justify; font-family:Arial; font-size:small; color:Navy; ">
<asp:BulletedList ID="BulletedList4" runat="server" BulletStyle="Disc">
<asp:ListItem>Employee should be attached to the job</asp:ListItem>
</asp:BulletedList>

</td>
</asp:Panel>
</tr>
<tr></tr>
<tr>
<asp:Panel ID="OverlapErrPanel" runat="server" Visible="false">
<td align="left" style="background-image: none;
text-align:justify; font-family:Arial; font-size:small; color:Navy; ">
<asp:BulletedList ID="BulletedList5" runat="server" BulletStyle="Disc">
<asp:ListItem>Overlapping schedule</asp:ListItem>
</asp:BulletedList>

</td>
</asp:Panel>
</tr>
<tr></tr>
<tr>
<asp:Panel ID="LocErrPanel" runat="server" Visible="false">
<td align="left" style="background-image: none;
text-align:justify; font-family:Arial; font-size:small; color:Navy; ">
<asp:BulletedList ID="BulletedList6" runat="server" BulletStyle="Disc">
<asp:ListItem>Location does not correspond to the attached job</asp:ListItem>
</asp:BulletedList>

</td>
</asp:Panel>
</tr>
<tr></tr>
<tr>
<asp:Panel ID="FundErrPanel" runat="server" Visible="false">
<td align="left" style="background-image: none;
text-align:justify; font-family:Arial; font-size:small; color:Navy; ">
<asp:BulletedList ID="BulletedList7" runat="server" BulletStyle="Disc">
<asp:ListItem>Overlapping dates with fundind request dates</asp:ListItem>
</asp:BulletedList>

</td>
</asp:Panel>
</tr>
<tr>
<td align="center" style="padding-top:5px;">
<asp:Button ID="OkButton" runat="server" Text="Close" CssClass="button" Width="56px" />
</td>
</tr>
</table>
</div>
</asp:Panel>
</ContentTemplate>
</telerik:RadWindow>

Please help me.

Thanks.

Vitaly.

answered on 23 May 2017, 01:24 PM

Hello Vitaly,

The content inside the ContentTemplate contains Visible="False" and display:none attributes which hides it. You have to remove them to visualize it:

<telerik:RadWindow VisibleOnPageLoad="true" ID="RadWindow1" runat="server" Modal="true" Animation="Fade" AutoSizeBehaviors="Default" Width="850px" Height="250px"

VisibleStatusbar="true" AutoSize="true" Behaviors="None" Skin="Outlook">

<ContentTemplate>

<asp:Panel ID="PanelError" runat="server" BackColor="White" BorderStyle="Solid" BorderWidth="2px"

Height="200px" Width="550px">

<div>

<table style="width: 100%; line-height: normal; position: absolute; text-align: center;">

<tr>

<td align="center" style="width: 90%; height: 15px; font-size: medium; font-weight: bold; background-color: #b0c4de; color: Red;">

<b>SCHEDULE ERROR(S)</b>

</td>

</tr>

<tr>

<td align="center" style="width: 90%; height: 15px; font-size: small; font-weight: bold; color: Red; padding-bottom: 5px;">

<b>The following should be corrected in Galaxy:</b>

</td>

</tr>

<tr></tr>

<tr>

<asp:Panel ID="SchNumofDaysErrPanel" runat="server" Visible="true">

<td align="left" style="background-image: none; text-align: justify; font-family: Arial; font-size: small; color: Navy; padding-bottom: 5px;">

<asp:BulletedList ID="BulletedList" runat="server" BulletStyle="Disc">

<asp:ListItem>Schedule does not correspond to num of preps(days)</asp:ListItem>

</asp:BulletedList>

</td>

</asp:Panel>

</tr>

<tr></tr>

<tr>

<asp:Panel ID="StartDErrPanel" runat="server" Visible="true">

<td align="left" style="background-image: none; text-align: justify; font-family: Arial; font-size: small; color: Navy;">

<asp:BulletedList ID="BulletedList1" runat="server" BulletStyle="Disc">

<asp:ListItem>Start Date must be valid work day</asp:ListItem>

</asp:BulletedList>

</td>

</asp:Panel>

</tr>

<tr></tr>

<tr>

<asp:Panel ID="EndDErrPanel" runat="server" Visible="true">

<td align="left" style="background-image: none; text-align: justify; font-family: Arial; font-size: small; color: Navy;">

<asp:BulletedList ID="BulletedList2" runat="server" BulletStyle="Disc">

<asp:ListItem>End Date must be valid work day</asp:ListItem>

</asp:BulletedList>

</td>

</asp:Panel>

</tr>

<tr></tr>

<tr>

<asp:Panel ID="TermErrPanel" runat="server" Visible="true">

<td align="left" style="background-image: none; text-align: justify; font-family: Arial; font-size: small; color: Navy;">

<asp:BulletedList ID="BulletedList3" runat="server" BulletStyle="Disc">

<asp:ListItem>Scheduled dates not correspond to term id</asp:ListItem>

</asp:BulletedList>

</td>

</asp:Panel>

</tr>

<tr></tr>

<tr>

<asp:Panel ID="JobErrPanel" runat="server" Visible="true">

<td align="left" style="background-image: none; text-align: justify; font-family: Arial; font-size: small; color: Navy;">

<asp:BulletedList ID="BulletedList4" runat="server" BulletStyle="Disc">

<asp:ListItem>Employee should be attached to the job</asp:ListItem>

</asp:BulletedList>

</td>

</asp:Panel>

</tr>

<tr></tr>

<tr>

<asp:Panel ID="OverlapErrPanel" runat="server" Visible="true">

<td align="left" style="background-image: none; text-align: justify; font-family: Arial; font-size: small; color: Navy;">

<asp:BulletedList ID="BulletedList5" runat="server" BulletStyle="Disc">

<asp:ListItem>Overlapping schedule</asp:ListItem>

</asp:BulletedList>

</td>

</asp:Panel>

</tr>

<tr></tr>

<tr>

<asp:Panel ID="LocErrPanel" runat="server" Visible="true">

<td align="left" style="background-image: none; text-align: justify; font-family: Arial; font-size: small; color: Navy;">

<asp:BulletedList ID="BulletedList6" runat="server" BulletStyle="Disc">

<asp:ListItem>Location does not correspond to the attached job</asp:ListItem>

</asp:BulletedList>

</td>

</asp:Panel>

</tr>

<tr></tr>

<tr>

<asp:Panel ID="FundErrPanel" runat="server" Visible="true">

<td align="left" style="background-image: none; text-align: justify; font-family: Arial; font-size: small; color: Navy;">

<asp:BulletedList ID="BulletedList7" runat="server" BulletStyle="Disc">

<asp:ListItem>Overlapping dates with fundind request dates</asp:ListItem>

</asp:BulletedList>

</td>

</asp:Panel>

</tr>

<tr>

<td align="center" style="padding-top: 5px;">

<asp:Button ID="OkButton" runat="server" Text="Close" CssClass="button" Width="56px" />

</td>

</tr>

</table>

</div>

</asp:Panel>

</ContentTemplate>

</telerik:RadWindow>

Regards,
Rumen
Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.