Modal Popup Associated With Individual GridView Rows

Hi,

I need to show a modal popup (we're trying to create a lightbox effect) for each row in a gridview. What I'd like to do is have a single popup element on the page that is populated with row specific data just prior to popping up based on the value of the selected row. I know that with the current modal popup extender I could kinda do this by adding an extender in the item template of the grid, but that would force (potentially) a whole lot of html to be generated and would also force me to populate the all the popups while databinding more "basic" information to the grid.

What I'd really like to do is only pull the data that goes into the popup when it's requested.

I realize that this is likely not possible with the current implementation of the modal popup extender, but I am wondering if anyone has thoughts about how I might go about doing this.

The one idea that I had:

1. Using the modal popup extender as a starting point, create a new extender that accepts a gridview as its target control.

2. In the behavior script, get all the tr elements (maybe ignoring all th elements) and hook up onclick, etc.

3. Add a couple of properties like JavascriptMethodToExecute that could be called using Eval() when a row is clicked, but that would execute before the popup becomes visible. (I'm thinking that this method could do the work of populating the popup). Add some other stuff like MouseOverRowCssClass, MouseOutRowCssClass for look and feel effects.

Does this seem like a reasonable approach or is there a much simpler, more obvious way to achieve the same effect?

Thanks,

Matt

This scenario will be possible with the next release of the Toolkit (and is possible today in the development releases) thanks to the addition of DynamicPopup functionality into ModalPopup. If you have a chance to try a development release, please let us know if you have any problems!

Where can you download a development release?

David Anson:

This scenario will be possible with the next release of the Toolkit (and is possible today in the development releases) thanks to the addition of DynamicPopup functionality into ModalPopup. If you have a chance to try a development release, please let us know if you have any problems!

David,

This could be valuable for me as well but I'm unsure how to implement it. Would you mind providing some detail regarding the addition of DynamicPopup functionality into ModalPopup? Are you referring to the DynamicPopulate extender? If so, I would greatly appreciate some examples on how to do this.

Thanks,

FredEH

This is now supported by the60914 release of the Toolkit. Iblogged an example yesterday.

Is there a way of doing this without using web services?

I just want to pass in gridview row values to the popup control, in this case its just a pop up panel to allow uses to edit comments.

I just got done with a project that did something similar. In the grid view row add a column with a button/linkbutton/imagebutton and add "Select" to the commandname property for that button. Then for the server side selectedindexchanged event do:

1Protected Sub GridView1_SelectedIndexChanged(ByVal senderAs Object,ByVal eAs System.EventArgs)Handles GridView1.SelectedIndexChanged23'Do code here to set the values from the selected row45Dim popupAs AjaxControlToolkit.ModalPopupExtender = ModalPopupExtender6If popup IsNotNothing Then7 If ReSetDefaultsThen SetDefaults(Nothing)8 popup.Show()9End If1011End Sub

This popup the modal window. Make sure that you create a button on the page for the targetcontrolid for the modal popup, and if you want to hide it make sure you user the style="display:none" NOT the awfull visible="false" property

aquilin, would you mind going into a bit more detail on how you setup your panel and how those values are populated?

I'm a bit lost. :)

I should be more specific..

I have a GridView setup the way I would like. First column is a HyperLinkField, the rest are BoundFields. I have a ModalPopupExtender and a Panel with just a bunch of Labels and a Button.

If I am to use the SelectedIndexChanged event to dynamically populate the Popup, is it as simple as grabbing the other fields in the row and setting the text property to the value?

(Currently away from the workstation right now, else I would be trying this myself. This popup problem has been bugging me for a while.)

You will need to add a select command field to the gridview which when clicked will fire off theSelectedIndexChangingevent. in this event you can access all cell information for the row like so:

Dim

rowAs GridViewRow = GridView1.Rows(e.NewSelectedIndex)

this will give you the selected row and you can get anything from any of the row cells.

if you want to get the values in a bound fields use:

modallabel1.text = row.cells(1).text

modallabel2.text = row.cells(2).text

modallabel3.text = row.cells(3).text

remember that vb.net is 0 based so the first column is index 0 and the second index 1 and so on

then use the code I posted before to open the the modal window and presto! you will see the values you want.

try this out, and if you can get it to work, I will make a demo page for you. but try it yourself... I always say the best way to learn what objects and controls do, is to screw up and then fix the problem. Cut and pasting code works, but you don't get the joy of learning :).

Hope this help, let me know if you have any more questions.

-Alan Quillin

Quick question: The GridView control is bound to a DataSet, how does the CommandField come into play there? I don't need to make any changes to the database via the GridView, this is just to access the data.

Eventually, I want to populate the GridView with data from the row (which you are helping me with greatly) and once the modal popup is closed, any input given will be used to create an entry in another table.

I imagine JavaScript will be all but required for that task, but I'll cross that bridge when I get to it.

Thanks again!

This is more of a bump with a progress update..

The ButtonField on my GridView has a CommandName property set to "Select". I have a Button set to be the TargetControl for the PopupExtender. The new question is, what do I need to do with this Button to get the event from the ButtonField to populate the Popup panel?

Thoroughly confused. :)

Nevermind, I got it to work.

Thanks. :)

