<

Use AJAX ModalPopupExtender in GridView or other data controls

Published on
26,459 Points
20,159 Views
3 Endorsements
Last Modified:
Approved
Community Pick
AJAX ModalPopupExtender has a required property "TargetControlID" which may seem to be very confusing to new users. It means the server control that will be extended by the ModalPopup, for instance, if when you click a button, a ModalPopup displays, then the button control is the one that is extended by the ModalPopup, so you will assign the button control's ID to "TargetControlID".

Another property of ModalPopupExtender is called "PopupControlID" which points to the actual control that will be displayed or popped up. Often times it points to an ASP:Panel control in which all contents are placed. For instance, if you would like to use a ModalPopup to display a customer's detailed information, then you can put the customer's details in a Panel control, then assign the Panel control's ID to the ModalPopuupExtender's PopupControlID. You cannot access PopupControlID property through the designer view and you have to switch to Source view in Visual Studio then manually assign value in ModalPopupExtender's markup.

Once you understand the above two properties, it is usually very simple to configure the ModalPopupExtender until it comes to using GridView, DataList, or other similar data controls. For instance, you have a GirdView that has an Edit (or View) button for each row and when the button is clicked, an AJAX ModalPopup is displayed with more information of the selected row. How would you configure the ModalPopup in this case?

It sounds very simple until when you try to assign TargetControlID property. Why? Let me explain. The Edit or View button usually is either in a CommandField or a TemplateField and cannot be accessible directly in Source view, which means you cannot assign the Edit/View control ID to TargetControlID which is a required field. How about using GridView's RowCreate event handler to dynamically assign TargetControlID with the button control ID in each row? Unfortunately you cannot because you are only allowed to assign one control ID to TargetControlID. So then what can we do? Here is the trick:

1. Add a server control ( I prefer to use Label control) and hide it with css style (not by setting Visible=False):
<asp:Label ID="lblPopupTargetID" runat="server" Style="display: none;"></asp:Label>

Open in new window

2. You can assign "lblPopupTargetID" to ModalPopupExtender's TargetControlID property:
<cc1:ModalPopupExtender ID="mpeEditEmployee" runat="server" 
    TargetControlID="lblPopupTargetID"
    PopupControlID="pnlEditCustomer">
</cc1:ModalPopupExtender>

Open in new window


How can we trigger the ModalPopup if we use the above trick? The answer is that we can use ModalPopupExtenderID.Show() function to display the ModalPopup in the code-behind and use ModalPopupExtenderID.Hide() to hide the ModalPopup. For instance, if the Edit button in your GridView is in a TemplateField with the CommandName="cmdEdit", then you can use GridView's RowCommand event handler to first populate the contents of the popup Panel, then call ModalPopupExtenderID.Show() to display the popup, with the above code snippet, it will be mpeEditEmployee.Show(). Depending on the design of the popup Panel, you will need to use the approriate event handler to close the popup. For instance, there are a Save button and a Cancel button in the popup Panel, then you can use both button's click event handler to clos the popup: mpeEditEmployee.Hide().

Note 1: if you want to use UpdatePanel (which I prefer), you will need to remember that both ModalPopupExtender and the control that TargetControlID points to need to be in the same UpdatePanel..

Note 2. If you use TemplateField for the Edit button, another way to implement ModalPopupExtender is to add the ModalPopupExtender control in the same ItemTemplate field as the button control so that you can assign the button's ID to TargetControlID. This approach is introduced in ASP.NET's AJAX tutorial: http://www.asp.net/learn/ajax-control-toolkit/tutorial-28-vb.aspx. I do not prefer this approach, the reason is simple: this apprach renders more HTML code.

    Private Sub gvCustomerList_RowCommand(ByVal sender As Object, _
            ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) _
                Handles gvCustomerList.RowCommand
 
        If (e.CommandName = "cmdEdit") Then
            'Populate ModalPopup content
            'Then call Show() to display the popup
            Me.mpeEditEmployee.Show()
 
        End If
 
    End Sub
 
    Protected Sub btnSave_Click(ByVal sender As System.Object, _
            ByVal e As System.EventArgs) Handles btnSave.Click
        'Save changes
        'Then call Hide() to close the popup
        Me.mpeEditEmployee.Hide()
    End Sub

Open in new window

    Private Sub gvCustomerList_RowCommand(ByVal sender As Object, _
            ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) _
                Handles gvCustomerList.RowCommand
 
        If (e.CommandName = "cmdEdit") Then
            'Populate ModalPopup content
            'Then call Show() to display the popup
            Me.mpeEditEmployee.Show()
 
        End If
 
    End Sub
 
    Protected Sub btnSave_Click(ByVal sender As System.Object, _
            ByVal e As System.EventArgs) Handles btnSave.Click
        'Save changes
        'Then call Hide() to close the popup
        Me.mpeEditEmployee.Hide()
    End Sub

Open in new window

3
Comment
Author:prairiedog
1 Comment
LVL 1

Expert Comment

by:carled
Thanks mate. Was perfect for my needs, appreciate you taking the time to do this.
0

Featured Post

Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

Join & Write a Comment

Key to your CPU's ability to stay cool is to use the right amount of thermal paste and apply it correctly. In other words you want as much thermal conductivity between CPU and the cooling block. Use a quality thermal paste and apply it in a manner…
Basic Overview of office 365 user portal
Other articles by this author

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month