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

Ajax Manager doesn't work with button in RadWindow

10 Answers 285 Views

Ajax

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

10 Answers, 1 is accepted

answered on 03 Aug 2011, 01:03 PM

RadControlsWebSite12.rar

Hello Boruch,

Thank you for contacting us.

Juding from the provided information it is impossible to find the roots of this issue.
So, if it is possible, can you provide some sample code that illustrates your issue?

I am also attaching a sample solution that implements a scenario similar to what you described.
Give it a try and let me know if it helps.

Best wishes,
Genti
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 04 Aug 2011, 08:52 AM

I'm not using the radwindow like you. I'm using contentTemplate inside the radwindow without Navigateurl.
The idea is as follows:
The radwindow is set to VisibleOnPageLoad="false". A button on the page sets it to VisibleOnPageLoad="true" in the codebhind. It is necessary for me to do it via codebehind since the form inside the radwindow needs to be cleared before the radwindow appears. Inside the contenttemplate of the radwindow there are two buttons either to insert to form info to a database or to clear the form. The button that clears the form (in codebehind) is set to update the radwindow via an ajaxmanager, yet a full postback happens when it is clicked. The button that inserts form info to database is programed to set the radwindow to VisibleOnPageLoad="false" in the codebehind and is also set to update the radwindow via an ajaxmanager. It also causes a full postback.

here is the code
radwindow

<telerik:RadWindow ID="rwDonation" runat="server" Title="Add/Edit Donation" Behaviors="Close, Move, Resize" Width="460px" Height="550px">

<ContentTemplate>

<div id="DonationForm" class="float-left inpuright"

style="margin-left:15px;margin-right: 15px;width:410px; " runat="server">

<%--start donation validation--%>

<div class="float-left width96">

<asp:RequiredFieldValidator ID="amountValidator1" runat="server"

ControlToValidate="amountTextBox" Display="None"

ErrorMessage="Amount is Required" ForeColor="Red"

ValidationGroup="Donation"></asp:RequiredFieldValidator>

<%--validation summary --%>

<asp:ValidationSummary ID="DonationSummary2" runat="server" DisplayMode="List"

HeaderText="<span style="font-size: 120%"><b>Errors:</b></span>"

ValidationGroup="Donation" />

</div>

<%--end donation validation--%>

<p style="font-weight:bold;">

<asp:Label ID="lblDonationB" runat="server" Text=""></asp:Label>

<asp:Label ID="donationIDLabel1" runat="server" />

</p>

<p>

Amount:

<asp:TextBox ID="amountTextBox" runat="server" />

</p>

<p>

Date:

<asp:TextBox ID="dateTextBox" runat="server" />

</p>

<p>

Affilliation:<asp:DropDownList ID="ddlDonationAffilitaion" runat="server"

AppendDataBoundItems="True" DataSourceID="ObjectDataSourceAffiliationName"

DataTextField="affiliationName" DataValueField="affiliationName">

<asp:ListItem>-select-</asp:ListItem>

</asp:DropDownList>

</p>

<p>

Donation Type:

<asp:DropDownList ID="ddlDonationType" runat="server">

<asp:ListItem Value="">-select-</asp:ListItem>

<asp:ListItem>check</asp:ListItem>

<asp:ListItem>credit card</asp:ListItem>

<asp:ListItem>other</asp:ListItem>

</asp:DropDownList>

</p>

<p>

Name On Card:

<asp:TextBox ID="nameOnCCTextBox" runat="server" />

</p>

<p>

CC Type:

<asp:DropDownList ID="dllCCtype" runat="server">

<asp:ListItem Value="">-select-</asp:ListItem>

<asp:ListItem>visa</asp:ListItem>

<asp:ListItem>master</asp:ListItem>

<asp:ListItem>american express</asp:ListItem>

<asp:ListItem>discover</asp:ListItem>

</asp:DropDownList>

</p>

<p>

CC Number:

<asp:TextBox ID="CCNumberTextBox" runat="server" />

</p>

<p>

CC Expiration:

<asp:TextBox ID="CCexpireTextBox" runat="server" />

</p>

<p>

cvs:

<asp:TextBox ID="cvsTextBox" runat="server" />

</p>

<p>

Solicitor:

<asp:DropDownList ID="ddlSolicitor" runat="server" AppendDataBoundItems="True"

DataSourceID="SolicitorsSqlDataSource1" DataTextField="FullName"

DataValueField="FullName">

