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. :)