Tuesday, July 1, 2008

Modals in Gridviews

Setting up a pop-up modal is not as hard as I had thought. I am using the Selector tool as before, it is a GridView with the Autoselect enabled. I add the ModalPopupExtender from the toolkit. I add an <asp:Button ID="dummybutton" runat="server" style="dislay: none" /> and set TargetID="dummybutton". The button is hidden and will not be used. In the code behind the page, use the ID for the ModalPopupExtender to show the modal. Here is an example:

protected void ux_ResultList_SelectedIndexChanged(object sender, EventArgs e)
{
//a row has been selected, save the hazard id as a session varaible HttpContext.Current.Session[DataKey] = ux_ResultList.SelectedDataKey.Value;
// show the modal using the extender
ux_ResultList_ModalPopupExtender.Show();
}

ux_ResultList is the GridView, ux_ResultList_SelectedIndexChanged() is the procedure called when the GridView is selected, and ux_ResultList_ModalPopupExtender is the ModalPopupExtender. Don't confuse the Panel with the ModalPopupExtender. The extender shows the Panel, you tell the extender to show.
Next, I will show you how to populate the modal with the selected site information.

No comments: