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

RadAjax problem with Web User Control

2 Answers 144 Views

Ajax

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

Sunil asked on 17 Aug 2010, 05:08 PM

Hi,

I have a .aspx page with web user controls loaded dynamically into a panel called Main_PH. Everything works as it should. However, when I try to introduct RadAjaxManager with loading panels things don't go so great.

Below is my code for the default.aspx page

<telerik:RadCodeBlock ID="Default_RadCodeBlock" runat="server">

<script type="text/javascript">

function RequestStart(sender, eventArgs) {

var loadingImage = document.getElementById('<%= Default_RadAjaxLoadingPanel.FindControl("Image1").ClientID %>');

var panel1 = $get("WUC_default_wuc_Panel_Loading");

loadingImage.style.position = "relative";

loadingImage.style.top = (parseInt(panel1.style.height) / 2) + "px";

}

function MyClientShowing(sender, args) {

args.get_loadingElement().style.border = "2px solid red";

args.set_cancelNativeDisplay(true);

$telerik.$(args.get_loadingElement()).show("slow");

}

function MyClientHiding(sender, args) {

args.get_loadingElement().style.border = "2px solid blue";

args.set_cancelNativeDisplay(true);

$telerik.$(args.get_loadingElement()).hide("slow");

}

</script>

</telerik:RadCodeBlock>

</head>

<body id="home">

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

<telerik:RadScriptManager ID="Default_ScriptManager" runat="server" />

<telerik:RadAjaxManager ID="Default_RadAjaxManager" runat="server"

DefaultLoadingPanelID="Default_RadAjaxLoadingPanel">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="LinkButton_MM_Inbox">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="Panel_Loading"

LoadingPanelID="Default_RadAjaxLoadingPanel">

</telerik:AjaxUpdatedControl>

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

<ClientEvents OnRequestStart="RequestStart" />

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="Default_RadAjaxLoadingPanel" runat="server" Transparency="30" Skin="Default">

<div class="loading">

<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/loading2.gif" />

</div>

</telerik:RadAjaxLoadingPanel>

......

<asp:PlaceHolder ID="Main_PH" runat="server">

</asp:PlaceHolder>

Here is the code for the pre-render in code behind of default.aspx

protected void Page_PreRender(object sender, EventArgs e)

{

Default_RadAjaxLoadingPanel.OnClientShowing = "MyClientShowing";

Default_RadAjaxLoadingPanel.OnClientHiding = "MyClientHiding";

}

Here is the code for the .ascx page which is loaded into Main_PH

<asp:Panel ID="Panel_Loading" runat="server" CssClass="loading_panel" Height="440px">

<h2>

Administration</h2>

<div class="content_main">

<h3>

1. Employee Settings - Personal</h3>

<div>

<label for="empid_ti">

Employee Id

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

<asp:TextBox ID="TextBox1" runat="server" EnableViewState="true"></asp:TextBox></div>

</asp: Panel>

When I click on the button LinkButton_MM_Inbox from the default.aspx page, what happens is the animation starts, finishes etc on the Panel_Loading from the .ascx and an Ajax postback happens but a new Web User Control.ascx does not appear on the page (which is what is supposed to happen).

If I change the code in the default.aspx page to this: (Main_PH instead of Panel_Loading...

<telerik:AjaxSetting AjaxControlID="LinkButton_MM_Inbox">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="Main_PH"

LoadingPanelID="Default_RadAjaxLoadingPanel">

</telerik:AjaxUpdatedControl>

</UpdatedControls>

</telerik:AjaxSetting>

... the Ajax postback happens, the new web user control is added as should happen but I don't get the animation in Panel_Loading.

I'm not really sure what to do?? I can't add the animations to Main_PH because Main_PH is heavily styled from the user controls and the animation will not show.

Any suggestions would be great! Thanks!

Sunny

2 Answers, 1 is accepted

Accepted

answered on 20 Aug 2010, 10:16 AM

Hello Sunil,

With your RadAjaxManager in the content page, your updated panel should be in the content page too. You can have a panel around your user control place holder and AJAX-ify that:

<telerik:RadAjaxManager ID="Default_RadAjaxManager" runat="server"

DefaultLoadingPanelID="Default_RadAjaxLoadingPanel">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="LinkButton_MM_Inbox">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="PanelWrapper"

LoadingPanelID="Default_RadAjaxLoadingPanel">

</telerik:AjaxUpdatedControl>

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

<ClientEvents OnRequestStart="RequestStart" />

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="Default_RadAjaxLoadingPanel" runat="server" Transparency="30" Skin="Default">

<div class="loading">

<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/loading2.gif" />

</div>

</telerik:RadAjaxLoadingPanel>

......

<asp:Panel Id="PanelWrapper" runat="server">

<asp:PlaceHolder ID="Main_PH" runat="server">

</asp:PlaceHolder>

</asp:Panel>

Veli
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items