Modal Popup Extender ?

I have created a table programatically which displays images from the database in thumbail fashion.

for (int i = 1; i <= rows; i++) {// Create a new row and add it to the table. TableRow tRow =new TableRow(); Table1.Rows.Add(tRow);for (int j = 0; j < cells; j++) {if (count >= 0) {// Create a new cell and add it to the row. TableCell tCell =new TableCell(); tRow.Cells.Add(tCell); HyperLink link =new HyperLink(); link.NavigateUrl ="~/" + images[count].FullImage; link.ImageUrl ="~/" + images[count].ThumbnailImage; tCell.Controls.Add(link); tCell.Controls.Add(new LiteralControl("<br><br><b>Title</b> : " + getproducts[count].Name +"<br>"));/*Add Checkout and add to cart Images */ HyperLink wishlistLink =new HyperLink(); wishlistLink.ImageUrl="~\\images\\Add_to_wish_list.gif"; HyperLink checkoutLink =new HyperLink(); checkoutLink.ImageUrl ="~\\images\\Add_to_my_cart.gif";/*Add the Images to the cells*/ tCell.Controls.Add(wishlistLink); tCell.Controls.Add(checkoutLink); } } }

Now I want when user clicks on thumbnail it opens a modal popup extender and displays the full image with some other information. Someone can please let me know how to do it programatically using the Hyperlink I have ?

This should give you what you needed

link.Target="_blank";

http://www.startvbdotnet.com/aspsite/controls/linkbutton.aspx

You could have the hyperlink post back and then in the code behind call ModalPopupExtender1.Show() if you really need it to pop in a modal extender. Make sure to wrap you code that will be posting back inside an update panel for the best user experience.

Hi Thukralz,

thukralz:

Now I want when user clicks on thumbnail it opens a modal popup extender and displays the full image with some other information. Someone can please let me know how to do it programatically using the Hyperlink I have ?

You should create ModalPopupExtender and its associated Panel dynamically for each HyperLink and set the ModalPopupExtender's properties on the server side. But I don't think it is a good way for its low perfermance. The improved method is that we only use one ModalPopupExtender in a page and the ModalPopupExtender is activated when the HyperLink is fired by using Javascript functions.

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"></script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Change Picture</title> <style> .modalBackground { background-color:Gray; filter:alpha(opacity=70); opacity:0.7; } .modalPopup { background-color:#FFD9D5; border-width:3px; border-style:solid; border-color:Gray; padding:3px; width:250px; } </style></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:Image ID="Image1" runat="server" ImageUrl="~/pic/upg_Business.jpg" imgUrl="../pic/upg_HomePremium.jpg" onclick="changePicture(event.srcElement.imgUrl)"/><asp:Image ID="Image2" runat="server" ImageUrl="~/pic/upg_HomeBasic.jpg" imgUrl="../pic/upg_Ultimate.jpg" onclick="changePicture(event.srcElement.imgUrl)"/> <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Height="200px" Width="300px" style="display:none"> <asp:Image ID="Image3" runat="server" ImageUrl="~/pic/AJAX.gif"/> <asp:Button ID="Button2" runat="server" Text="Cancel" /> </asp:Panel> <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button1" PopupControlID="Panel1" CancelControlID="Button2"> </ajaxToolkit:ModalPopupExtender> <div style="display:none"> <asp:Button ID="Button1" runat="server" Text="Button" /> </div> <script type="text/javascript" language="javascript"> function changePicture(imgUrl){ $get("<%=Image3.ClientID%>").src = imgUrl; $get("<%=Button1.ClientID%>").click(); } </script> </div> </form></body></html>

I hope this help.

Best regards,

Jonathan

Modal Popup inside DataList?

Hey guys,
Has anyone ever tried using the Modal Popup Extender inside the DataList? If want to create something similar to Netflix. When you click a button inside a DataList, a modal popup shows up and allows the user to perform certain operations.

I tried doing so but it kept on throwing JavaScript errors. I was just wondering if anyone tried the same.

Thanks
Anup
Hi,

what kind of JavaScript errors are you getting?

I'm interested in this as well, not because I'm getting javascript errors, but because I'm getting multiple modal popup windows when clicking on a single button. I assume that I need to pass an ID to only open a single modal, but I'm not sure how to go about it. Once I'm able to get the number of popups down to one per person (this is a roster page), I'm planning on populating it with database driven content for each person in the list. Does anyone have ideas on how to go about this?

Source code:

1 <asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1" RepeatColumns="1"2 RepeatDirection="Horizontal" OnSelectedIndexChanged="DataList1_SelectedIndexChanged">3 <ItemTemplate>4 <div class="membercard2">5 <table width="100%">6 <tr>7 <td valign="top" width="30%" align="center">8 <asp:Image ID="RankImage" runat="server" ImageUrl='<%# "~/images/t_" & Cstr(Eval("Rank")) & ".gif"%>' />9 </td>10 <td width="70%">11 <h3>12 <asp:HyperLink ID="emailLink" runat="server" NavigateUrl='<%# "mailto:" & Cstr( Eval("Email"))%>'13 Text='<%# Cstr(Eval("FirstName")) & " " & """" & Cstr(Eval("Callsign")) & """" & " " &Cstr(Eval("LastName")) %>' />14 </h3>15 <asp:Panel runat="server" ID="panel1" CssClass="actionbuttons" Visible='<%# User.IsInRole("Administrators") %>'>16 <Club:RolloverLink ID="editbtn2" runat="server" Text="Edit" NavigateURL='<%# "Roster_edit.aspx?Action=Edit&PilotID=" & Cstr(Eval("PilotID"))%>' />17 </asp:Panel>18 <asp:Panel runat="server" ID="panel2" CssClass="actionbuttons" Visible='<%# User.IsInRole("Administrators") %>'>19 <Club:RolloverLink ID="RolloverLink1" runat="server" Text="Remove" NavigateURL='<%# "Roster_edit.aspx?Action=Remove&PilotID=" & Cstr(Eval("PilotID"))%>' />20 </asp:Panel>21 <h3>22 <asp:Label ID="TitleLabel" runat="server" Text='<%# Cstr(Eval("Title"))%>' />23 </h3>24 <h3>25    ICQ:26 <asp:Label ID="ICQLabel" runat="server" Text='<%# Cstr(Eval("ICQNum")) %>' />27 </h3>28 <h3>29    Location:30 <asp:Label ID="LocationLabel" runat="server" Text='<%# Cstr(Eval("Location"))%>' />31<br /><br />32<center>33<Club:RolloverLink ID="Button1" runat="server" Text="View Profile" />34</center>353637 </h3>38 <div class="dashedline">39  </div>40 </td>41 </tr>42 <div class="clearcard">43 </div>44 </table>45 </div>46<AjaxToolkit:ModalPopupExtender ID="ModalPopupExtender2" runat="server"47TargetControlID="Button1" PopupControlID="ModalPanelOuter1" CancelControlID="Cancel"48OkControlID="OK" DropShadow="False" BackgroundCssClass ="modalBackground" />4950<AjaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server"51TargetControlID="ModalPanelInner1" BorderColor="black" Radius="6" />52 </ItemTemplate>5354 </asp:DataList>5556<asp:Panel ID="ModalPanelOuter1" runat="server" CssClass="modalPopupOuter" Style="display:none;">5758 <asp:Panel ID="ModalPanelInner1"59 runat="server" DefaultButton="Ok" ScrollBars="Auto" Height="150px" Width="350px"60 CssClass="modalPopup">Text goes here!<br /><br />61 <asp:Button ID="Ok" runat="server" Style="position: static" Text="Ok" />62 <asp:Button ID="Cancel" runat="server" Style="position: static" Text="Cancel" />63 </asp:Panel>6465</asp:Panel>

Bump. Anyone have ideas?

Here how i did it.

Add the following to the item that will popup the modal popup for each item dataitem:

onclientclick='$find('Details').show();' where Details is the name of your modal popup extender. This will open the popup in javascript.

If you require server processing also wire up the event and in the commandarguments pass the following:

<%# DataBinder.Eval(Container, "ItemIndex") %>

This is pass the current row index to the server side event. From there you can pass the row index to get the row that fired the event.

To avoid postback on clicks make sure the control opening the popup is in an update panel.

The completed item should look similar to this:

<asp:LinkButtonID="CourseLink"runat="server"Text='your button text'

OnClick="TestLink_Click"OnClientClick="$find('[Your modal popup extender id]').show();"

CommandArgument='<%# DataBinder.Eval(Container, "ItemIndex") %>'>

</asp:LinkButton>

One final thing is to remove the modal popup extenders and panel to outside the datalist and bind the targetcontrolid to a hidden dummy button.

Have a look at this article. Hope you might get better idea. the url ishttp://www.aspdotnetcodes.com/Ajax_ModalPopup_PostBack_GridView.aspx

Thanks for the great info! I'll check it out and see if I can figure it out.

Kevin

ameenkpn -

With the exception of the update function (I don't really need to do that right now), that looks exactly like what I'm trying to do. Now, one problem. That article seems to use a mix of C and Javascript (right?), and my app is written in VB (I'm using the clubsite starter kit - YES, I'm new and NOT a developer!). I *think* I have the web service built in my app, but I'm struggling with the DisplayResult section. Is that javascript or C? Does it go in the script section of my page, or somewhere else? I assume I need to convert it to VB, but not sure where to start. Thanks again for the link, I think I'm close on getting it where I want it.

Kevin

The article i suggest you is not mix of C and JavaScript. Its purely C# and JavaScript. There is many tools availbele to convert C# code to VB.NET. Or else you go to microsoft site, they the keyword you want to convert to VB, you can see the equivalent VB code also in the code section.

Please Mark the Post as 'Answered' if you got solution.

I'm still working on this problem. I haven't been able to get it to work yet, and I don't think I'm close yet. I just can't figure out exactly where everything needs to go yet, and would love to see the actual aspx code implemented that he's got in his article. That would definitely help more than seeing code snippets. I saw a comment on the article asking for the same thing, so hopefully someone can supply it!

Kevin

Hi Kevin,

When i read that artcile i dont really find any problem. I try to implement it the same way it explained. It works well for me. Where is your problem in implementing the code snippet? hope atleast i can help you.

Thanks

The problem is that I really have no idea what I'm doing. If you could take a look at my page and see where I'm missing it, that would be helpful. I've uploaded it to my site, you can grab it here: http://www.308thvfs.com/files/roster_view.zip

That contains the page that I'm attempting to add the modal to, as well as the web service. Again, I don't want to do the update talked about in the article, I'm just trying to get the modal to popup "read only" to view a database field associated with the selected member. I'm not exactly clear what goes where, that's where I'm having the trouble. For example, you see that I don't have the "function DisplayResult" called anywhere, because I really have no idea where to put it.

My site is built in VB, and I've gotten a C# to VB converter tool (from herehttp://labs.developerfusion.co.uk/convert/csharp-to-vb.aspx).

Any help you can give would be appreciated. I'm NOT a developer, I'm just trying to use starter kits and code samples to make my way through this site, and trying to pick things up as I go...

Thanks,
Kevin

Modal Popup not working in page inside Master Page

I followed the how-to example to create a page with modal popup and it works fine. However when put the same code in a page which is inside a master page, it seems not able to pick up the class attributes from style sheet which is located in root of the web. Is there any workarounds for this?

SLICan:

I followed the how-to example to create a page with modal popup and it works fine. However when put the same code in a page which is inside a master page, it seems not able to pick up the class attributes from style sheet which is located in root of the web. Is there any workarounds for this?

A liitle bit better now, after I made a copy of the style sheet from root to the folder where the aspx page resides, now I can see the requesting page dim-out and the pop up appears on the screen under two different scenarios:

(1) If I used default value(-1) for X, Y, left bottom portion of the pop up appears on the top right corner of the requesting page and button inside the popup is clickable.

(2) If I changed value of X, Y to something else, entire pop up appears in the center of the screen but is dim-out too. In addtion, if I specified drop shadow to true, then the shadow appears on the top right corner of the screen.

Can anyone help?

SLICan:

SLICan:

I followed the how-to example to create a page with modal popup and it works fine. However when put the same code in a page which is inside a master page, it seems not able to pick up the class attributes from style sheet which is located in root of the web. Is there any workarounds for this?

A liitle bit better now, after I made a copy of the style sheet from root to the folder where the aspx page resides, now I can see the requesting page dim-out and the pop up appears on the screen under two different scenarios:

(1) If I used default value(-1) for X, Y, left bottom portion of the pop up appears on the top right corner of the requesting page and button inside the popup is clickable.

(2) If I changed value of X, Y to something else, entire pop up appears in the center of the screen but is dim-out too. In addtion, if I specified drop shadow to true, then the shadow appears on the top right corner of the screen.

Can anyone help?

It's been discussed inhttp://www.codeplex.com/AtlasControlToolkit/WorkItem/View.aspx?WorkItemId=2939 but I don't understand exactly what need to be done. Can someone elaborate it?

I got this issue addressed. What I did was: (1) download AJAX contol toolkit with source, (2) change ModalPopupBehavior.js, (3) rebuild AJAX control toolkit and (4) reload the dll to my project.

Modal Popup Question ?

I create a table programatically which displays images from the database in thumbail fashion.

for (int i = 1; i <= rows; i++) {// Create a new row and add it to the table. TableRow tRow =new TableRow(); Table1.Rows.Add(tRow);for (int j = 0; j < cells; j++) {if (count >= 0) {// Create a new cell and add it to the row. TableCell tCell =new TableCell(); tRow.Cells.Add(tCell); HyperLink link =new HyperLink(); link.NavigateUrl ="~/" + images[count].FullImage; link.ImageUrl ="~/" + images[count].ThumbnailImage; tCell.Controls.Add(link); tCell.Controls.Add(new LiteralControl("<br><br><b>Title</b> : " + getproducts[count].Name +"<br>"));/*Add Checkout and add to cart Images */ HyperLink wishlistLink =new HyperLink(); wishlistLink.ImageUrl="~\\images\\Add_to_wish_list.gif"; HyperLink checkoutLink =new HyperLink(); checkoutLink.ImageUrl ="~\\images\\Add_to_my_cart.gif";/*Add the Images to the cells*/ tCell.Controls.Add(wishlistLink); tCell.Controls.Add(checkoutLink); } } }

Now I want when user clicks on thumbnail it opens a modal popup extender and displays the full image with some other information . How this can be achieved ?

For something like this, I would recommendLighbox or aCSS only implementation. Both are geared specifically for graphics and are nice effects. However, take a look here:http://mattberseth.com/blog/2007/07/modalpopupextender_example_cre.html for how to use the ModalPopup for an image viewer.

-Damien

Hello Damien,

I was wondering for the lightbox, it says to activate you need rel="lightbox". My Question is as I'm creating the link and putting pictures programatically how that can be achieved.

Code snippet will be really appreciated.

Thanks,

Harsimrat

To add the rel attribute all you need to do is to assign the attribute using the Attributes.Add method. For example:

HyperLink link =new HyperLink();
link.Attributes.Add("rel", "lightbox");

-Damien

Hello Damien,

When I do something like this :

HyperLink link =newHyperLink();

//link.NavigateUrl ="~/" + images[count].FullImage;

link.ImageUrl ="~/" + images[count].ThumbnailImage;

//link.Attributes.Add("onclick", "ShowModalPopup('" + images[count].FullImage + "')");

link.Attributes.Add("a href","" + images[count].FullImage);

link.Attributes.Add("rel","lightbox");

1) Everything is shown at the end of the page with a close button, for some reason not as a javascript. Can you please let me know where I'm going Wrong.

2) Is there any way to show some extra buttons or pictures with the picture shown ?

3) And how can I adjust the Height and Width of the Image using link control ?

