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 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