How to make RadAjaxPanel and RadAjaxLoadingPanel work in usercontrols and customer server controls in UI for ASP.NET AJAX Ajax

jerry

5 posts

Member since:
Jun 2007

Posted 12 Jun 2007 Link to this post

Hi,
I am trying to put a RadAjaxPanel and a RadAjaxLoadingPanel in one User control or even custom server control later.
However, I cannot made it work under Prometheus.
Following is my code which is really simple. Could anyone give me some help or hints?

AjaxPanelUserControl.aspx

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="AjaxPanelUC.ascx.cs" 

Inherits="Controls_AjaxPanelUC" %> 

<%@ Register Assembly="System.Web.Extensions" Namespace="System.Web.UI" TagPrefix="asp" %> 

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 

<asp:ScriptManager ID="ScriptManager1" runat="server">  

</asp:ScriptManager> 

<telerik:RadAjaxPanel ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1" runat="server" 

Height="200px" Width="300px">  

<asp:Button ID="Button1" runat="server" Text="Button" /> 

</telerik:RadAjaxPanel> 

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px" 

InitialDelayTime="0" Width="75px">  

<asp:Image ID="Image1" runat="server" AlternateText="Loading..." ImageUrl="/RadAjaxTest/Images/loadingbar.gif" /> 

</telerik:RadAjaxLoadingPanel>

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 

<%@ Register Assembly="System.Web.Extensions" Namespace="System.Web.UI" TagPrefix="asp" %> 

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 

<%@ Register Src="Controls/AjaxPanelUC.ascx" TagName="AjaxPanelUC" 

    TagPrefix="uc1" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

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

<head runat="server">  

    <title>Untitled Page</title> 

</head> 

<body> 

    <form id="form1" runat="server">  

        <div> 

            <uc1:AjaxPanelUC ID="AjaxPanelUC1" runat="server" /> 

        </div> 

    </form> 

</body> 

</html>

The problem is that loading panel don't show when i clicked the button whereas it works if i don't put them in the usercontrol.
jerry

Konstantin Petkov

Admin

1911 posts

Posted 13 Jun 2007 Link to this post

Hi Jerry,

You are right - the loading panel is not displayed within user control along with RadAjaxPanel. Actually we were not aware of this issue, so thank you for bringing it to our attention. I will forward that to our developers for further investigation and have updated your Telerik points.

You can use RadAjaxManagerProxy instead. Find attached a sample demo I used to test the same scenario with the manager proxy control.

Sincerely yours,
Konstantin Petkov
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

ManagerProxyInUserControl.zip

Ramesh

1 posts

Member since:
Mar 2012

Posted 29 Mar 2012 Link to this post

Hi,
I am trying to put a RadAjaxPanel and a RadAjaxLoadingPanel in aspx page, where i have some combobox,one button and usercontrols.when ever i selectedtext in combo box changed, loading panel is showing but when i click button my loading panel is not showing.
Following is my code which is really simple. Could anyone give me some help or hints?

<%

@ Page Title="" Language="C#" MasterPageFile="~/Masterpages/sample.Master" AutoEventWireup="true"

CodeFile="~/Cdm/MoveCard.aspx.cs" Inherits="Web.Cdm.MoveCard"

EnableEventValidation="false" %>

<%

@ MasterType VirtualPath="~/Masterpages/Sample.Master" %>

<%

@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<%

@ Register Src="~/UserControls/UC_AddAndRemoveList.ascx" TagName="AddAndRemoveList"

TagPrefix="ucAddAndRemoveList" %>

<

asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Width="100%"

Height="100%">

</telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxPanel ID="radAjaxMoveCard" runat="server" EnableEmbeddedScripts="true"

LoadingPanelID="RadAjaxLoadingPanel1" EnableAJAX="true" EnablePageHeadUpdate="true">

<

telerik:RadScriptBlock ID="MoveCardScripts" runat="server">

$(

function () {

$(

'#<%=btnSave.ClientID %>').bind('click', ValidatePage);

SetUpTracker(

false, false);

});

