Fixed Header in GridView in Asp.net 2.0

here is the step for creating the fixed header in gridview.Steps :

1) create the web application.

2) put the control on the form are below :

2.1) GridView (GridView1)

2.2) Panel (id=other)

2.3) Panel (id=pnlGrid)

2.3.1) in this panel we put the GridView.

2.3.2) now set the style attribute for pnlGrid

Style=”overflow: auto;”

2.4) on the server site code (means on code behind whatever you prefer -.vb or .cs)

‘check the postback

If IsPostBack <> True Then

‘add attribute of style for GridView1

GridView1.Attributes.Add(“style”, “table-layout:fixed”)

‘create list for data

Dim objDataDs As New System.Collections.Generic.List(Of String)

For index As Integer = 1 To 100

objDataDs.Add(index.ToString())

Next

‘assign list to the GridView

GridView1.DataSource = objDataDs

GridView1.DataBind()

End If

2.5 ) now on the designer for put the javascript tag and written below script.

<script language=”javascript” type=”text/javascript”>

function ChangeTheHeaderStyle()

{

//get the clientid of the GridView Where you want to fixed column

var tbl = document.getElementById(‘<%=GridView1.ClientID%>’);

//copy all the row from gridview1

var tblNoOfRow = tbl.cloneNode(true);

//remove all the row from tblNoOfRow

for(var i = tblNoOfRow.rows.length -1;i > 0;i–)

{

tblNoOfRow.deleteRow(i);

}

//delete row 0 (means header from the original)

tbl.deleteRow(0);

//append the remaining row from the tblNoOfRow

other.appendChild(tblNoOfRow);

}

//call the function

window.onload = ChangeTheHeaderStyle

</script>

now check the code and run.

Thanks.

---

Possibly related posts: (automatically generated)

• How to Add a Locked Header Row to an ASP.NET GridView Control