Freeze Columns in Gridview

[khushi2005]

Hi
In my Web form I want to Freeze say for eg 2 out 10 columns
So when I horizontally scroll those columns would not hide
Something like excel

How do I do it with Gridview
I am using 2.0 framework

Thanks

 

[MattP]

Code Project - Freeze Pane Data Grid

 

[khushi2005]

freeze Pane

Hi
I have implemented the code
Only problem is when you scroll the horizontal scroll bar the column headers do not move with it

Thanks

 

[MattP]

/* Locks table header */ - The author has kindy commented the css to allow for easy reading. Remove the position:relative and top: expression... lines from the css and you should be fine.

 

[khushi2005]

It worked partly

Thanks for the post

Now firstly when I run it It displays long list of rows with only fixed column
Then when you scroll it horizontally it scrolls the data but not the fixed headers along with it

As per your suggestion I commented position:relative in Locks Table Header
It works fine but it does not keep the header row fixed
Also when I scroll vertically it does not move the frozen column data

Thanks for your help



here is the GridStyle.css

/* Div container to wrap the datagrid */
div#div-datagrid {
width: 420px;
height: 200px;
overflow: auto;
scrollbar-base-color:#ffeaff;
}

/* Locks the left column */
td.locked, th.locked {
font-size: 14px;
font-weight: bold;
text-align: center;
background-color: navy;
color: white;
border-right: 1px solid silver;
position:relative;
cursor: default; 
left: expression(document.getElementById("div-datagrid").scrollLeft-2); /*IE5+ only*/
/*left:expression(this.parentNode.parentNode.parentNode.scrollLeft)*/

}	

/* Locks table header */
th {
font-size: 14px;
font-weight: bold;
text-align: center;
background-color: navy;
color: white;
border-right: 1px solid silver;
[COLOR="Red"]/*position:relative;*/[/COLOR]cursor: default; 
/*top: expression(document.getElementById("div-datagrid").scrollTop-2);*/ /*IE5+ only*/
/*top:expression(this.parentNode.parentNode.parentNode.scrollTop)*/
z-index: 10;
}

/* Keeps the header as the top most item. Important for top left item*/
th.locked {z-index: 99;text-align:center}

/* DataGrid Item and AlternatingItem Style*/
.GridRow {font-size: 10pt; color: black; font-family: Arial; background-color:teal; height:15px;}
.GridAltRow {font-size: 10pt; color: black; font-family: Arial; background-color:#eeeeee; height:15px;}

Web Page

<div id="div-datagrid">
       <asp:GridView ID="GridView1" runat="server" UseAccessibleHeader="True"  
CssClass="GridRow" OnRowDataBound="GridView1_RowDataBound" AutoGenerateColumns="False" 
   DataSourceID="SqlDataSource1">
          <AlternatingRowStyle CssClass="GridAltRow" ></AlternatingRowStyle >
           <Columns>
            <asp:BoundField DataField="flds1" HeaderText="fld1"  />
            <asp:BoundField DataField="Year" HeaderText="Year" />
            <asp:BoundField DataField="fld2" HeaderText="fld2"  />
               <asp:BoundField DataField="fld3" HeaderText="fld3"  />
               <asp:BoundField DataField="fld4" HeaderText="fld4"  />
               
 </Columns>
       </asp:GridView></div>

Webapge.aspx.cs Code

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        
       e.Row.Cells[0].CssClass = "locked";

    }

 

[JohnH]

khushi2005, kindly respect that this is a VB.NET forum! Also learn to format your post for various elements like code etc for readability.

 

[khushi2005]

I am extremely sorry for posting C# code

I think it is only last line that is code in aspx.cs file that will change but anyway I will go and change the code

Thanks

 

[khushi2005]

I tried using the code and the tips but it seems something is missing with the gridview

with the code in the site I get columns headers more than widht of the div
and the frozen columns are more than height of div tag

It seems that z-index property and/or position properties are not working to the effect