Thanks for your help.

In terms of rendering, are you doing this as part of your original code? For example (I shortened it up a bit):
...for (int j = 0; j < cells; j++)
{
// Create a new cell and add it to the row.
TableCell tCell =new TableCell();
tRow.Cells.Add(tCell);

HyperLink link =new HyperLink();
link.NavigateUrl ="~/" + images[count].FullImage;
link.ImageUrl ="~/" + images[count].ThumbnailImage;
link.Attributes.Add("rel", "lightbox");
...

Also, link.Attributes.Add("a href","" + images[count].FullImage); isn't correct. The attribute would behrefnota href, although your NavigateUrl will take care of this so you can exclude it.

In regards to your questions "Is there any way to show some extra buttons or pictures with the picture shown ?", you can add other controls to the cell. The HyperLink is a single control, if you want to add a button, you would need to add an asp:button. Not sure if this answers your question...

For sizing, look at the Width and Height properties; see:http://msdn2.microsoft.com/en-us/library/system.web.ui.webcontrols.hyperlink_properties.aspx

Hope this helps.

-Damien

For the second question, I should have been more clearer. When the lighbox opens I want to show stuff by its side as by default it only allows Title .

Oh, sorry. I'm not sure if you can add controls to the lightbox. I'm sure you can work something out to get that to work if you need to by modifying the JavaScript source, but the design of lightbox is simplicity (e.g. just showing a caption)

-Damien

Modal PopUp with Custom User Control

I'm using the September preview to create a modal pop up. But the twist here is that I would like the popup toload in a custom page.
In my case, the sample file, TrackingNumber.ascx, is to be displayed when the modal popup is displayed.

It mostly works. If the OK or Exit buttons are clicked, the popup closes normally.
When the Save button is clicked,however, information is written to the database, and the label shows the time when the button was clicked,butnow the OK and Exit buttons stop working.

Any suggestions as what I am doing wrong? Is there a better way to encapsulate user controls in a modal pop up?
Thanks!

default2.aspx:

<%@dotnet.itags.org. Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>

<%@dotnet.itags.org. Register src="http://pics.10026.com/?src=TrackingNumber.ascx" TagName="TrackingNumber" TagPrefix="uc1" %>

<%@dotnet.itags.org. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="AtlasToolkit" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<title>Test Modal PopUps With Custom User Controls</title>

<link href="http://links.10026.com/?link=ModalPopUp.css" rel="stylesheet" type="text/css" />

<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True" />

</head>

<body>

<form id="form1" runat="server">

<div>

<AtlasToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" >

<AtlasToolkit:ModalPopupProperties

TargetControlID="LinkButton1"

PopupControlID="UpdatePanel1"

BackgroundCssClass="modalBackground"

DropShadow="True"

OkControlID="TrackingNumber1$OkButton"

CancelControlID="TrackingNumber1$CancelButton"

/>

</AtlasToolkit:ModalPopupExtender>

<asp:LinkButton ID="LinkButton1" runat="server" Style='z-index: 102; left: 304px;

position: absolute; top: 14px">LinkButton</asp:LinkButton>

<atlas:UpdatePanel ID="UpdatePanel1" runat="server" >

<ContentTemplate>

<uc1:TrackingNumber ID="TrackingNumber1" runat="server" />

</ContentTemplate>

<Triggers>

<atlas:ControlEventTrigger ControlID="TrackingNumber1$btnSave" EventName="Click" />

</Triggers>

</atlas:UpdatePanel>

</div>

</form>

<script type="text/xml-script">

<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">

<references>

</references>

<components>

</components>

</page>

</script>

</body>
</html>

TrackingNumber.ascx:
<%@dotnet.itags.org. Control Language="VB" AutoEventWireup="true" CodeFile="TrackingNumber.ascx.vb" Inherits="TrackingNumber" EnableViewState="true" %>

<asp:Panel ID="PanelTrackingNumber" runat="server" BackColor="#DAE8F4" Font-Bold="True" Height="173px"

Style='z-index: 104; position: relative;" Width="285px" >

<asp:TextBox ID="txtTrackingNumber" runat="server" Style='z-index: 100; left: 40px;

position: absolute; top: 83px"></asp:TextBox>

<asp:Label ID="Label1" runat="server" Font-Bold="False" Style='z-index: 101; left: 28px;

position: absolute; top: 53px" Text="What is the tracking Number?"></asp:Label>

Tracking number of tracking cover sheet for records.

<asp:Label ID="Label10" runat="server" ForeColor="Red" Height="10px" Style='z-index: 102;

left: 212px; position: absolute; top: 55px" Text="*" Width="13px"></asp:Label>

<asp:Label ID="Label13" runat="server" ForeColor="Red" Style='z-index: 103; left: 8px;

position: absolute; top: 149px" Text="* Optional"></asp:Label>

<asp:Button ID="OkButton" runat="server" Style='z-index: 104; left: 10px; position: absolute;

top: 115px" Text="OK" />

<asp:Button ID="CancelButton" runat="server" Style='z-index: 105; left: 98px; position: absolute;

top: 145px" Text="Exit" />

<asp:Button ID="btnSave" runat="server" Style='z-index: 106; left: 59px; position: absolute;

top: 111px" Text="Save" />

<asp:Label ID="lblNow" runat="server" Style='z-index: 108; left: 112px; position: absolute;

top: 111px" Text="Label" Width="119px"></asp:Label>

</asp:Panel>

TrackingNumber.ascx.vb:

Imports System.Data.SqlClient

Partial Class TrackingNumber

Inherits System.Web.UI.UserControl

Protected Sub WriteToDB()

Dim oCon As SqlConnection

Dim oComm As SqlCommand

oCon = New SqlConnection("server=MODREP1;database=SAP_DB;uid=UserId;pwd=xxxx;")

oCon.Open()

oComm = New SqlCommand("UPDATE Records SET Data='" & Now.ToLongTimeString & "' WHERE ID=4", oCon)

oComm.ExecuteNonQuery()

oComm.Dispose()

oCon.Dispose()

End Sub

Protected Sub btnSave_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSave.Click

WriteToDB()

Me.lblNow.Text = Now.ToLongTimeString

End Sub

End Class

ModalPopUp.css:
/*Modal Popup*/

.modalBackground {

background-color:Gray;

filter:alpha(opacity=70);

opacity:0.7;

}

.modalPopup {

background-color:#ffffdd;

border-width:3px;

border-style:solid;

border-color:Gray;

padding:3px;

width:250px;

}

I tried placing the ModalPopupExtender tag inside the UpdatePanel. I've tried placing the ModalPopupExtender in the .ascx file, and with & with out the Panel elements. In the lastest configuration, clicking the OK and Exit buttons causes the popup to close normally. But when the Save button is clicked to perform server side processing, the following happens:

data is written to the database (desired effect)

The error is probably because the postback within the UpdatePanel stomps the relevant DOM elements and then the event handlers ModalPopup set up are gone. You might try sticking the ModalPopupExtender tag inside the UpdatePanel, too, as this often helps.
One other thing people sometimes have success with is wrapping the Save button in an UpdatePanel.

I don't know if you have fixed this issue, or if you even look again, but in your server-side code you can call ModalPopupExtender1.Show();

which will display the modal dialog box after the post back.

ModalPopup -> UserControl -> fire event ?

Hello !

Because I made different scenarios with modalpopups, I have this situation :

1) I create ModalPopup dynamically

