Modal popup and Gridview.OnSelectedIndexChanged Firefox problems

Hello there again!

I am building a gallery for a site and I am using a gridview to do this. The idea is to have a GridView which shows the gallery items, the user clicks anywhere on a line in the Gridview and a ModalPopup pops up to show the gallery item's details.

I am however encountering two problems:

1) The ModalPopup is somehow increasing the size of the whole page (Scrollbars appear or get larger) which causes it to center wrong and gives problems dragging it (While dragging the scrollbars resize which offsets the dragging and it ends up at an other place then you wanted it).

2) The ModalPopup is not being shown at all in Firefox when you click the Gridview. The Event fires, and it gets inside the if statement, but ModalPopup1.Show() simply does not work.

Any ideas?

Skorp

- Link:Here

- Code:

<%@dotnet.itags.org. Page Language="C#" MasterPageFile="../Ap.master" Title="DiceTroll Gallery" validateRequest="false" %
<%@dotnet.itags.org. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@dotnet.itags.org. mastertype virtualpath="../Ap.master" %>
<%@dotnet.itags.org. Reference VirtualPath="../S.master" %>
<%@dotnet.itags.org. Import Namespace="System.Data.Odbc" %>
<%@dotnet.itags.org. Import Namespace="DTNameSpace" %
<script runat="server">
DTUser user;
DTSettings settings;
int ID;

protected void Page_Load(object sender, EventArgs e)
{
user = Master.Master.currUser;
settings = Master.Master.currSettings;

Load_DropDown();
Load_Grid();
}
void Load_Grid()
{
//Some SQL stuff
}
void Load_DropDown()
{
//Some SQL stuff
}
protected void DropDown_Event(Object sender, EventArgs e)
{
string SelectedCat = CatDropDown.SelectedValue;
if (SelectedCat != "Show All Galleries")
SqlDataSource1.SelectCommand = "//Some SQL stuff";
else
{
SqlDataSource1.SelectCommand = "//Some SQL stuff";
GridView1.DataBind();
}
Page.Focus();
}
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.DataItemIndex == -1)
return;

e.Row.Attributes.Add("onMouseOver",
"this.style.cursor='hand';");
e.Row.Attributes.Add("onclick",
this.GetPostBackClientEvent(GridView1,
"Select$" + e.Row.RowIndex.ToString()));
}
protected void GridView_SelectRow(object sender, EventArgs e)
{
GridViewRow row = ((GridView)sender).SelectedRow;
if (row != null)
{
ModalPopupExtender1.Show();
}
}
</script
<asp:content id="mainPageC" contentplaceholderid="mainPageCPH" runat="server">
<div class="tablecontent" style="margin-top: 20px; margin-bottom: 20px; margin-left: 20px;">
<asp:ScriptManager id="ScrMan1" runat="server" EnablePartialRendering="true" ></asp:ScriptManager>
<asp:UpdatePanel id="UpPan1" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:SqlDataSource ID="SqlDataSource2" Runat="server"
SelectCommand = "//Some SQL stuff" />

