Ajax TabContainer & ModalPopupExtender

  • Thread starter Thread starter mistryman06
  • Start date Start date
M

mistryman06

Hi,
I'm new to the ASP.NET Ajax. Im struck with an issue.
Im having a tabcontainer with 3 tabs. Each tab has a user control (all
3 tab has the same user control) & the user control has a Button &
ModalPopup Extender. While running the application,
When I click the TAB1's Button i get a modalpopup in the page. But
when i select the TAB2 and click on the Button. Im not getting any
modalpopup in the 2nd tab rather i see the modal popup in the TAB1.
The modal popup always going to the Tab1. I cant able to bring that
focus into the tab2 or tab3. Please help me on this.
Thanks in advance.
Joe
 
Hi Joe,

I'm not quite sure if I understand your problem. How do you position
the popup? Could you perhaps post your code? I created a sample. The
popup always renders on the top of the two tabs:

Default.aspx:

<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="Default.aspx.cs"
Inherits="ModalPopupInTabContainer._Default" %>
<%@ Register Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit" TagPrefix="aj" %>
<%@ Register Src="~/WebUserControl1.ascx" TagName="TheUserCtrl"
TagPrefix="my" %>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="mgr" runat="server" />
<aj:TabContainer ID="theTab" HeaderText="The First Tab"
runat="server">
<aj:TabPanel ID="pnlOne" HeaderText="First Tab"
runat="server">
</ContentTemplate>
</aj:TabPanel>
<aj:TabPanel ID="pnlTwo" HeaderText="Second Tab"
runat="server">
</ContentTemplate>
</aj:TabPanel>
</aj:TabContainer>
</div>
</form>
</body>
</html>

WebUserControl1.ascx:

<%@ Control Language="C#" AutoEventWireup="true"
CodeBehind="WebUserControl1.ascx.cs"
Inherits="ModalPopupInTabContainer.WebUserControl1" %>
<%@ Register Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit" TagPrefix="aj" %>
<asp:Button ID="theButton" Text="Click" runat="server" />
<aj:ModalPopupExtender ID="thePopup" TargetControlID="theButton"
PopupControlID="thePopupPanel"
OkControlID="theOkButton" DropShadow="false" runat="server" X="20"
y="20" />
<asp:Panel ID="thePopupPanel" runat="server">
<div id="wrapper" style="width:200px;height:
200px;background:silver;border:1px solid">
<asp:Label ID="theLabel" Text="This is a popup" runat="server"/
<br />
Click to expand...
<input type="button" ID="theOkButton" Value="OK"
runat="server" />
</div>
</asp:Panel>

=============
Regards,
Steve
www.stkomp.com
 
Back
Top