Restricting ScrollBar for Specified columns

Posted by Chvrsri under JavaScript on 11/4/2010 | Points: 10 | Views : 1651 | Status : [Member] [Moderator] [MVP] | Replies : 0
Hi all,

I have 5 columns in which i need to have scrollbar option for only 4 columns. The first column shouldnt be included. how could this be possible ..All this operations are done inside a Repeater control . i tried the following code


<div>
<div id="tableHeader"></div>
<div style="WIDTH: 500px; HEIGHT: 100px; OVERFLOW: scroll">
<asp:repeater id="rptrDummy" Runat="server">
<HeaderTemplate>
<table id="table" width="500" border="2" style="table-layout: fixed; border:solid 1px black">
<thead>
<tr id="thead" style="width: 500px; background-color:#BEBEBE">
<th colspan="3">
Bonus
</th>
<th colspan="2">
Merit
</th>
<tr id="thead" style="width: 500px; background-color:#BEBEBE">
<th>
</th>
<th>
Name</th>
<th>
Prefered Score</th>
<th>
Base Salary</th>
<th>
Eligibility</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<div id="tableBody"></div>
<tr>
<td id="disableTD">
<a href="WebForm1.aspx">Comments</a>
</td>
<td align="center">
<asp:Label ID="name" Runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Name")%>'>
</asp:Label>
</td>
<td align="center">
<asp:Label ID="PrefScore" Runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Pref_Score")%>'>
</asp:Label>
</td>
<td align="center">
<asp:Label ID="BaseSalary" Runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Base_Salary")%>'>
</asp:Label>
</td>
<td align="center">
<asp:Label ID="Eligible" Runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Eligibility")%>'>
</asp:Label>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:repeater></div>
</div>



and in the Script i wrote this function to disable Header Format

<script language="javascript" 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>



Help appreciated Thanks in advance

Thanks,
Radha Srikanth



Responses

(No response found.)

Login to post response