<asp:ListItem Value="">-select-</asp:ListItem>

</asp:DropDownList>

</p>

<p>

<asp:Button ID="AddUpdateDonation" runat="server" Text="Save"

ValidationGroup="Donation" />

<asp:Button ID="Button_NewDonation" runat="server" Text="Add New Donation" />

</p>

<asp:ObjectDataSource ID="SolicitorObjectDataSource1" runat="server"

DeleteMethod="Delete" InsertMethod="Insert"

OldValuesParameterFormatString="original_{0}" SelectMethod="GetData"

TypeName="csbcareTableAdapters.solicitorsTableAdapter"

UpdateMethod="Update">

<DeleteParameters>

<asp:Parameter Name="Original_id" Type="Int32" />

</DeleteParameters>

<UpdateParameters>

<asp:Parameter Name="First" Type="String" />

<asp:Parameter Name="Last" Type="String" />

<asp:Parameter Name="phoneHome" Type="String" />

<asp:Parameter Name="phoneMobile" Type="String" />

<asp:Parameter Name="email" Type="String" />

<asp:Parameter Name="Original_id" Type="Int32" />

</UpdateParameters>

<InsertParameters>

<asp:Parameter Name="First" Type="String" />

<asp:Parameter Name="Last" Type="String" />

<asp:Parameter Name="phoneHome" Type="String" />

<asp:Parameter Name="phoneMobile" Type="String" />

<asp:Parameter Name="email" Type="String" />

</InsertParameters>

</asp:ObjectDataSource>

</div>

</ContentTemplate>

</telerik:RadWindow>

Ajax Manager

<telerik:RadAjaxManager runat="server"

DefaultLoadingPanelID="RadAjaxLoadingPanel1">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="ddlCountry">

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="AddUpdateDonor">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="DonorInfo" />

<telerik:AjaxUpdatedControl ControlID="fsCompanyInfo" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="btnNewAff">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="DonorInfo" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="btnAddAffiliation">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid2" />

<telerik:AjaxUpdatedControl ControlID="WebDialogAddDonation" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadGrid2">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid2" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="btnNewDonation">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="fsDonations" />

<telerik:AjaxUpdatedControl ControlID="rwDonation" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="WebDataGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="WebDialogAddDonation" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

<telerik:AjaxUpdatedControl ControlID="rwDonation" />

<telerik:AjaxUpdatedControl ControlID="RadWindowManager1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="AddUpdateDonation">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="fsDonations" />

<telerik:AjaxUpdatedControl ControlID="rwDonation" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

Thanks in advance.

answered on 04 Aug 2011, 09:33 AM

Hello Boruch,

Thank you for contacting us.

In this case, a better option would be to show the window using some client side programming.
This way you won't need to call the server as the RadWindow is already generated in the page, all you need to do is to make it visible.

Consider the following example that illustrates something similar to your project.
As you can see the showWindow button need not be ajaxified, instead it needs to call some client side method that shows the RadWindow.
On the other hand, the bnt1 which is inside the RadWindow updates the label lbl1 asynchronously.

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="btn1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="lbl1" LoadingPanelID="Loading1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<asp:Button Text="showWindow" ID="btn2" runat="server" OnClientClick="btn2_Click(this,event);return false;" />

<telerik:RadWindowManager runat="server" ID="RadWindowManager1">

<Windows>

<telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="false">

<ContentTemplate>

<asp:Button ID="btn1" Text="ajaxPostback" runat="server" OnClick="btn1_Click" />

<asp:Label ID="lbl1" Text="" runat="server" />

</ContentTemplate>

</telerik:RadWindow>

</Windows>

</telerik:RadWindowManager>

<telerik:RadAjaxLoadingPanel runat="server" ID="Loading1"><p>LOADING....</p>

</telerik:RadAjaxLoadingPanel>

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

<script type="text/javascript">

function btn2_Click(sender, args) {

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

oWnd.show();

}

</script>

</telerik:RadCodeBlock>

Hope this helps.

Best wishes,
Genti
the Telerik team

answered on 04 Aug 2011, 09:59 AM

Thanks for the reply.
I would have set the button to open the radwindow in clientside, however there are times when I need to clear the controls inside the radwindow before it opens. For example when the controls were filled from the database upon clicking a button on a gridview.

