AjaxLoading Panel animation not spinning

[Vitaly]

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.

[Rumen]

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

[Vitaly]

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:

<script type="text/javascript">
var currentLoadingPanel = null;
var currentUpdatedControl = null;
function ValidateFn() {
radconfirm("Are you sure you want to proceed without comments?", callbackFn);
return false;
}
function callbackFn(arg) {
//if the validation passes - 'simulate' the button's click
if (arg) {
currentLoadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID %>");
currentUpdatedControl = "<%= mainPanel.ClientID %>";
currentLoadingPanel.show(currentUpdatedControl);

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

[Rumen]

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>

or

<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

[Vitaly]

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.

[Rumen]

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