Saturday, November 12, 2011

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>