<b>Gallery Sections:</b><br />
<asp:DropDownList ID="CatDropDown" runat="server"
AutoPostBack="True"
OnSelectedIndexChanged="DropDown_Event"
DataSourceID="SqlDataSource2"
DataTextField="Category"
DataValueField="ID"
AppendDataBoundItems="true">
<asp:ListItem Value="Show All Galleries" Selected="true">Show All Galleries</asp:ListItem>
</asp:DropDownList><br /><br />
<asp:GridView ID="GridView1" Runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="False" AllowSorting="True" AllowPaging="True" DataKeyNames="ID" Width="90%" OnRowDataBound="GridView1_RowDataBound" OnSelectedIndexChanged="GridView_SelectRow">
<RowStyle backcolor="#E6E9EC" forecolor="#679DE7" Font-Bold="True" BorderColor="#E6E9EC" />
<AlternatingRowStyle backcolor="#CAD1D8" forecolor="#679DE7" Font-Bold="True" BorderColor="#CAD1D8" />
<HeaderStyle backcolor="#425674" forecolor="#FFFFFF" Font-Bold="True" Font-Underline="False" BorderColor="#679DE7" />
<Columns>
<asp:CommandField SelectText ="Select" ShowSelectButton="true" ItemStyle-CssClass = "HideButton" HeaderStyle-CssClass ="HideButton" />
<asp:imagefield dataimageurlfield="thumbnail"
dataimageurlformatstring="http://www.dicetroll.com/thumbnail_images/{0}"
alternatetext="Image"
nulldisplaytext="No image on file."
headertext="Image" />
<asp:BoundField DataField="title" HeaderText="Title" SortExpression="title" />
<asp:BoundField DataField="vchnickname" HeaderText="Author" SortExpression="vchnickname" />
<asp:BoundField DataField="Date_approved" HeaderText="Date" SortExpression="Date_approved" />
<asp:BoundField DataField="views" HeaderText="Views" SortExpression="views" />
<asp:BoundField DataField="nCount" HeaderText="Reviews" SortExpression="nCount" />
<asp:BoundField DataField="nScore" HeaderText="Score" SortExpression="nScore" />
</Columns>
</asp:GridView><br />
<asp:SqlDataSource ID="SqlDataSource1" Runat="server"
SelectCommand = "//Some SQL stuff" />

<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
PopupControlID="GalleryPanel"
PopupDragHandleControlID="GalleryHeader"
CancelControlID="GalleryClose"
OkControlID="GalleryClose"
TargetControlID="HiddenModalTrigger"
DropShadow="true" />
<asp:Button ID="HiddenModalTrigger" runat="server" Style="display: none;" />

<asp:Panel ID="GalleryPanel" runat="server" CssClass="ModalPopup" style="display:none">
<asp:Panel id="GalleryHeader" runat="server">
<div style="width: 100%; text-align: right; background-color: #425674; border: 1px #CAD1D8;">
<asp:LinkButton ID="GalleryClose" runat="server" Layout="not set" style="font: bold 14px arial; color: White; text-decoration: none;">Close</asp:LinkButton>
</div>
</asp:Panel>
<p style="font-family: georia, serif; font-size: 20px; font-weight: bold; font-variant:small-caps; text-decoration: none; color: #B82223;">
<asp:Label ID="GalleryTitle" runat="server" Text="" />
</p>
<asp:Image ID="GalleryPic" runat="server" /><br />
<asp:Label ID="GalleryText" runat="server" Text="" /></br />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress id="UpProg1" runat="server">
<ProgressTemplate>
<div style="width:100%; height: 50px; background-image: url(Loading.gif); background-position: center center; background-repeat:no-repeat;"></div>
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</asp:content>

I can answer the FireFox question - Modal is broke with Firefox 2.0.0.2 (prev versions should work fine) MSFT and FF are supposedly working together to resolve the issue...

Your other issue is most likely how your CSS is structured...causing the scrolling... setting explicit width and height in pixels may resolve the issue. Considering this is displaying images - if the images vary in size could possibly end itself to this particular behavior...

Well, that wasn't really the news I was hoping to hear abour FF... Is there any ETA on the fix, or is it such low priority that we can wait forever?

The CSS I am using is the following, the images will be having a fixed width but variable height:

.ModalPopup
{
width: 750px;
background-color: #E6E9EC;
font-family: georia, serif;
font-size: 12px;
text-decoration: none;
text-align: left;
color: #000000;
border: 1px solid #CDDFF7;
}

I don't really see anything wrong with it other then setting no height, so I tried setting it but it still showed the same problem.

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 Delete Help.