2) Load dynamically a usercontrol into a ModalPopup (and set usercontrol ID)

3). UserControl has buttons OK,Cancel and btnFireClick with click event on a server

Everything is fine, except that when I click btnFireClick the click event didnt fire...

If I set the same buttons into modalpopup but not like usercontrol - event is executed

If I load the usercontrol in the page (not in modalpopup) - event is executed

But if I load usercontrol into modalpopup - event didnt execute

Where is the problem ?

I use Microsoft ASP.NET 2.0 AJAX Extensions

Please try your scenario with the recently available61121 release of the Toolkit (and ASP.NET AJAX Beta 2). If the problem persists, then please reply with acomplete, simple, self-contained sample page that demonstrates the problem so that we can investigate the specific behavior you're seeing. Thank you!

2) Load dynamically a usercontrol into a ModalPopup (and set usercontrol ID)

Your user control is a server side control which renders a bunch of html controls at the client side, it is not like a Panel server control which renders a div at the client side.

The second thing you may want to look at is, if you load the user control dynamically, you will have to load the user control every postback within OnInit or OnLoad and give it the same name since you the first time you load the user control dynamically. Otherwise, the event won't fire and the control does not even exist.

ModalPopup above existing and how to open a ModalPopup programmatically

Can I create a new ModalPopup control (Ajax Extender) and open it above an existing (already shown) ModalPopup?

And how can I open a ModalPopup programmatically instead of using a control?

I have tried to open a modalPopup on top of another one and it simply doesn't work, the second modal popup is forced to the right of the screen due to it's positioning being based upon the first one, not the screen. If anyone has a solution I would love to hear.

You can open a Modalpopup from code-behind by calling modalPopup.Show().

If you want to do it from javascript client side, you have two choices:

1. Create a hidden linkButton on the page and use this as the ModalPopup control trigger. From your Javascript you can call linkButton.click() which will open the modal popup.

2. From javascript, get a handle on the extender using it's PopupBehaviourID and use: $get(popupBehaviourID).show()

Andy.

How can I add an event listener that will execute a JavaScript function when the Show method of one of the ModalPopup is called?

I think that I can change its position right after it appears on the screen, but I have to test my idea.

Not sure about the event listener, but if you get this working ok please post back as this is something I require and cannot get to work :(

Andy.

hi Andy, i had tried the 2rd, but it's didn't worked.

the javascript error is that $get(popupBehaviourID) always return a null value.

i can see that the ModalPopupExtender is not rendered as an html element, so $get(popupBehaviourID) can not return an object