ASP.Net

How to Fix Header and Column of a GridView?

5
(1)

Sometimes My client said to fix the header of the gridview and fix some column of the gridview, Then i study more and more, lastly i found one best solution for this. 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.

Code :

<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.

How useful was this post?

Click on a star to rate it!

Leave a Reply

Your email address will not be published. Required fields are marked *