function ValidatePage() {

postBackFn = jQuery.GetPostBackRefrence(

'<%=btnSave.ClientID %>');

var cmbSourceCardGroup = $find("<%=cmbSourceCardGroup.ClientID %>");

var cmbTargetCardGroup = $find('<%=cmbTargetCardGroup.ClientID %>');

if (cmbTargetCardGroup.get_value() == cmbSourceCardGroup.get_value()) {

showRadAlert(

'<asp:Literal ID="SourceTargetCardGroupSame" runat="server" Text="<%$ Resources:Error, NoMoveOnSameCardGropus%>"/>');

}

else {

postBackFn.call();

}

</script>

</telerik:RadScriptBlock>

<asp:Literal ID="ltrlListCardGroups" runat="server" Text="<%$ Resources:Link, ltrlListCardGroups %>" /></a></li>

<asp:Literal ID="ltrlListCards" runat="server" Text="<%$ Resources:Link, ltrlListCards %>" /></a></li>

<asp:Literal ID="ltrlListAccounts" runat="server" Text="<%$ Resources:Link, ltrlListAccounts %>" /></a></li>

</ul>

<asp:Literal ID="ltrlCardMsgBox" runat="server" Text="<%$ Resources:Link, ltrlCardMessageBox %>" /></a></li>

<asp:Literal ID="ltrlCreateNewCardGroup" runat="server" Text="<%$ Resources:Link, ltrlCreateNewCardGroup %>" /></a></li>

<asp:Literal ID="ltrlOrderCards" runat="server" Text="<%$ Resources:Link, ltrlOrderNewCards %>"></asp:Literal></a></li>

</ul>

<h2>

<asp:Literal ID="ltrlMoveCardMessage1" runat="server" Text="<%$ Resources: ltrlMoveCardMessage1 %>" /></h2>

<p>

<asp:Literal ID="ltrlMoveCardMessage2" runat="server" Text="<%$ Resources: ltrlMoveCardMessage2 %>" /> <a

id="lnkCardMessageBox" runat="server"><asp:Literal ID="ltrlCardMessageBox" runat="server"

Text="<%$ Resources:Link, ltrlCardMessageBox%>" /></a>

</p>

<p>

<asp:Literal ID="ltrlMoveCardMessage3" runat="server" Text="<%$ Resources: ltrlMoveCardMessage3 %>" /> <em><asp:Literal

ID="ltrlRefrenceNo" runat="server" /></em></p>

<hr />

</div>

<tr>

<td>

<label>

<asp:Literal ID="ltrlPayer" runat="server" Text="<%$ Resources:Common, ltrlPayer %>" />

</label>

</td>

</tr>

<tr>

<td>

<telerik:RadComboBox ID="cmbPayer" runat="server" AutoPostBack="true" MarkFirstMatch="True"

AutoCompleteSeparator=",;" Width="200px" OnSelectedIndexChanged="cmbPayer_SelectedIndexChanged"

TabIndex="1">

</telerik:RadComboBox>

</td>

</tr>

<tr>

</td>

</tr>

</table>

<tr>

<td>

<asp:Literal ID="ltrlSourceAccount" runat="server" Text="<%$ Resources:ltrlSourceAccount%>"></asp:Literal>

</label>

</td>

<label>

<asp:Literal ID="ltrlCardGroup" runat="server" Text="<%$ Resources: ltrlSourceGroup%>"></asp:Literal></label>

</td>

<td>

<asp:Literal ID="ltrlTargetAccount" runat="server" Text="<%$ Resources:ltrlTargetAccount%>"></asp:Literal>

</label>

</td>

<td>

<label>

<asp:Literal ID="ltrlTargetGroup" runat="server" Text="<%$ Resources: ltrlTargetGroup%>"></asp:Literal></label>

</td>

</tr>

<tr>

<telerik:RadComboBox ID="cmbSourceAccount" runat="server" MarkFirstMatch="True" AutoCompleteSeparator=",;"

AutoPostBack="true" Width="200px" OnSelectedIndexChanged="cmbSourceAccount_SelectedIndexChanged "

TabIndex="2">

</telerik:RadComboBox>

</td>

<telerik:RadComboBox ID="cmbSourceCardGroup" runat="server" MarkFirstMatch="True"

AutoCompleteSeparator=",;" AutoPostBack="true" Width="200px" OnSelectedIndexChanged="cmbSourceCardGroup_SelectedIndexChanged"

TabIndex="3">

</telerik:RadComboBox>

</td>

<telerik:RadComboBox ID="cmbTargetAccount" runat="server" MarkFirstMatch="True" AutoCompleteSeparator=",;"

AutoPostBack="true" Width="200px" OnSelectedIndexChanged="cmbTargetAccount_SelectedIndexChanged "

TabIndex="4">

</telerik:RadComboBox>

</td>

<telerik:RadComboBox ID="cmbTargetCardGroup" runat="server" MarkFirstMatch="True"

AutoCompleteSeparator=",;" AutoPostBack="true" Width="200px" OnSelectedIndexChanged="cmbTargetCardGroup_SelectedIndexChanged"

TabIndex="5">

</telerik:RadComboBox>

</td>

</tr>

<tr>

</td>

</tr>

</table>

<asp:Panel runat="server" ID="pnlLists">

<ucAddAndRemoveList:AddAndRemoveList ID="usrcntrlMoveCards" runat="server" AvailableCaption="<%$ Resources: ltrlSourceCardGroup %>"

AssignedCaption="<%$ Resources: ltrlTargetCardGroup %>" IsAssignedItemsRemoveable="false" />

</asp:Panel>

<asp:Button ID="btnSave" runat="server" Text="<%$ Resources:Button, btnSave %>" OnClick="btnSave_Click"

TabIndex="6" /></div>

</div>

</div>

<p>

</p>

</div>

</telerik:RadAjaxPanel>

</

asp:Content>

Maria Ilieva

Admin

4017 posts

Posted 03 Apr 2012 Link to this post

Hi Ramesh,

Could you please inspect your request on button click event and verify is ajax request fires correctly. Also ensure that no javascript errors appear on button click.
In this scenario I would suggest you to instead initiate a click on the client just preform ajaxRequest and handled the server AjaxRequest event to apply your server logic.

Kind regards,
Maria Ilieva
the Telerik team

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 their blog feed now.