Solved

ajax ModalPopupExtender and CommandName clash

Posted on 2011-02-28
13
780 Views
Last Modified: 2012-05-11
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
Comment
Question by:houlahan
  • 7
  • 6
13 Comments
 
LVL 41

Expert Comment

by:guru_sami
ID: 35000376
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
 

Author Comment

by:houlahan
ID: 35000427
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
 
LVL 41

Expert Comment

by:guru_sami
ID: 35000557
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
 

Author Comment

by:houlahan
ID: 35006321
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
 
LVL 41

Expert Comment

by:guru_sami
ID: 35008171
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
 

Author Comment

by:houlahan
ID: 35019730
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 41

Expert Comment

by:guru_sami
ID: 35019993
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
 

Author Comment

by:houlahan
ID: 35020052
if the model isn't inside the itemTemplate then it cant find ImageButton1 as it only exists inside of the itemTemplate
0
 
LVL 41

Expert Comment

by:guru_sami
ID: 35020133
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
 
LVL 41

Expert Comment

by:guru_sami
ID: 35020162
0
 

Author Comment

by:houlahan
ID: 35031532
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
 
LVL 41

Accepted Solution

by:
guru_sami earned 500 total points
ID: 35032948
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
 

Author Comment

by:houlahan
ID: 35035155
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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now