How to Fix Header and Column of a GridView?
How to fix header and column of the GridView?
This example shows to fix header and column of the gridview using css style sheet.
How To Fix Header and Column of GridView using CSS?
To fix the header and some column of the gridview follow the steps below. Just attach the code of css style and then set proper id to the Gridview and also to the column(if you want to fix column).Style Property
<style>
div#div-gridview {
width: 450px;
height: 300px;
overflow: auto;
font-family: verdana;
font-size:12px;
scrollbar-base-color:#ffeaff;
}
/* Locks the left column header */
th.locked {
font-weight: bold;
text-align: center;
background-color: #990000;
color: white;
border-right: 1px solid silver;
position:relative;
cursor: default;
/*for IE5+ only*/
left: expression(document.getElementById("div-datagrid").scrollLeft-2);
}
/*Locks the left column*/
td.locked{
text-align: left;
border-right: 1px solid silver;
background-color: #FFFFCC;
position:relative;
cursor: default;
/*For IE5+ only*/
left: expression(document.getElementById("div-datagrid").scrollLeft-2);
}
/* Locks table header */
th {
font-weight: bold;
text-align: center;
background-color: #990000;
color: white;
border-right: 1px solid silver;
position:relative;
cursor: default;
/*For IE5+ only*/
top: expression(document.getElementById("div-datagrid").scrollTop-2);
z-index: 10;
}
/* Keeps the header as the top most item. */
th.locked {z-index: 99;}
/* GridView Item Style*/
.GridRow {font-size: 11pt; color: black; font-family: Arial; background-color:#ffffff; height:30px;}
</style>
Then add one new div(HTML control) set the id as div-gridview and now time to add gridview to the aspx page. Also fix some width and height for div and gridview show that it will put a scrollbar.
Here is the code for the div and grid view.ASPX Page Code for Gridview and DIV
<div id="div-gridview" style="z-index: 101; left: 7px; width: 450px; position: absolute; top: 90px; height: 302px">
<asp:GridView ID="GridView1" runat="server" Height="310px" Style="z-index: 110; left: 0px;position: absolute; top: 0px" OnPageIndexChanging ="GridView1_PageIndexChanging" Width="450px" AutoGenerateColumns="False" AllowPaging="True" PageSize="50">
<Columns>
<asp:BoundField HeaderText="Column1" DataField="Col1" >
<ItemStyle CssClass ="locked" Width="200px" />
<HeaderStyle CssClass ="locked" Height="10px" />
</asp:BoundField>
<asp:BoundField HeaderText="Column2" DataField="col2" >
<ItemStyle Width="80px" />
<HeaderStyle Height="10px" />
</asp:BoundField>
<asp:TemplateField HeaderText="Column3">
<ItemTemplate>
<asp:TextBox ID="txtcol3" Width="50px" runat="server" Style="position: static" Text='<%# Eval("col3") %>'></asp:TextBox>
</ItemTemplate>
<ItemStyle Width="50px" />
<HeaderStyle Height="20px" />
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
In the above example i fix the header as well as first column.
Use this code and enjoy....
Thank You.
Reference: http://msahoo.wordpress.com/2010/02/18/how-to-fix-header-and-column-of-a-gridview/
Follow
Very helpful.
Thanks for sharing