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

RadAjaxManager and RadWindow (Why postback closing?)

5 Answers 469 Views

Ajax

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

Stefano asked on 15 Aug 2012, 03:40 PM

Hi, I have an issue that I can't solve with RadWindow and RadAjaxManager

When the user closes a RadWindow after editing something (for example editing an appointment from RadGrid or editing a row from RadSchedule), and clicks the OK button (that does something server side with a callback in C#), the control will postback despire RadAjaxManager setting. This is very annoying because the page is entirely redrawn.

When the user open the popup (that is also a server side event) RadAjaxManager works correctly and postback does not happen.

Any Idea?

This is my scenario taken by the example of editing a radschedule with a custom radwindow popup:

Radmanager is

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadScheduler1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="calendarPopup" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="btnOk">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadScheduler1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="btnCancel">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadScheduler1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

Here is the RadWindow:

<telerik:RadWindow ID="calendarPopup" runat="server" Skin="Windows7" AutoSize="True"

Animation="Fade" EnableShadow="True" Modal="True" Opacity="100">

<Localization Maximize="<%$ Resources:RadWindow, Maximize %>" Minimize="<%$ Resources:RadWindow, Minimize %>"

Close="<%$ Resources:RadWindow, Close %>" PinOff="<%$ Resources:RadWindow, PinOff %>"

PinOn="<%$ Resources:RadWindow, PinOn %>" Reload="<%$ Resources:RadWindow,Reload %>"

Restore="<%$ Resources:RadWindow, Restore%>" Cancel="<%$ Resources:RadWindow, Cancel %>" />

<ContentTemplate>

<table width="100%">

<tr>

<td>

<asp:Literal ID="lblAppointmentName" runat="server" Text="Nome del Calendario"></asp:Literal>

</td>

</tr>

<tr>

<td>

<asp:TextBox ID="txtAppointmentName" runat="server" Width="250px"></asp:TextBox>

</td>

</tr>

<tr>

<td>

<asp:Literal ID="lblAppointmentDescription" runat="server" Text="Descrizione Evento"></asp:Literal>

</td>

</tr>

<tr>

<td>

<asp:TextBox ID="txtAppointmentDescription" runat="server" Width="250px" TextMode="MultiLine"

Height="200"></asp:TextBox>

</td>

</tr>

<tr>

<td style="float: right;">

<br />

<telerik:RadButton ID="btnOk" runat="server" Text="Salva" OnClick="btnOk_Click" Skin="Windows7">

<Icon PrimaryIconCssClass="rbOk" PrimaryIconLeft="4" PrimaryIconTop="4" />

</telerik:RadButton>

<telerik:RadButton ID="btnCancel" runat="server" Text="Annulla" OnClick="btnCancel_Click"

Skin="Windows7">

<Icon PrimaryIconCssClass="rbCancel" PrimaryIconLeft="4" PrimaryIconTop="4" />

</telerik:RadButton>

</td>

</tr>

</table>

</ContentTemplate>

</telerik:RadWindow>

Here is the Callback used to open the popup (that works with ajax)

protected void RadScheduler1_FormCreating(object sender, SchedulerFormCreatingEventArgs e)

{

e.Cancel = true;

switch (e.Mode)

{

case SchedulerFormMode.AdvancedEdit:

case SchedulerFormMode.Edit:

{

calendarPopup.Title = "Edit Appointment";

// Edit inizializing code here

}

break;

case SchedulerFormMode.AdvancedInsert:

case SchedulerFormMode.Insert:

{

calendarPopup.Title = "Create Appointment";

txtAppointmentName.Text = String.Empty;

txtAppointmentDescription.Text = String.Empty;

}

break;

}

//This will open the popup!

string script = "function f(){$find(\"" + calendarPopup.ClientID + "\").show(); Sys.Application.remove_load(f);}Sys.Application.add_load(f);";

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", script, true);

}

And Here is the callback that does not work.. because every time it closes the popup it will redraw the entire page:

protected void btnCancel_Click(object sender, EventArgs e)

{

//This will close the popup!

string script = "function f(){$find(\"" + calendarPopup.ClientID + "\").hide(); Sys.Application.remove_load(f);}Sys.Application.add_load(f);";

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", script, true);

}

protected void btnOk_Click(object sender, EventArgs e)

{

//This will close the popup!

string script = "function f(){$find(\"" + calendarPopup.ClientID + "\").hide(); Sys.Application.remove_load(f);}Sys.Application.add_load(f);";

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", script, true);

//Creating or Saving appointment here

}

Where am I Wrong? The same behaviour happens with the RadGrid. I suppose it is a wrong AjaxManager Setting.. but I read carefully and I didn't find nothing for my scenario.

Thanks for any help

5 Answers, 1 is accepted

answered on 20 Aug 2012, 01:13 PM

Hello Stefano,

The cause of the issue is most probably that you are loading the window as an updated control, which is incorrect in a scenario with a ContentTemplate (see more information here).
Remove this setting and see if the problem is resolved on your side:

<telerik:AjaxSetting AjaxControlID="RadScheduler1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="calendarPopup" />

</UpdatedControls>

</telerik:AjaxSetting>

Regards,
Tsvetina
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.

answered on 21 Aug 2012, 08:48 AM

Thanks a lot for your reply. Now I have modified my code in this way:

RadAjaxManager:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadScheduler1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadScheduler1" />

<telerik:AjaxUpdatedControl ControlID="panelPopup" LoadingPanelID="RadAjaxLoadingPanel1"/>

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="panelPopup">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadScheduler1" />

<telerik:AjaxUpdatedControl ControlID="panelPopup" LoadingPanelID="RadAjaxLoadingPanel1"/>

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

Then My popup:

<telerik:RadWindow ID="calendarPopup" runat="server" Skin="Windows7" AutoSize="True"

Animation="Fade" EnableShadow="True" Modal="False" Opacity="100" ReloadOnShow="True">

<ContentTemplate>

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

<table width="100%">

<tr>

<td>

<asp:Literal ID="lblAppointmentName" runat="server" Text="Nome del Calendario"></asp:Literal>

</td>

</tr>

<tr>

<td>

<asp:TextBox ID="txtAppointmentName" runat="server" Width="250px"></asp:TextBox>

</td>

</tr>

<tr>

<td>

<asp:Literal ID="lblAppointmentDescription" runat="server" Text="Descrizione Evento"></asp:Literal>

</td>

</tr>

<tr>

<td>

<asp:TextBox ID="txtAppointmentDescription" runat="server" Width="250px" TextMode="MultiLine"

Height="200"></asp:TextBox>

</td>

</tr>

<tr>

<td>

<asp:Literal ID="lblOwner" runat="server" Text="Proiprietario"></asp:Literal>

</td>

</tr>

<tr>

<td>

<telerik:RadComboBox ID="cmbOwner" runat="server" Width="250px" Height="140px" DataTextField="DisplayName"

DataValueField="Id" AllowCustomText="False" Culture="it-IT" MarkFirstMatch="True"

Skin="Windows7" AutoPostBack="False">

</telerik:RadComboBox>

</td>

</tr>

<tr>

<td>

<asp:Literal ID="lblCalendar" runat="server" Text="Calendario"></asp:Literal>

</td>

</tr>

<tr>

<td>

<telerik:RadComboBox ID="cmbCalendar" runat="server" Width="250px" Height="140px"

DataTextField="Name" DataValueField="Id" AllowCustomText="False" Culture="it-IT"

MarkFirstMatch="True" Skin="Windows7" AutoPostBack="False">

</telerik:RadComboBox>

</td>

</tr>

<tr>

<td>

<asp:CheckBox runat="server" ID="chkAllDayEvent" Text="Tutto il Giorno" Checked="false"

SkinID="Windows7" />

</td>

</tr>

<tr>

<td>

<asp:Literal ID="lblDateTimeFrom" runat="server" Text="Data / Ora Inizio"></asp:Literal>

</td>

</tr>

<tr>

<td>

<telerik:RadDatePicker runat="server" ID="dtpFrom" Width="83px" Skin="Windows7" Culture="it-IT"

MinDate="1900-01-01">

<DatePopupButton Visible="True" />

<DateInput ID="dtpInputFrom" runat="server" Culture="it-IT" EnableSingleInputRendering="false" />

</telerik:RadDatePicker>

<br />

<telerik:RadTimePicker runat="server" ID="dtpTimeFrom" Width="65px" Skin="Windows7"

Culture="it-IT">

<DateInput ID="DateInput3" runat="server" EmptyMessage=" " EnableSingleInputRendering="false" />

<TimePopupButton Visible="True" />

<TimeView ID="TimeView1" runat="server" Columns="2" ShowHeader="false" StartTime="07:00"

EndTime="21:00" Interval="00:30" />

</telerik:RadTimePicker>

<br />

</td>

</tr>

<tr>

<td>

<asp:Literal ID="lblDateTimeTo" runat="server" Text="Data / Ora Fine"></asp:Literal>

</td>

</tr>

<tr>

<td>

<telerik:RadDatePicker runat="server" ID="dtpTo" Width="83px" Skin="Windows7" Culture="it-IT"

MinDate="1900-01-01">

<DatePopupButton Visible="True" />

<DateInput ID="dtpInputTo" runat="server" Culture="it-IT" EnableSingleInputRendering="false" />

</telerik:RadDatePicker>

<br />

<telerik:RadTimePicker runat="server" ID="dtpTimeTo" Width="65px" Skin="Windows7"

Culture="it-IT">

<DateInput ID="DateInput5" runat="server" EmptyMessage=" " EnableSingleInputRendering="false" />

<TimePopupButton Visible="True" />

<TimeView ID="TimeView2" runat="server" Columns="2" ShowHeader="false" StartTime="07:00"

EndTime="21:00" Interval="00:30" />

</telerik:RadTimePicker>

<br />

</td>

</tr>

<tr>

<asp:Literal ID="lblValidationError" runat="server" Text="" />

<td style="float: right;">

<br />

<telerik:RadButton ID="btnOk" runat="server" Text="Salva" OnClick="btnOk_Click" Skin="Windows7">

<Icon PrimaryIconCssClass="rbOk" PrimaryIconLeft="4" PrimaryIconTop="4" />

</telerik:RadButton>

<telerik:RadButton ID="btnCancel" runat="server" Text="Annulla" OnClick="btnCancel_Click"

Skin="Windows7">

<Icon PrimaryIconCssClass="rbCancel" PrimaryIconLeft="4" PrimaryIconTop="4" />

</telerik:RadButton>

</td>

</tr>

</table>

</asp:Panel>

</ContentTemplate>

</telerik:RadWindow>

As you can see, I wrapped everything inside a panel inside contenttemplate.

Now in the btnOk Clik Event I have this:

protected void btnOk_Click(object sender, EventArgs e)

{

//Some code here to validate the inserted data.

//If we have some error, we don't close the popup, and show a label with the error. Keeping the popup open

//Only if everything is ok, we close the popup and update the schedule in this way:

RadScheduler1.UpdateAppointment(tApp);

RadScheduler1.Rebind();

string script = "function f(){$find(\"" + calendarPopup.ClientID + "\").hide(); Sys.Application.remove_load(f);}Sys.Application.add_load(f);";

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", script, true);

}

Everything seems ok.
Opening popup does not postback.

The popup does not close and updates the error label if the inserted data are invalid.

Instead, if everything is ok, popup wil close without postback and without refreshing the page.

But schedule does not refresh!

calling Rebind() is not enough to refresh the schedule!

The only way to show the created/edited appointment is to go to the next day, and then returning back to the edited day. In this way I'll see the changes made by the popup.

Note that I'll not reload the datasource, but I change only the appontment and call the UpdateAppontment() method.

What am I doing wrong?

Thank in advance for your help.

answered on 23 Aug 2012, 02:53 PM

Hello Stefano,

Have you tried keeping this setting, as it is what is needed to refresh the scheduler:

<telerik:AjaxSetting AjaxControlID="btnOk">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadScheduler1" />

</UpdatedControls>

</telerik:AjaxSetting>

If it breaks the AJAX behavior, you could do a manual AJAX request on closing the window in order to refresh the scheduler. Let me know if you get to this and if you need additional information.

All the best,
Tsvetina
the Telerik team

answered on 15 Oct 2013, 05:47 PM

I've read through all the posts I can find on this topic and have tried all of the suggestions, but I cannot get the RadWindow to stay open when attempting an Ajax request from a control that exists in the window. Every suggestion I've followed has not worked out.

Here's where I currently stand:

<telerik:radajaxmanager ID="ramModifyEvent" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="rcbEventCountry">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="pnlEventLocationContentWrapper" LoadingPanelID="rlpEventLocation" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:radajaxmanager>

<telerik:radajaxloadingpanel runat="server" ID="rlpEventLocation"><p>LOADING....</p>

</telerik:radajaxloadingpanel>

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

<telerik:RadWindowManager runat="server" ID="rdwManager"

Behaviors="Close" VisibleStatusbar="False" Modal="True" PreserveClientState="true">

<Windows>

<telerik:RadWindow ID="EventLocation" Width="1200" Height="600" VisibleOnPageLoad="false" CssClass="radwindow" runat="server" Title="Edit Event Location">

<ContentTemplate>

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

<table width="100%">

<tr>

<td width="60%" valign="top">

<table width="98%" align="center" cellpadding="0" cellspacing="0" class="Plain" style="font-size:12px;font-family:Verdana">

<tr>

<td valign="top">

<table width="100%">

<tr>

<td>

<div style="margin-left: 30px;">

<table width="100%">

<tr>

<td align="left" width="35%">Country</td>

<td align="left">

<telerik:RadComboBox ID="rcbEventCountry" runat="server" OnSelectedIndexChanged="rcbEventCountry_SelectedIndexChanged" AutoPostBack="true"></telerik:RadComboBox>

</td>

</tr>

<tr>

<td align="left" width="35%">State</td>

<td align="left">

<telerik:RadComboBox OnClientFocus="setPhysicalLocation" OnClientSelectedIndexChanged="updateEventMapLocation" ID="rcbEventState" width="150" runat="server"></telerik:RadComboBox>

</td>

</tr>

</table>

</div>

</td>

</tr>

</table

</td>

</tr>

</table>

</td>

</tr>

</table>

</asp:Panel>

</ContentTemplate>

</telerik:RadWindow>

</Windows>

</telerik:RadWindowManager>

</asp:Panel>

Any assistance getting the rcbEventCountry combo box to fire via Ajax instead of postback is greatly appreciated.

answered on 18 Oct 2013, 08:53 AM

Hello,

The following help article epxlains how to use RadWindow with AJAX: http://www.telerik.com/help/aspnet-ajax/radwindow-ajaxifying.html.

My best guess at this point is that somewhere you have another AJAX setting or UpdatePanel with UpdateMode=Always that encompasses the pnlEventLocationWrapper Panel. Since it holds the RdWindow and the RadWIndowManager all partial postbacks will include and dispose these control, so opened popups will close (this is explained in the article above).

I would advise taking the EventLocation RadWindow out of this panel (and any other UpdatePanels), and the RadWindowManager. Also, the radwindow CSS class is not needed, all RadWindows will automatically add .RadWindow to their popup element.

Regards,
Marin Bratanov
Telerik

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

RadAjaxManager and RadWindow (Why postback closing?)

5 Answers, 1 is accepted