Share via

Freeze the columns in ASP.NEt Gridview

  • Article

In case of datagrids with high number of columns, the datagrids can be made scrollable by placing it with in a div tag.

However , when the scrolling is enabled, in most business scenarios, in any row, all the data in the other column refers to one or two main columns often the leftmost column.

In this case when we scroll to the rightmost end, we lose the context. It would be nice if we could have a feature like the ones that we have in Microsoft Exce, where we can freeze certain columns.

Here is a simple way to do that.

The idea is to have the left property of each of the cells in that column fixed.

STEP 1: Add the Following CSS class to the .aspx file

td.freezepane{
text-align: left;
border-width:0;
background-color:White;
position:relative;
cursor: default;
left:inherit;
}

 

STEP 2: Set the CSSClass property of the cells in the GridView RowDatabound event.

protected void gvData_RowDataBound(object sender, GridViewRowEventArgs e)
  {

          e.Row.Cells[1].CssClass = "locked";
  }

And Thats it...  the first column will remain freezed.