Using Modal ControlToolKit with RadAjaxManagerProxy

[Fred]

It seems it should be straight foward.  I have a model popup from the ControlToolkit on the page.  In the modal there is a server control for a submit button which does a post back, but I have the RadAjaxManagerProxy capturing it and updating only one specific panel (which happens to also contain the buttons that open the model).  

Seems after the first click the modal works great, but after the ajax post back, the buttons do not initiate the modal popup even anymore.

As anyone seen anything like this? Where the modal only works the first time?

Here's my Proxy

	<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server" >
	<AjaxSettings>
	<telerik:AjaxSetting AjaxControlID="btnConfirmYes">
	<UpdatedControls>
	<telerik:AjaxUpdatedControl ControlID="pnlDocumentInfo" LoadingPanelID="AjaxLoadingPanel1" />
	</UpdatedControls>
	</telerik:AjaxSetting>
	</AjaxSettings>
	</telerik:RadAjaxManagerProxy>

Here's the Model

	<cc1:ModalPopupExtender
	ID="mpeDocumentInfoLinkButton"
	runat="server"
	PopupControlID="pnlEditDocumentInfo"
	TargetControlID="lbEditDocInfo"
	OkControlID="btnConfirmYes"
	BackgroundCssClass="modalBackground"
	CancelControlID="btnCancel" />

Here's the Panel for the modal

	<asp:Panel
	ID="pnlEditDocumentInfo"
	runat="server"
	HorizontalAlign="Left"
	CssClass="modalPopup"
	style="display:none;">
	<table>
	<tr>
	<td>
	<asp:Label ID="lblDocumentName" runat="server" Text="Version Identifer Name:" Font-Bold="true" /><br />
	</td>
	</tr>
	<tr>
	<td>
	<asp:TextBox ID="tbxDocumentName" runat="server" Width="200px" />
	<asp:RequiredFieldValidator ID="rfvDocumentName" runat="server"
	ErrorMessage="Required!"
	ControlToValidate="tbxDocumentName" />
	</td>
	</tr>
	<tr>
	<td>
	<strong>Document Revision Date</strong><br />
	MM/DD/YYYY<br />
	<telerik:RadDatePicker ID="rdpRevisionDate" runat="server" Skin="Office2007" /><br />
	<br />
	</td>
	</tr>
	<tr>
	<td>
	<asp:Button ID="btnConfirmYes" runat="server" Text="Save" Width="75px"  />&nbsp;&nbsp;<asp:Button ID="btnCancel" runat="server" Text="Cancel" Width="75px" />
	</td>
	</tr>
	</table>
	</asp:Panel>

And here's the panel that gets updated via the proxy

	<asp:Panel ID="pnlDocumentInfo" runat="server">
	<table id="tblDocumentInfo" width="100%" border="0">
	<tr>
	<td>
	Title: <asp:Label ID="lblDocName" runat="server" />
	</td>
	<td align="right">
	<asp:ImageButton runat="server" ID="ibDocInfo" AlternateText="Edit Document Information" ImageUrl="~/images/btn_edit.gif" /><asp:LinkButton ID="lbEditDocInfo" runat="server" Text="Edit" />
	</td>
	</tr>
	</table></panel>

[Fred]

Ok slowly narrow it down.

If I take the buttons out of the Panel that updates from the proxy, then it works.   So when the panel updates it's losing something that makes it popup the modal again.

So clarify the problem...

If I make a server control ABC open the modal popup, which then submits to server, I have RadAjaxProxy update the Panel that has the updated information and also contains control ABC.  Then ABC no longer works to open Modal.      If I move control ABC out of the Panel being updated by the Proxy then it works fine.  But I need to have the control back in the panel...

[Fred]

Ok just did a work around, I put server side tables around the areas I wanted updated and just updated those instead of the whole panel. 

But now I'm running into into another area where I won't be able to do such a thing so easily. 

There a reason why the button click for the modal to popup doesn't register after the proxy has loaded a panel when the buttons are in that same panel?

[Fred]

Any thoughts to why if the RadAjaxManagerProxy loads part of a page that contains a button that fires a ajax controltoolkit modal, why it doesn't work?  Only works if I load the page the first time.

[Nikolay Rusev]

Hello Fred,

For your convenience I've prepared sample application which demonstrates how you can ajaxify OK button of ModalPopupExtender. You can find it attached to this post.

I hope this is helpful.

Kind regards,
Nikolay
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Fred]

Thanks Nikolay.

I took your file and looked at it, yes it did work, but in this scenario I'm able to also get it to work, so I altered your page to mimic what I'm trying to do and it broke.