In any case. My main problem is that the controls inside the radwindow don't do ajax postbacks even thought I configured them to do so in the ajaxmanager ... exactly the way you show in your latest example. You can verify that from the code I've posted.
Since I last posted I've set one of the dropdowns inside the radwindow to autopostback and configured the ajajmanager to so that this dropdown would update it's parent div (which set to runat="server"). Yet when a selection is changed in that dropdown, a full postback happens. What's even more puzzling is that every fifth time or so time I change the selection in that dropdown an ajax postback indeed does happen. I'm sure of it since I see the loadingpanel.

answered on 04 Aug 2011, 11:18 AM

RadControlsWebSite12.rar

Hello Boruch,

Thank you for contacting us back.

In that case you can do the following.
Make sure you wrap the entire content in a Panel or a Placeholder.
Then when you specify the Updated controls in the AjaxManagerSetiings, make sure that you specify the ID of the Panel instead of the RadWindow.

I am also attaching a modified version of my project that loads the window serverside.

Let me know if this solves your problem.

All the best,
Genti
the Telerik team

answered on 05 Aug 2011, 09:27 AM

Thanks for the advice.
I wrapped the the content with a div and set the the button inside of it to update that div. This only updated the div but didn't close the radwindow which is set to do so in the code behind. So I set the button to update it's parent window as well as the parent div of the radwindow. This works, however two loading panels appear upon button click. I don't like the way it looks but if that's the only workaround for this I guess I'll have to settle.
I'm kind of disappointed that I had to resort to a funky workaround. What I was trying to accomplish is pretty simple and yet telerik couldn't deliver in a straightforward manner. I wonder if it's just me or is it that buttons inside a contenttemplate of a radwindow can't update it's parent radwindow?

answered on 05 Aug 2011, 10:08 AM

Hi Boruch,

Thank you for contacting us.

Not sure I understand you correctly, but the solution that I provided beforehand is not a work-around.
Please, note that in my example I am not using DIVs, but server side controls like Panel.
Also, In my case there is only one AjaxLoadingPanel showing on the page.

Maybe I did not explain it in my previous post but the solution that I provided does the following:
-As you need to set the visibility server side, you must have a setting that updates the RadWindow content in the client that is what this setting does:

<telerik:AjaxSetting AjaxControlID="btn3">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadWindow1" />

</UpdatedControls>

</telerik:AjaxSetting>

Notice that there is no loading panel to be shown. The RadWindow order in the DOM hierarchy is different from what you define in the Design time, that's why it is not a good option to have a loading panel that is not sticky on it.

-Then after we've shown the Window we try to click the button inside it. And we want the content inside the window to get updated via ajax. That's why we need to put a placeholder(Panel) to wrap the entire content.

<telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="false" >

<ContentTemplate>

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

<asp:Button ID="btn1" Text="ajaxPostback" runat="server" OnClick="btn1_Click" />

<asp:Label ID="lbl1" Text="" runat="server" />

</asp:Panel>

</ContentTemplate>

</telerik:RadWindow>

And the AjaxManager settings would be:

<telerik:AjaxSetting AjaxControlID="btn1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadWindowContentPanel" LoadingPanelID="Loading1" />

</UpdatedControls>

</telerik:AjaxSetting>

If I am missing anything, you can modify the solution that I provided beforehand to illustrate your scenario.

Kind regards,
Genti
the Telerik team

answered on 18 Apr 2012, 10:54 AM

Hi Boruch,
in case you're still searching for a solution, even though the thread is quite old...
I had the exact same scenario as you did. The solution is quite simple: You need TWO panels for the desired ajax-behaviour, one wrapping your RadWindow, the other wrapping the entire content within the RadWindow like so:

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

<telerik:RadWindow VisibleOnPageLoad="false" ID="RadWindow1" runat="server" EnableViewState="false" Behaviors="Close" Modal="true">

<ContentTemplate>

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

Some Content

<telerik:RadButton ID="btn_Close" text="Close Window" runat="server">

</telerik:RadButton>

</asp:Panel>

</ContentTemplate>

</telerik:RadWindow>

</asp:Panel>

In the RadAjax Manager, register BOTH panels with your button inside the RadWindow like so:

<telerik:AjaxSetting AjaxControlID="btn_Close">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="panel_rdw_content" />

<telerik:AjaxUpdatedControl ControlID="panel_rdw_edit" />

</UpdatedControls>

</telerik:AjaxSetting>

In the Code behind of the button simply set the RadWindow.VisibleOnPageLoad = False

Cheers!

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

Ajax Manager doesn't work with button in RadWindow

10 Answers, 1 is accepted