CODEWITHSUNDEEP
asp.net-ajax
Mitesh
Mitesh

Reputation: 87

Ajax Modal Popup Extender With Repeater

I'm working with the Ajax ModalPopupExtender inside of a Repeater, but it is not showing because of some javascript error and other stuff. Could someone provide an example of how to do this?

Upvotes: 1

Views: 6297

Answers (1)

CassidyTheMan
CassidyTheMan

Reputation: 61

The way I have done this :

  1. Place the ModalPopupExtender outside (after) of the repeater control.
  2. Add a Button that will act as a 'fake' Target for the ModalPopupExtender, place this outside(after) of the repeater. Use 'Style="display: none"' to hide the button from the user. No OnClick event should be bound to this button.
  3. Place the ModalPopupExtender's target Panel outside of the Repeater.
  4. Within the repeater's item template add a linkbutton with an OnClick, using the linkbutton allows you to use the commandArgument, which can be bound to a DataBinder - say for a record ID
  5. In the codebehind create a sub that handles the onclick event for the linkbutton in the repeater. If needed, do a directCast of the sender object to a linkbutton so you have access to the commandArgument.
  6. Populate the ModalPopupExtender target Panel appropriately
  7. Do a ModalPopupExtender.show()

HTML

<ul id="Repeater">
<asp:Repeater ID="rptMain" runat="server">
  <HeaderTemplate>
    <span class="RepeaterHeader">
      <li>
        Edit
      </li>
    </span>
    <div class="clear"></div>
  </HeaderTemplate>
  <ItemTemplate>
    <li class="RptLeadItemEdit">
      <asp:LinkButton ID="btEdit" runat="server" Text="Edit"
           CommandArgument='<%#DataBinder.Eval(Container.DataItem, "ID")%>' 
           OnClick="OpenMPEEdit" />
    </li>
    <div class="clear"></div>
  </ItemTemplate>
 </asp:Repeater>
</ul>
<asp:Button ID="MpeFakeTarget" runat="server" 
     CausesValidation="False" Style="display:none" />
<asp:ModalPopupExtender ID="mpeEdit" runat="server" 
     TargetControlId="MpeFakeTarget" 
     PopupControlID="pnlEdit" 
     OkControlID="btCloseMPE" 
     BackgroundCssClass="ModalPopupBG" />
<asp:Panel CssClass="ModalPanel" runat="server" ID="pnlEdit">
  EDIT LEAD
  <asp:Label runat="server" ID="MPETEST"></asp:Label>
  <asp:Button runat="server" ID="btCloseMPE" text="Close" />
</asp:Panel>

Code Behind

Protected Sub OpenMPEEdit(ByVal sender As Object, ByVal e As System.EventArgs)
        Dim wLink As New LinkButton
        wLink = DirectCast(sender, LinkButton)
        MPETEST.Text = "ID = " & wLink.CommandArgument
        mpeEdit.Show()
End Sub

Upvotes: 6

Related Questions