Im working on a gridview that`ll delete a row of data. Currently the gridview shows the data, and i have a linkbutton at the other end of the gridviews template field. When you click the linkbutton the modalpopup appears and it has two buttons "cancel" and "ok". Cancel makes it disappear, and ok, doesnt do its job lol. I have a foreach code that deletes all the entries to the gridview but i cant work out what the individual row delete code would be! my gridview code is :

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="Admin" BorderStyle="Dotted" BorderWidth="0px" ShowHeader="False" DataKeyNames="UserID">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Panel ID="Admin" runat="server" >

<table width="630">
<tr>
<td width="460">
<div align="left">
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# Eval("UserID", "~/Profile.aspx?id={0}") %>' Text='<%# Eval("FullName") %>' Font-Names="Tahoma" Font-Size="10pt" ForeColor="SteelBlue"></asp:HyperLink>
</div>
</td>
<td>
<div align="right">
<asp:LinkButton ID="LinkButton7" runat="server" Font-Names="Tahoma" Font-Size="8pt" ForeColor="SteelBlue" OnClick="LinkButton7_Click">Remove</asp:LinkButton>
</div>
</td>
</tr>
</table>
<hr />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender5" TargetControlID="LinkButton7" CancelControlID="Button10" PopupControlID="Panel5" runat="server" BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
<asp:Label ID="Label17" Visible="false" runat="server"></asp:Label>
<asp:Panel ID="Panel5" runat="server" Width="300px" BackColor="IndianRed">
<asp:Label ID="Label18" runat="server" Text="Are you sure you want to delete this person?"></asp:Label><asp:Label ID="Label19" runat="server"></asp:Label>
<table>
<tr>
<td>
<asp:Button ID="Button9" runat="server" OnClick="LinkButton9_Click" Text="Confirm" />
</td>
<td>
<asp:Button ID="Button10" runat="server" Text="Cancel" />
</td>
</tr>
</table>
</asp:Panel>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>
Nothing...

</EmptyDataTemplate>
</asp:GridView>

Currently when the linkbutton9 is clicked... it loop though all of the records and deletes them can someone help me with a code that deletes the unique ID in the list of users "UserIDNumber" thanks in advance! si!

Hiblink18jew,

You don't need to loop though all of the records to find out the record that you want to delete.

Just change:

<asp:Button ID="Button9" runat="server" OnClick="LinkButton9_Click" Text="Confirm" />

to:

<asp:Button ID="Button9" runat="server" OnCommand="LinkButton9_Command" CommandArgument='<%# Eval("UserID", "{0}") %>' Text="Confirm" />

C# code:

protected void LinkButton9_Command(object sender, CommandEventArgs e)
{
// delete the person whoes UserID is e.CommandArgument
}

Best Regards

Modal Popup Delete

Hey, I have a gridview with a linkbutton "delete". I made this originally with a rowcommand that deleted the item associated with that row. I am now implementing a modal pop-up to confirm deleteing the row of data. The pop-upworks fine, and appears when i click the linkbutton ( note the link button now has no "onclick" event ) the popup panel has two buttons inside it button1 and button2, 1 = confirm, 2 = cancel.

I set the CommandArguement of button1 to the ID of the item, and the CommandName to "DeleteMe". The command_row event is :

protected void GridView6_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "DeleteMe")
{
SqlCommand DeleteIt = new SqlCommand("DELETE FROM Items WHERE ItemD = '" + e.CommandArgument + "'", Connection);
Connection.Open();
DeleteIt.ExecuteNonQuery();
Connection.Close();
GridView6.DataBind();
}
}

When the user clicks button1 nothing happens.. im a little bit confused as to why, can anyone help? i assumed as the ajax extender is within the gridview row it would just continue to be a row command? if im way off can someone please let me know, thanks a million John

does anyone have an ideas? sorry to be a bit pushy but its driving me insane! lol, Ive done some random google searches and in the forums and i couldnt find anything, thanks John

Modal Popup Extender Flash

I'm using the MPE to display a panel that contains a gridview.
It works fine, except that when the page loads (whether it be IE or Mozilla), the panel containing the gridview is visible for a split second and then the MPE hides it. It's kind of confusing to a user - does anybody know how to fix this?

Surround the panel with a div as such:

<div id="divModalPopup" style="display:none"> <asp:Panel ID="pnlModalPopup" runat="server" Height="50px" Width="667px" BackColor="White"><!-- Some content --> </asp:Panel></div>

Thanks,
Chad

Modal popup in gridview

Hi,In a gridview,I want to have a column with a link control,clicking itshould display modal pup control,which will have some options withok/cancel button.How can I do it?

I believe others have had success sticking the ModalPopupExtender inside the item template.

Modal Popup OnClick (Server Side) Issues

I'm utilizing a modal popup to allow a user to enter a new record for a gridview on the screen. Once the modal popup is displayed (via clicking a link button), the user enters some values in some textboxes and the user clicks the save button. At this point the application executes the code in the code-behind for the button. However, if this is the first viewing of the screen (i.e. I just pressed play in visual studio), the values of the textboxes contained within the panel contain blank values (even though the user entered values).

The second strange thing that occurs, is if this is not the first viewing of this page and I click the link to display the modal popup, enter the text and click save, the OnClick (server side) fires twice.

Has anyone run across this issue? If so, how did you resolve it?

Thanks in advance,

Brian

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

If you are using the Official Beta 2 release - don't use it (As David recommended) - unless they updated the bits on the day they posted it as Beta 2 Release -its broke...- go to the source tab and download today's release...about 1/3 of the controls with the 'official Beta 2 ' release would exhibit that behavior (the accordian - would never accept user clicks, drag panel never dragged, always visible just remained visible in one spot, and the modal exhibited your issues... had something to do with types function or something...If you are using Beta 1 or Atlas - it will be more about how you are wrapping the modal - you should place it in its own update panel even if you are attaching it into every row. I personally have the modal as a single instance and I control the modal show and hide in codebehind... examples are in my blog entries...

Modal Popup not posting TextBox fields

I have a strange situation in which I am using a Model Popup Control with an embedded GridView containg TextBox controls in a column. I can DataBind the GridView in the codebehind and the TextBox controls are properly populated. However, when the pack posts back, the TextBox Controls always have an empty string for the Text property? This also occurs if I replace the GridView with a Repeater or any other list control.

Other controls, like labels, have there Text property available.

craig

You might want to look at this post:

http://forums.asp.net/thread/1328079.aspx

Look at the second page, at the last post with the JavaScript.

They have done some nice work with the modal regarding this issue I think.

There was also a workaround using the SubmitButtonBehavor = false;

Dont know if this will help you, but I thought I would give it a shot

Good luck

-Shane

Modal Popup Scrollable

I have a grid view inside a modal popup, here is my question: how can i make modal popup scrollable (keep visible) when gridview contains too many rows? Right now all the rows beyond page are remain invisible even I scrolled the scrollbar on the side? Thanks i advance.Try to put that grid inside div with css

overflow: auto

You will need to fix the size of the div too!

Modal Popup, Gridview and Updatepanel.

Here is I have.

A Page that has a button (button1), textbox (textbox1), and a modalpopup. The modalpopup extends a panel that has a usercontrol inside it.

Inside the Usercontrol I have some textbox's and a button (button2). And I also have an updatepanel with a gridview inside.
The update panel has a trigger referencing the button (button2). The gridview has a column with a button (selectbutton) inside. I also handle the rowcommand of the gridview to update textbox1 on the page.

When I click button1 the popup shows fine. Then I enter some stuff inside the textbox's for the usercontrol, and then click button2. The gridview updates as expected.

When I click on the button (selectbutton) inside the gridview I set textbox1 on the page to a value from the selectbutton's row and call the hide method of the modalpopup extender...but textbox1 does not update, and the modalpopup does not close.

Any ideas???

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

modal window (asp.net ajax page) not closing

Hello, I'm creating a pop up using 'window.showModalDialog', the page that opens is a asp.net ajax page. I'm displaying a gridview on this. When user selects a row from the gridview, i need to store the selected value to session variable and close the popup window. I'm using the below code on the select image button click. If i manually closes the popup window, it get backs to the parent. The code on click event is

ProtectedSub OnSelect(ByVal senderAsObject,ByVal eAs CommandEventArgs)

Dim strScriptAsString ="<script language='javascript'>window.returnValue='" + retVal +"';window.close();</script>"

If (e.CommandName.Equals("cmdSelTag"))Then

Session(Utility.Constants.SelectedTagDefinitionId) = e.CommandArgument.ToString()

IfNot ClientScript.IsStartupScriptRegistered("clientScript")Then

ClientScript.RegisterStartupScript(GetType(Page),"clientScript", strScript)

EndIf

EndIf

EndSub

Note: If make it asp.net page rather than asp.net ajax page, then this works fine.

Any help is appreciated.

Hi.. i used ScritManager.RegisterStartupScript instead of ClientScript.RegisterStartupScript. Now its working.

Modalpop larger than browser window

I am having a problem with a modal popup that is larger than the browser window. The modal popup contains a gridview, and can be large. I cannot figure out a way to scroll using the browswers scrollbars. I just noticed the Modal popup on this ASP.NET site to submit source code, and thought that would be perfect. Can anyone help me get started implementing a modal such as that?

Thanks

you can set the width & height of the Panel that you are using for popup.

Eg. <asp:Panel id="panelpopup" runat="Server" CSSClass="modalPopup" Width="600px" Height="400px" />

Thanks for the reply.

It appears I am still having a few issues. One is that regardless of what sizes I specify, if results in the gridview don't have enough room, it will automatically make it big enough to fit it in, but the ModalPoppup doesn't grow with it. It seems like the size of the panel would grow with the data inside of it, but for some reason the data will flow out of the ModalPopup. Also, if it returns too much information, or if a user makes their browser window smaller than the size of the popup, they cannot scroll to see it all. I can scroll the page below the popup, but the popup always recenters itself.

Does anyone have a solution for this?

ModalPopup - Centering when content size change

hi,

modalPopup will recenter itself when the contents change size.

i have a gridView which may change size according to a users input. modalPopup will recenter itself, but only AFTER the user attempts to scroll the window.

is there a way to force the modal-popup to 're-evaluate' itself based on a trigger? or how do i call the resize function that it obviously has.

thank you.

Hi RomanT,

We don't have built in support for this, but you can call the_layout function on your client-side ModalPopupBehavior instance.

Thanks,
Ted

ModalPopup - closing after every click event (need help)

My ModalPopupExtender show a Panel with GridView, TextBox - txtSearchParam, Button - btnSearch and of course also OkButton - btnOK and CancelButton- btnCancel. What I wannt to do is this:

1) in that gridview is displayed simple list of customers

2) user cann type in txtSearchParam some name and with click on btnSearch performs a SEARCH for typed name

Every time when user clicks on SEARCH BUTTON (btnSearch) my ModalPopup will be closed. It seems like ModalPopup ignores both settings for OKControlID = "btnOK" and CancelControlID="btnCancel".

Why is that ModalPopup closed after every Click in panel with gridView ?

What am I doing wrong ? Please help and sorry for my english :-)

Because btnSearch is posting back, I think that is the reason.

I also faced the same problem, upon google, i found that I have to use updatepanel and keep the btnSearch inside updatepanel's content.

It solved the problem, I can get the results wih different search criteria... but after that If I click cancel it is messing my page's dropdown cotrols.

Any idea?

I am having the same problem. I've tried everything I can think of... putting the TargetControl inside an UpdatePanel, putting it outside an UpdatePanel... with no luck.

Here, specifically, is what I'm trying to do:

I have a Panel ( we'll call it "Panel1"). The panel contains an UpdatePanel. The Updatepanel contains a User Control that has text boxes, buttons... all sorts of things that perform postbacks. If this is on a page by itself, everything works just fine; the updatepanel performs the partial postbacks and everything works.

However, I need it to appear as if it were a highly interactive modal dialog box. So, I attached a ModalPopupExtender to "Panel1". It pops up just fine, but whenever any of the controls within my user control fire, the entire modal popup vanishes. It doesn't seem to matter that I set the OkButton and CancelButton properties to buttons that are not within my user control... in fact, I set them to "hidden" buttons that are on the outer page, outside of the whole Panel1 that I'm displaying modally.

Someone please help... I'm at my wits end trying to figure this out.

Thx champ ! That was it...it works OK with UPDATEPANEL :-)
Can you elaborate on how you got it working? I still cannot.

Hi RobertBeach,

Do you still need a sample code , let me know...

yes, sure...let's share it with us please :-)

Hi,

Make sure that popup panel's OkControlID and CancelControlID are outside the update panel. Postback buttons should be inside the update panel.

For Example:

<cc1:modalpopupextender id="mdlPopup" runat="server" targetcontrolid="btnDummy1" popupcontrolid="pnlPopup" backgroundcssclass="modalBackground" okcontrolid="OkButton1" dropshadow="true" popupdraghandlecontrolid="pnlHeaderPopup" /><%-- PopupP anel--%><asp:Panel ID="pnlPopup" runat="server" Style="display: none" CssClass="modalPopup" Width="500px"><%-- Popup Panel Header--%> <asp:Panel ID="pnlHeaderPopup" runat="server"><%-- OK Control ID--%> <asp:ImageButton ID="OkButton1" runat="server" BorderStyle="None" ImageAlign="AbsMiddle" ImageUrl="~/App_Images/close_icon.gif" /> </asp:Panel> <Ajax:UpdatePanel ID="upLeaveDetails" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:FormView ID="frmView" runat="server" DataSourceID="ds1" Width="100%"> <EditItemTemplate><%-- Buttons that postback--%> <asp:Button ID="btnUpdate" runat="server" CausesValidation="True" CommandName="Update" CssClass="btn" OnClick="btnUpdate_Click" Text="Update" /> <asp:Button ID="btnCancel" runat="server" CausesValidation="True" CommandName="Cancel" CssClass="btn" OnClick="btnCancel_Click" Text="Cancel" /> </EditItemTemplate> </asp:FormView> </ContentTemplate> </Ajax:UpdatePanel></asp:Panel>

For more information refer to:

http://blogs.technet.com/kirtid/archive/2007/05/03/using-updatepanels-with-modalpopups.aspx

Hope it helps.

ModalPopup + Gridview + images

Hello Guys!!! First I'm sorry for my english

I found this code in this forum and I try for see images from gridview and modalpopup, but, the images in gridview is clickable and i can go inside the panel, in this panel I want see the image big, but in gridview I have image small.

Any idea or some script different?

Thank you some much!!!!

<%@dotnet.itags.org.PageLanguage="C#"AutoEventWireup="true"CodeFile="Default2.aspx.cs"Inherits="Default2" %><!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><scriptrunat="server">

protectedvoid Page_Load(object sender,EventArgs e){

//Attach a Javascript funtion to the GridViewRow.

GridViewRow myGridViewRow;

for (int i = 0; i < GridView1.Rows.Count; i++){

myGridViewRow = (GridViewRow)GridView1.Rows[i];myGridViewRow.Attributes.Add("onclick","shopModalPopup('" + GridView1.Rows[i].Cells[0].Text +"');return false;");

}

}

</script><htmlxmlns="http://www.w3.org/1999/xhtml"><headid="Head1"runat="server"><title>Untitled Page</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><formid="form1"runat="server"><ajaxToolkit:ToolkitScriptManagerID="ScriptManager1"runat="server"></ajaxToolkit:ToolkitScriptManager>

<asp:GridViewID="GridView1"runat="server"AutoGenerateColumns="False"DataKeyNames="id_product"

DataSourceID="SqlDataSource1">

<Columns>

<asp:BoundFieldDataField="id_product"HeaderText="id_product"InsertVisible="False"ReadOnly="True"SortExpression="img_b">

<ItemStyleWidth="0px"/>

</asp:BoundField>

<asp:BoundFieldDataField="titolo"HeaderText="titolo"SortExpression="titolo"/>

<asp:BoundFieldDataField="numero"HeaderText="numero"SortExpression="numero"/>

<asp:BoundFieldDataField="colore"HeaderText="colore"SortExpression="colore"/>

<asp:TemplateField>

<ItemTemplate>

<asp:ImageButtonID="LinkButton1"runat="server"ImageUrl='<%# Eval("img_s") %>'/>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

<asp:SqlDataSourceID="SqlDataSource1"runat="server"ConnectionString="<%$ ConnectionStrings:cn_superexport %>"ProviderName="<%$ ConnectionStrings:cn_superexport.ProviderName %>"SelectCommand="SELECT * FROM [product]"></asp:SqlDataSource>

<asp:PanelID="Panel1"runat="server"CssClass="modalPopup"Height="200px"Width="300px"style="display:none">

<asp:UpdatePanelID="UpdatePanel1"runat="server">

<ContentTemplate>

EmployeeID:<asp:TextBoxID="tbEmployeeID"runat="server"></asp:TextBox><br/>

image:<asp:ImageID="image"runat="server"ImageUrl='<%# Eval("img_s") %>'></asp:image>

</ContentTemplate>

</asp:UpdatePanel>

<asp:ButtonID="btnCancel"runat="server"Text="Cancel"/>

</asp:Panel>

<divstyle="display: none">

<asp:ButtonID="Button1"runat="server"Text="Button"/></div>

<ajaxToolkit:ModalPopupExtenderID="ModalPopupExtender1"runat="server"TargetControlID="Button1"

PopupControlID="Panel1"CancelControlID="btnCancel"BackgroundCssClass="modalBackground">

</ajaxToolkit:ModalPopupExtender>

<scripttype="text/javascript"language="javascript">

function shopModalPopup(id_product){

//show the ModalPopupExtender

$get("<%=tbEmployeeID.ClientID %>").value = id_product;$find("<%=ModalPopupExtender1.ClientID %>").show();

}

</script></form></body></html>

Hello,

Is it that you want the image in panel1, which is the same as the image in the grid, to be full sized when it pops up?

If so, try to specify a width and height for the image in panel1.

<asp:ImageID="image"Width="200px"Height="440px"runat="server"ImageUrl='<%# Eval("img_s") %>'></asp:image>

Thanks,

Louis

Thank you for solution but still not work. Maybe I need different script...What you think? You have some solution?

Guys is possible click in button image from gridview and this open ModalPopupExtender for see the same image but more big, so different filed?

Please Help me!!

OK,

I think I have something for you. I used the gridview image example on MSDN :http://msdn2.microsoft.com/en-us/library/aa479350.aspx to make my grid.

Basically, I use javascript to add a click event to the row when the grid binds. You could do it on the image itself, its pretty straightforward.

When you click the row, I get the image path and put that path into the image inside the modal panel, where the image size is expanded, then I show the modal.

ASPX Page:

<%@.PageLanguage="C#"AutoEventWireup="true"CodeFile="LousTest.aspx.cs"Inherits="TestPages_LousTest" %>

<%@.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<headrunat="server">

<title>Untitled Page</title>

<scripttype="text/javascript">

function onSelect(elem) {

var sc = elem.cells[3].children[0].src;

//put this src path inot the images src...

var imager = document.getElementById("Image1");

imager.src = sc;

$find('a_modal').show();

}

</script>

</head>

<body>

<formid="form1"runat="server">

<asp:ScriptManagerID="sc1"runat="server"/>

<div>

<asp:GridViewID="GridView1"Runat="server"DataSource='<%# GetData() %>'

AutoGenerateColumns="False"

BorderWidth="1px"BackColor="White"OnRowDataBound="On_RowDataBound"CellPadding="3"BorderStyle="None"

BorderColor="#CCCCCC"Font-Names="Arial">

<FooterStyleForeColor="#000066"BackColor="White"></FooterStyle>

<PagerStyleForeColor="#000066"HorizontalAlign="Left"

BackColor="White"></PagerStyle>

<HeaderStyleForeColor="White"Font-Bold="True"

BackColor="#006699"></HeaderStyle>

<Columns>

<asp:BoundFieldHeaderText="Picutre ID"DataField="PictureID">

<ItemStyleHorizontalAlign="Center"

VerticalAlign="Middle"></ItemStyle>

</asp:BoundField>

<asp:BoundFieldHeaderText="Title"DataField="Title"></asp:BoundField>

<asp:BoundFieldHeaderText="Date Added"DataField="DateAdded"

DataFormatString="{0:d}">

<ItemStyleHorizontalAlign="Center"></ItemStyle>

</asp:BoundField>

<asp:ImageFieldDataImageUrlField="PictureURL"></asp:ImageField>

</Columns>

<SelectedRowStyleForeColor="White"Font-Bold="True"

BackColor="#669999"></SelectedRowStyle>

<RowStyleForeColor="#000066"></RowStyle>

</asp:GridView>

<asp:LinkButtonID="lnkAddAlert"runat="server"style="display:none"/>

<br/>

<br/>

<cc1:ModalPopupExtenderID="ModalPopupExtender1"runat="server"PopupControlID="Panel1"

TargetControlID="lnkAddAlert"BehaviorID="a_modal"OkControlID="cancel"BackgroundCssClass="modalBackground">

</cc1:ModalPopupExtender>

<asp:PanelID="Panel1"runat="server"Height="316px"Width="737px">

<asp:LinkButtonID="cancel"Text="close"runat="server"></asp:LinkButton>

<asp:ImageID="Image1"runat="server"Height="315px"Width="734px"/>

</asp:Panel>

</div>

</form>

</body>

</html>

And the code behind:

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

publicpartialclassTestPages_LousTest : System.Web.UI.Page

{

protectedvoid Page_Load(object sender,EventArgs e)

{

Page.DataBind();

}

protectedDataTable GetData()

{

// This method creates a DataTable with four rows. Each row has the

// following schema:

// PictureID int

// PictureURL string

// Title string

// DateAdded datetime

DataTable dt =newDataTable();

// define the table's schema

dt.Columns.Add(newDataColumn("PictureID",typeof(int)));

dt.Columns.Add(newDataColumn("PictureURL",typeof(string)));

dt.Columns.Add(newDataColumn("Title",typeof(string)));

dt.Columns.Add(newDataColumn("DateAdded",typeof(DateTime)));

// Create the four records

DataRow dr = dt.NewRow();

dr["PictureID"] = 1;

dr["PictureURL"] = ResolveUrl("~/images/construction.png");

dr["Title"] ="Blue Hills";

dr["DateAdded"] =newDateTime(2005, 1, 15);

dt.Rows.Add(dr);

dr = dt.NewRow();

dr["PictureID"] = 2;

dr["PictureURL"] = ResolveUrl("~/images/construction.png");

dr["Title"] ="Sunset";dr["DateAdded"] =newDateTime(2005, 1, 21);

dt.Rows.Add(dr);

dr = dt.NewRow();

dr["PictureID"] = 3;

dr["PictureURL"] = ResolveUrl("~/images/construction.png");

dr["Title"] ="Water Lilies";dr["DateAdded"] =newDateTime(2005, 2, 1);

dt.Rows.Add(dr);

dr = dt.NewRow();

dr["PictureID"] = 4;

dr["PictureURL"] = ResolveUrl("../images/construction.png");

dr["Title"] ="Winter";dr["DateAdded"] =newDateTime(2005, 2, 18);

dt.Rows.Add(dr);

return dt;

}

protectedvoid On_RowDataBound(object sender,GridViewRowEventArgs e)

{

if (e.Row.RowType ==DataControlRowType.Pager)

{

return;

}

try

{

e.Row.Attributes.Add("onClick","onSelect(this);");

}

catch (Exception ex)

{

throw (newApplicationException(ex.Message));

}

}

}

Please mark as answer if it works for you and good luck.

-Louis

Oh mamma mia! I change:

<asp:GridViewID="GridView1"Runat="server"DataSource='<%# GetData() %>' ........

to

<asp:GridViewID="GridView1"Runat="server"DataSourceid="sqlsource1" ............ and all field but not worl the javascript

In original script everythin is ok, but when change for put database,don't work the error say:cells.3.children : is null or not object.

So I change in:

var sc = elem.cells[3].Rows[0].src; --> not work

var sc = elem.Rows[3].Cells[0].src; --> not work

and I delete allprotectedDataTable GetData() {........................} all delete, and

delete this line command: Page.DataBind();

But not work............Why?

Hello,

You need to do a few things if you attach a new Datasource to the grid.

Frist - find the new index of the column that holds the image path url. That column index is the new index of ele.Rows[X].Cells[columnindex].src;

Second, make sure you handle on row databound. If you post the schema of your resulting table, I can help.

Thanks,

Louis