How to make the Header static in Gridview scroll? - asp.net

Question

here I'm trying to make a scroll-able Grid View, which I did using the overflow, but the problem is, I want to make the Header section static, allowing only the content to be scrolled, here's my code:
<div class="BodyDiv" style="overflow: auto; height: 200px">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<table width="1024px">
<tr>
<td align="center">
<table width="980px">
<tr>
<td>
<asp:Panel ID="PanelDGV" runat="server" Height="250" ScrollBars="None" Width="515">
<asp:GridView ID="DGV" runat="server" AutoGenerateColumns="False" GridLines="None" AllowPaging="true" PageSize="50" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt">
<Columns>
<asp:BoundField DataField="ProjectCode" HeaderText="Project Code" />
<asp:BoundField DataField="ProjectName" HeaderText="Project Name" />
<asp:ButtonField ButtonType="Image" ImageUrl="../Support/Image/Edit.png" ItemStyle-HorizontalAlign="Center"
CommandName="CmdSearch" HeaderText="Edit">
<ItemStyle HorizontalAlign="Center"></ItemStyle>
</asp:ButtonField>
</Columns>
<PagerStyle CssClass="pgr"></PagerStyle>
<AlternatingRowStyle CssClass="alt"></AlternatingRowStyle>
</asp:GridView>
</asp:Panel>
</td>
</tr>
</table>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
is there anyway to do it? thank you.

Answer 1

<script src="../Scripts/ScrollableGridPlugin.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#<%=Grd.ClientID %>').Scrollable();
}
)
You can download this js file from below url
http://code.google.com/p/dev-acuaman/source/browse/trunk/PyproduceEstad%C3%ACstica/EstadisticaProduce/Scripts/ScrollableGridPlugin.js?r=79
<asp:GridView ID="Grd" runat="server" Width="100%" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="Country">
<ItemTemplate>
<asp:Label ID="lbl" runat="server" Text='<%# Eval("CountryName") %>'></asp:Label>
</ItemTemplate>
<ItemStyle HorizontalAlign="Left" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Enter Shipping Charge">
<ItemTemplate>
<asp:TextBox ID="txt" runat="server" Text='<%# Eval("charge") %>'></asp:TextBox>
<asp:CompareValidator ID="CompareValidator2" runat="server" ControlToValidate="txt"
ValidationGroup="txt" SetFocusOnError="true" Operator="DataTypeCheck" Type="Double"
ErrorMessage="Country Wise Shipping Charge must be number!">*</asp:CompareValidator>
</ItemTemplate>
<ItemStyle HorizontalAlign="Left" Width="160px" VerticalAlign="Middle" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Enter No Of Days">
<ItemTemplate>
<asp:TextBox ID="txt1" runat="server" Text='<%# Eval("days") %>'></asp:TextBox>
<asp:CompareValidator ID="CompareValidator1" runat="server" ControlToValidate="txt"
ValidationGroup="txt1" SetFocusOnError="true" Operator="DataTypeCheck" Type="Integer"
ErrorMessage="No Of Days must be number!">*</asp:CompareValidator>
</ItemTemplate>
<ItemStyle HorizontalAlign="Left" Width="160px" VerticalAlign="Middle" />
</asp:TemplateField>
</Columns>
</asp:GridView>