I had to do a scrollable repeater for work these days and it took me quite some time until I realised what to do in order for the reapeter to be the way I want it.
I found many examples, some of them worked in IE, others in FF.
This example I managed to make, works only for IE if you forget to replace what you already have in your page with this:
<!DOCTYPE HTML ePUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
So, you put in th page an empty div and under it you draw the repeater inside a div tag that has overflow :
<div id="tableHeader"></div>
<div style="overflow: scroll; height:500px; width:500px">
<div>
<asp:Repeater ID="myReapeter" runat="server">
<HeaderTemplate>
<table id="table" width="500" style="table-layout:fixed;">
<thead>
<tr id="thead" style=" width: 500px; top: 12px;table-layout:fixed;">
<th class="txt" style="padding-left: 10px;background-color: #dedede;">
Name</th>
<th class="txt" style="padding-left: 10px;background-color: #dedede;">
Group</th>
<th class="txt" style="padding-left: 10px;background-color: #dedede;">
Description</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
...
</div>
Don' forget to add style to the table, particullary table-layout:fixed;
You must have these tags also because we are going to use them :<thead></thead>
Inside the <ItemTemplate> Tags you draw the content you get from the database.
The Table Header will stay outside the div with overflow:scroll if you use this little javascript code:
<script type="text/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>
Tuesday, May 13, 2008
Subscribe to:
Posts (Atom)