If you could use the same files, but change the default3.aspx front end to this

	<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
	<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
	<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
	<!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></title>
	</head>
	<body>
	<form id="form1" runat="server">
	<asp:ScriptManager runat="server" ID="ScriptManager1">
	</asp:ScriptManager>
	<div>
	<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableAJAX="true">
	<AjaxSettings>
	<telerik:AjaxSetting AjaxControlID="btnConfirmYes">
	<UpdatedControls>
	<telerik:AjaxUpdatedControl ControlID="innerPanel" />
	</UpdatedControls>
	</telerik:AjaxSetting>
	<telerik:AjaxSetting AjaxControlID="lbShowEditButton">
	<UpdatedControls>
	<telerik:AjaxUpdatedControl ControlID="pnlHiddenAtFirst" />
	</UpdatedControls>
	</telerik:AjaxSetting>
	</AjaxSettings>
	</telerik:RadAjaxManager>
	<cc1:ModalPopupExtender ID="mpeDocumentInfoLinkButton" runat="server"
	PopupControlID="pnlEditDocumentInfo"
	TargetControlID="lbEditDocInfo"
	OkControlID="btnConfirmYes"
	CancelControlID="btnCancel" />
	<asp:Panel ID="pnlEditDocumentInfo" runat="server" HorizontalAlign="Left"
	Style="display: none;">
	<asp:Panel runat="server" ID="innerPanel">
	<table>
	<tr>
	<td>
	<asp:Label ID="lblDocumentName" runat="server" Text="Version Identifer Name:" Font-Bold="true" /><br />
	</td>
	</tr>
	<tr>
	<td>
	<asp:TextBox ID="tbxDocumentName" runat="server" Width="200px" />
	</td>
	</tr>
	<tr>
	<td>
	<strong>Document Revision Date</strong><br />
	MM/DD/YYYY<br />
	<telerik:RadDatePicker ID="rdpRevisionDate" runat="server" Skin="Office2007" />
	<br />
	<br />
	</td>
	</tr>
	<tr>
	<td>
	<asp:Button ID="btnConfirmYes" runat="server" Text="Save" Width="75px" OnClick="btnConfirmYes_Click" />
	&nbsp;&nbsp;
	<asp:Button ID="btnCancel" runat="server" Text="Cancel" Width="75px" />
	</td>
	</tr>
	</table>
	</asp:Panel>
	</asp:Panel>
	<asp:Panel ID="pnlDocumentInfo" runat="server">
	<table id="tblDocumentInfo" width="100%" border="0">
	<tr>
	<td>
	Title:
	<asp:Label ID="lblDocName" runat="server" Text="Doc Title would Be here" />
	</td>
	<td align="right">
	<asp:Panel ID="pnlHiddenAtFirst" runat="server">
	<asp:LinkButton ID="lbEditDocInfo" runat="server" Text="Edit" />
	</asp:Panel>
	</td>
	</tr>
	</table>
	<asp:LinkButton ID="lbShowEditButton" runat="server" OnClick="lbShowEditButton_Click" Text="Show Edit Button" />
	</asp:Panel>
	</div>
	</form>
	</body>
	</html>

and the back-end to this:

	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Web;
	using System.Web.UI;
	using System.Web.UI.WebControls;
	public partial class Default3 : System.Web.UI.Page
	{
	protected void Page_Load(object sender, EventArgs e)
	{
	if(!IsPostBack){
	pnlHiddenAtFirst.Visible = false;
	}
	}
	protected void btnConfirmYes_Click(object sender, EventArgs e)
	{
	}
	protected void lbShowEditButton_Click(object sender, EventArgs e)
	{
	pnlHiddenAtFirst.Visible = true;
	}
	}

You'll notice now that it's almost the same, except that I'm hiding the control that fires the modal.  Then I show that control using the RadAjaxManager on a click event of another button.  Once I do that, the modal control won't fire.  This is what I can't figure out how to get around.

[Fred]

Hey Nikolay, any luck replacing the code in those files with what I posted?

[Nikolay Rusev]

Hello Fred,

Please find the attached project. I believe it demonstrates the functionality which you are trying to attain.
Hope this helps.

Kind regards,
Nikolay
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Fred]

Thank you!! That's what it was that I was missing. So I had to have the modal extender inside the panel that get's shown!! Thank you!

[Fred]

Hey Nikolay, one more quick thing...

If you click the Cancel button on the Modal it goes away, but if you click on Edit again a second time in a row the cancel button doesn't work anymore.


EDIT:  I got it, I just changed the Modal to not use a Cancel button, on server side I hide the modal and update the panels again with the Ajaxmanager.

Now everything is working as intended :)