Hide and show Data using Repeater control

This example illustrates as how to hide and make data visible using repeater control. This is done in this example by using DIV tag and simple JavaScript routine.

  <script language="JavaScript">
  //Author: Ammar Ahmed Siddiqui
  //Dated: Nov 2004 
  function populate(id, flag)
  { 
   var element = document.getElementById(id);
   if (element) 
   {
    if (flag) 
    {
     element.style.display = 'block';
     element.style.visibility = 'visible';
    } 
    else
    {
     element.style.display = 'none';
     element.style.visibility = 'hidden';
    }
   }
  }        
  </script>

In java script part we simply get the element collection from the document object and manipulate it to hide and show the content in the div layer.

<form runat=server>

   <table border=0 >
    <tr>
     <td align=center >
      <h1><br>Hide and Show Data in a Repeater Control<br><br></h1>
     </td>
     <td align=left>
      
     </td>     
    </tr>
    
   </table>

   <asp:repeater id="rep" runat="server">
    <itemtemplate>
     <table border="0" width=380 >
      <tr >
       <td colspan=5> 
       
         <img src="images/min.jpg" alt="Minimize" border=0 onclick="populate('<%# DataBinder.Eval(Container.DataItem, "IntegerValue") %>', false);">
         <img src="images/max.jpg" alt="Maximize" border=0 onclick="populate('<%# DataBinder.Eval(Container.DataItem, "IntegerValue") %>', true);">

         
         <b><%# DataBinder.Eval(Container.DataItem, "IntegerValue") %></b>
       </td>        
      </tr>
     </table>  
     
     <div id='<%# DataBinder.Eval(Container.DataItem, "IntegerValue") %>' >                 
      <table border="0" width=380>
       <tr bgcolor="ivory">
        <td>     </td>
        <td>  
          <b><%# DataBinder.Eval(Container.DataItem, "StringValue") %></b>
        </td>
        <td>
          <b><%# DataBinder.Eval(Container.DataItem, "DateTimeValue") %></b>
        </td>
        <td>  
          <b><%# DataBinder.Eval(Container.DataItem, "BoolValue") %></b>
        </td>
        <td>  
          <b><%# DataBinder.Eval(Container.DataItem, "CurrencyValue") %></b>
        </td>
       </tr>
     </table>  
    </div>         
    </itemtemplate>
   </asp:repeater>

  </form>

The Div tad must have a unique id to work. In this case we are setting its id using a data source field value. It could be static if needed.<br><br>
The VB code to populate the repeater is as follows

Protected WithEvents rep As Repeater
    Protected WithEvents lblCurrentPage As Label




 Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

        If Not Page.IsPostBack Then

            rep.DataSource = CreateDataSource()
            rep.DataBind()
        End If

    End Sub
    Function CreateDataSource() As DataTable
        'This function creates a data source. You can use a database or any
        'kind of collection for databinding.

        Dim dt As DataTable
        Dim dr As DataRow
        Dim i As Integer

        'create a DataTable
        dt = New DataTable
        dt.Columns.Add(New DataColumn("IntegerValue", GetType(Integer)))
        dt.Columns.Add(New DataColumn("StringValue", GetType(String)))
        dt.Columns.Add(New DataColumn("DateTimeValue", GetType(DateTime)))
        dt.Columns.Add(New DataColumn("BoolValue", GetType(Boolean)))
        dt.Columns.Add(New DataColumn("CurrencyValue", GetType(Double)))

        'Make some rows and put some sample data in
        For i = 1 To 6
            dr = dt.NewRow()
            dr(0) = i
            dr(1) = "Item " + i.ToString()
            dr(2) = DateTime.Now.ToShortTimeString
            If (i Mod 2 <> 0) Then
                dr(3) = True
            Else
                dr(3) = False
            End If
            dr(4) = 1.23 * (i + 1)
            'add the row to the datatable
            dt.Rows.Add(dr)
        Next

        'return  the DataTable
        CreateDataSource = dt

    End Function

In order to populate the repeater CreateDataSource() function is used. This is pretty standard function that creates a DataTable. A function could be used to get values from the database and then show and hide data. The basic logic will remain the same.

<br><br>

Hope this code will help some one some day.<br>