How do I target a GridViewRow with an AJAX.Net Toolkit PopupExtender?

Question

Hi all,

I have a lot of data to display in a GridView. Because there's so much information per row, I'd like to be able to display additional information when a user clicks on the row, so I thought a PopupExtender from the AJAX Toolkit would be perfect.

Ideally, I want the popup to display whenever any of the controls within the row are selected. I've been able to successfully attach the PopupExtender to a single control within the row, but I can't get the pop-up to attach to the row itself.

I would have thought that setting the PopupExtender's TargetControlId to the Row's ClientID within the RowDataBound event would work, but when I do this I get a runtime error:

TargetControlID of 'popupExtId' is not valid. 
A control with ID 'gvList_ctl02' could not be found.

I noticed that the GridViewRow is rendered, the tr element does not include an id, so I also tried extending the GridView control to override the CreateRow method to render the id - using this method I was able to render the row's ID (e.g. gvList_ctl02), but the same runtime error was thrown when I added the PopupExtender back into the code.

I also tried binding the showPopup() javascript command to the row's onclick event to get the popup to display manually; whilst the click event is registered OK and is definitely triggered, the popup is still not shown.

Does anyone have any idea how to / if you can bind a PopupExtender to a GridViewRow?

My row bound code is as follows:

protected void gvList_RowDataBound(object sender, GridViewRowEventArgs e)
{
 if (e.Row.RowType == DataControlRowType.DataRow)
 {
  // Bind the popup extender's target ID to the row ID
  // This will cause a runtime error
  PopupControlExtender pop = e.Row.FindControl("popupExtId") as PopupControlExtender;
  pop.TargetControlID = e.Row.ClientID;

  // Also bind the client side click handler to try to get the popup to show
  // The alert is triggered and no javascript error is generated, but the popup does not display
  e.Row.Attributes.Add("onclick", "alert('Row Clicked'); $find('" + pop.BehaviorID + "').showPopup();");
 }
}

Many thanks.

Answer 1

If you're not opposed to using an ajax ModalPopupExtender, I use a little bit of javascript and some sneaky hidden button clicks to fire off my modal popups from within a grid view. I usually make my modal popup extender's target control id my hidden button, then, via javascript, fire my hidden button's click event to show the modal popup.

Here's my modal popup and hidden button markup.

   <asp:Button ID="hiddenButton" runat="server" Text="" style="display:none"></asp:Button>
    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender2" runat="server" 
    TargetControlID="hiddenButton" PopupControlID="Panel1" CancelControlID="CancelButton"
    BackgroundCssClass="modalBackground" Drag="True"/>

Here's my javascript to show my popup.

      function showModal(btnID) {
            btn = document.getElementById(btnID);
            btn.click();
            }

In my rowdatabound event, I call the javascript function showModal from button's onclick event.

Button myButton = (Button)e.Row.Cells[9].Controls[1];
            matchButton.Attributes.Add("onclick", "showModal('" + hiddenButton.ClientID + "');");

Hope this might help point you in the right direction.