Topic: How to use a collection with a repeater and Hover Menu
Share/Save/Bookmark

Description:  This topic discusses how to bind a collection to a repeater.  It will also show you how to get the object back by using a AJAX Hover Menu

Notes: (None)

1.  Within your .vb or .cs file, define a collection object and fill it. E.g...

  
Private Property thisMyObjectCollection() As MyProject.Model.MyObjectCollection
   
Get
      If
ViewState("thisMyObjectCollection")
Is Nothing Then
         Return Nothing
      Else
         Return CType
(ViewState("thisMyObjectCollection"), MyProject.Model.MyObjectCollection)
      
End If
   End Get
   Set
(ByVal Value As MyProject.Model.MyObjectCollection)
      ViewState("thisMyObjectCollection") = Value
   
End Set    
End Property
   

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
   Dim myObjectBLL As New MyProject.MyObject
   If Not IsPostBack Then
      ' This calls an App Logic Layer method that will return a MyObjectCollection
      thisMyObjectCollection = myObjectBLL.GetColectionOfMyObjects() 
      ' This Loads the values into the repeater
      rptMyObjectCollection.DataSource = thisMyObjectCollection
      rptMyObjectCollection.DataBind()  
   End If
End Sub

2.  Within your .aspx page, place a reapeater on the page

<table>
   <asp:Repeater ID="rptMyObjectCollection" runat="server">

      <ItemTemplate>

         <tr runat="server" id="trMyObjectCollectionList">
            <td align="left">
               <asp:Label Id="lblMainLabel" runat="server" Text='
<%#CType(Container.DataItem, MyProject.Model.MyObjectCollection).MyObjectsNameField %>' />
            </td
>
            <td
>
               <asp:CheckBox Id="chkSomeCheckBox" runat="server" Checked='<% IIF(CType(Container.DataItem, MyProject.Model.MyObjectCollection).MyObjectsBitField = 1, "True", "False") %>' />
               <asp:TextBox Id="txtSomeTextBoxControl" runat="server" Text='<% CType(Container.DataItem, MyProject.Model.MyObjectCollection).MyObjectsStringField %>' />
            </td>
            <td>
               <asp:Panel CssClass="popupMenu" ID="PopupMenu" runat="server">
                  <div style="border: 1px outset white; padding:2px; width:85px">
                     <asp:LinkButton ID="lnkEditMyObject" runat="server" CommandName="Edit" Text="Edit" />
                     <asp:LinkButton ID="lnkDeleteMyObject" runat="server" CommandName="Delete" Text="Delete" />
                  </div
>
               </asp:
Panel >
            </td>
         </tr
>
      <AjaxToolkit:HoverMenuExtender ID="hmeMyObject" runat="server"
         HoverCssClass="popupHover"
         PopupControlID="PopupMenu"
         PopupPosition="Right"
         TargetControlID="trMyObjectCollectionList"
         PopDelay="25" /
>
      </ItemTemplate>
   </asp:Repeater
>
</table>

3.  You will need to add the repeater's ItemCommand Event to get the object back

Protected Sub rptMyObjectCollection_ItemCommand(ByVal source As Object, ByVal e As System.Web.UI.WebControls.RepeaterCommandEventArgs) Handles rptMyObjectCollection.ItemCommand
   Dim MyObject As MyClass.Model.MyObject 'Single item, not a collection
   If e.CommandName = "Edit" Then
      ' Get the object
      MyObject = thisMyObjectCollection.Item(e.Item.ItemIndex)
   Else
      thisMyObjectCollection.RemoveAt(e.Item.itemIndex)
   End If
End Sub


4.  If you have to dynamically work with hiding columns inside a table that are within a repeater, you can use the example below:

If MyCondition = True Then
   If Not rptMyObjectCollection.Items Is Nothing AndAlso rptMyObjectCollection.Items.Count > 0 Then
      For Each
i As RepeaterItem In rptMyObjectCollection.Items
         For Each ctrl As Control In i.FindControl("trMyRepeatersRow").Controls
            ctrl.FindControl("tdMyRepeatersColumn1").Visible = False
         Next
      Next
   End If
Else


5.  To do validation on some of the controls within a repeater, you can use the example below:

Dim InvalidValue As Boolean = False
For Each i As RepeaterItem In rptMyObjectCollection.Items
   For Each ctrl As Control In i.FindControl("trMyRepeaterRow").Controls
      Dim lbl As New Label
      Dim txt As New TextBox
      lbl = ctrl.FindControl("lblMainLabel")
      If lbl.Text.Trim = SomeStringValue.Trim Then
         txt = ctrl.FindControl("txtSomeTextControl")
         If Not IsNumeric(txt.Text.Trim) Then
            InvalidValue = True
         End If
      End If
   Next
Next

  

6.  Sometimes when working with a repeater, you will need to get the values individually instead of.  In that situation, you can use the following example: 

For Each MyOb As MyClass.Model.MyObject In thisMyObjectCollection
   For Each i As RepeaterItem In rptMyObjectCollection.Items
      For Each ctrl As Control In i.FindControl("trMyRepeaterRow").Controls
         Dim lbl As New Label
         Dim txt As New TextBox           
         Dim chk As New CheckBox
         lbl = ctrl.FindControl("lblMainLabel")
         If lbl.Text.Trim = SomeStringValue.Trim Then
            txt = ctrl.FindControl("txtSomeTextControl")
            MyOb.StringProperty = txt.Text
            chk = ctrl.FindControl("chkSomeCheckBox")
            MyOb.BitProperty = IIF(chk.checked, 1, 0)
         End If
      Next
   Next

Next

7.  Below are the CSS tags used:

.popupMenu
{
   position:absolute
;
  
visibility:hidden
;
  
background-color:black
;
  
opacity:.9
;
  
filter: alpha(opacity=90)
;
  
font-size:13px
;
  
margin-top:-14px
;
  
text-align:left
;
  
font-weight:bold
;
  
color:Silver
;
}

.popupMenu a
{
  
color:Silver
;
}

.popupHover
{
  background-color:Transparent
;
}