Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 826
  • Last Modified:

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

0
houlahan
Asked:
houlahan
  • 7
  • 6
1 Solution
 
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
 
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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
 
guru_samiCommented:
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
 
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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 7
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now