Vertically Scrollable Repeater with fixed Headers
I had to find some work-a-round for a scrollable repeater. The way I want it to be is to have fix headers with able to vertically scrollable. I found lots of example dealing for this solution with CSS and JavaScript. Luckily, I found one which works in both IE and FF. I managed to make one example here:
Here is the Complete ASPX Code along with JavaScript which is suppose to be called on "onload" event. The Example is simply listing one DataTable with Name, MobileNo and Address columns.
The Idea is, Place the Repeater inside a DIV layer which is having OverFlow style set to Scroll.
Next, design a repeater with a table mark-up inside which is splitted over HeaderTemplate, ItemTemplate and FooterTemplate; as you know Repeater Control is the only Web control that allows you to split markup tags across the templates.
Next, write a JavaScript which create one object of THEAD, one Clone of the Table Node; the table which we created inside the Repeater; and append the THEAD object inside the newly created Clone Node.
Finally, append this Clone Node inside another DIV which is created above the Repeater. That will serve as Fix Headers. Thats it!
<%--This DOCTYPE declaration is Required; unless would not work in FF--%>
<!DOCTYPE HTML ePUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" language="javascript">
function fixHeader()
{
var t = document.getElementById("table");
var thead = t.getElementsByTagName("thead")[0];
var t1 = t.cloneNode(false);
t1.appendChild(thead);
tableHeader.appendChild(t1)
}
window.onload = fixHeader
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="tableHeader">
</div>
<div style="overflow: scroll; height: 100px; width: 500px">
<asp:Repeater ID="Reapeter1" runat="server">
<HeaderTemplate>
<table id="table" width="500" style="table-layout: fixed; border:solid 1px black">
<thead>
<tr id="thead" style="width: 500px; background-color:#BEBEBE">
<th>Name</th>
<th>Mobile No</th>
<th>Address</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<%#DataBinder.Eval(Container.DataItem, "Name")%>
</td>
<td>
<%#DataBinder.Eval(Container.DataItem,"MobileNo")%>
</td>
<td>
<%#DataBinder.Eval(Container.DataItem,"Address")%>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
</div>
</form>
</body>
</html>
On Code Behind side, I simply created one DataTable and assigned as DataSource to Repeater.
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.Add(new DataColumn("Name")); dt.Columns.Add(new DataColumn("MobileNo")); dt.Columns.Add(new DataColumn("Address"));
DataRow dr = dt.NewRow();
dr["Name"] = "Kaushal"; dr["MobileNo"] = "9876543210"; dr["Address"] = "Temp Address1"; dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Name"] = "Naresh"; dr["MobileNo"] = "9786543210"; dr["Address"] = "Temp Address2"; dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Name"] = "Pankaj"; dr["MobileNo"] = "9678541230"; dr["Address"] = "Temp Address3"; dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Name"] = "Ravi"; dr["MobileNo"] = "9854712547"; dr["Address"] = "Temp Address4"; dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Name"] = "Haresh"; dr["MobileNo"] = "9854712547"; dr["Address"] = "Temp Address5"; dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Name"] = "Nirav"; dr["MobileNo"] = "9874124758"; dr["Address"] = "Temp Address6"; dt.Rows.Add(dr);
Reapeter1.DataSource = dt;
Reapeter1.DataBind();
}
}