RadAjaxManager and RadWindow (Why postback closing?)

6 posts, 0 answers
  1. Stefano
    Stefano avatar
    4 posts
    Member since:
    Aug 2012

    Posted 15 Aug 2012 Link to this post

    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 
  2. Tsvetina
    Admin
    Tsvetina avatar
    1873 posts

    Posted 20 Aug 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Stefano
    Stefano avatar
    4 posts
    Member since:
    Aug 2012

    Posted 21 Aug 2012 Link to this post

    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.



  5. Tsvetina
    Admin
    Tsvetina avatar
    1873 posts

    Posted 23 Aug 2012 Link to this post

    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
    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.
  6. amonte
    amonte avatar
    24 posts
    Member since:
    Oct 2012

    Posted 15 Oct 2013 Link to this post

    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">
                    <!-- Begin Event Location Window Template -->
                            <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>
                                                                <!-- Begin Physical Location Panel -->
                                                                <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>
                                                                <!-- End Physical Location Panel -->
                                                            </td>
                                                        </tr>
                                                    </table>                                                                                
                                                </td>
                                            </tr>
                                        </table>                           
                                    </td>
                                </tr>
                            </table>
                        </asp:Panel>
                    <!-- End Event Location Window Template -->
                    </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.
  7. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 18 Oct 2013 Link to this post

    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
    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 the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017