Prizes & Awards
My Profile
Active Members
TodayLast 7 Days
more...
|
Resources » Articles » ASP.NET/Web Applications »
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>
Happy Programming
|
Responses
|
No responses found. Be the first to respond and make money from revenue sharing program.
|
|