ajax ModalPopupExtender and CommandName clash

I am trying to get an image button inside a itemTemplate in a gridview to select the current row on click and show a popup window as well. the problem is when the popup extender is present it doesn't allow the command name to run and wont select the current row. if i take the popup extender off it lets me use the button to select the row. here is the code i have for the item template:

                <asp:TemplateField>
                <ItemTemplate>
                    <asp:ImageButton ID="ImageButton1" CommandName="Select" runat="server" />

                    <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" CancelControlID="btnCancel1"
                        TargetControlID="ImageButton1" PopupControlID="Panel5" BackgroundCssClass="ModalPopupBG">
                    </asp:ModalPopupExtender>

                </ItemTemplate>
                </asp:TemplateField>

Open in new window

houlahanAsked:
Who is Participating?
 
guru_samiConnect With a Mentor Commented:
I am not sure why you need modal inside of gv and not outside like the sample link.
And yes the way you are trying to find won't work but try finding like this:


Protected Sub GridView2_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles GridView2.RowCommand
        Select Case e.CommandName
            Case "Select"
                Dim index As Integer = Convert.ToInt32(e.CommandArgument)

               ' Retrieve the row that contains the button clicked 
              ' by the user from the Rows collection.
              Dim row As GridViewRow = ContactsGridView.Rows(index)
             //Here find your  modal in the row
            ModalPopupExtender mp = DirectCast(row.FindControl("ModalPopupExtender 1"),ModalPopupExtender )
           mp.Show()
        End Select
    End Sub

Open in new window

0
 
guru_samiCommented:
I don't know the exact way to make it work but may be see if you can do a manual postback depending on the user click inside your popup panel.

If it is just a simple alert message you can try javascript confirm box like shown here:
http://msdn.microsoft.com/en-us/library/bb428868.aspx

You can also try using jquery confirm dialog to popup in the same way as confirm box in above link.
http://jqueryui.com/demos/dialog/#modal-confirmation
0
 
houlahanAuthor Commented:
the popup panel contains alot of other controls which susing the selected value populates the text fields and such forth so i kinda needed both to work together
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
guru_samiCommented:
Hmmm ...so you mean you are populating your selected record details in modal popup?

If so check this: http://mattberseth.com/blog/2008/04/masterdetail_with_the_gridview.html

Let me know if I am still misunderstanding.
0
 
houlahanAuthor Commented:
hmm not really i have some label fields which display the data that has been selected then the user can then type some data in to some textfields and then it submits it in to another table.
0
 
guru_samiCommented:
I haven't exactly tried that but from my understanding the idea should remain the same. Upon Select click you populate your labels etc and then call Show() method of the Modal and upon save click you save the data and hide the modal.
0
 
houlahanAuthor Commented:
yes is very much the same the only problem i have is accessing the model because it only exists inside the <ItemTemplate> im unsure how to access it cos i cant just call ModalPopupExtender1.show as ModalPopupExtender1 doesn't exist only if i would to call it inside of the itemTemplate is they anyway to define it so i can access it within the vbcode?
0
 
guru_samiCommented:
I think only one modal would suffice and don't see a need to include inside of ItemTemplate.

But what you can try is finding the ModalPopupExtender1 inside of the item which you determine inside the ImageButton's Command event.
0
 
houlahanAuthor Commented:
if the model isn't inside the itemTemplate then it cant find ImageButton1 as it only exists inside of the itemTemplate
0
 
guru_samiCommented:
When you put modal outside of ItemTemplate, you don't have to use TargetControlID="ImageButton1", instead you use a dummy button on the page. Set that button invisible because Showing the modal will be handled from code-behind and not upon button click directly.
0
 
houlahanAuthor Commented:
Ive tried that but the problem i still face is that i cant then access the ModalPopupExtender from the code because it only exists inside the itemTemplate so the code that i tried to use:

    Protected Sub GridView2_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles GridView2.RowCommand
        Select Case e.CommandName
            Case "Select"
                ModalPopupExtender1.show() 'cant access
        End Select
    End Sub

Open in new window


wont work because its not defined
0
 
houlahanAuthor Commented:
Thank you ever so much for you help! finally it works!! here is the code i ended up with for anyone else who has this problem:

</HeaderTemplate>
                <ItemTemplate>
                    <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" CancelControlID="btnCancel"
                        TargetControlID="MpeFakeTarget" PopupControlID="Panel1" BackgroundCssClass="ModalPopupBG">
                    </asp:ModalPopupExtender>
                    <asp:ImageButton ID="Image1" runat="server" CommandName="Select" CommandArgument='<%# Container.DataItemIndex %>'
                        ImageUrl="~/images/Upload-icon.png" />
                    <asp:Button ID="MpeFakeTarget" runat="server" CausesValidation="False" Style="display: none" />
                </ItemTemplate>
            </asp:TemplateField>

Open in new window


    Protected Sub GridView2_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles GridView2.RowCommand
        Select Case e.CommandName
            Case "Select"
                Dim index As Integer = Convert.ToInt32(e.CommandArgument)

                ' Retrieve the row that contains the button clicked 
                ' by the user from the Rows collection.
                Dim row As GridViewRow = GridView2.Rows(index)
                'Here find your  modal in the row
                Dim mp As ModalPopupExtender
                mp = DirectCast(row.FindControl("ModalPopupExtender1"), ModalPopupExtender)
                mp.Show()

        End Select
    End Sub

Open in new window


also the reason the modal has to be inside the gv is because the MpeFakeTarget, and the ImageButton only exist inside the itemTemplate.

Thank you again for your help.
0
All Courses

From novice to tech pro — start learning today.