Here is the steps 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 postbackIf IsPostBack <>
TrueThen‘add attribute of style for GridView1GridView1.Attributes.Add("style",
"table-layout:fixed")‘create list for dataDim
objDataDs AsNew System.Collections.Generic.List(OfString)For index
AsInteger = 1
To 100objDataDs.Add(index.ToString())Next‘assign
list to the GridViewGridView1.DataSource = objDataDsGridView1.DataBind()EndIf
2.5 ) now on the designer for put the javascript tag and written below script.
<scriptlanguage="javascript"type="text/javascript">function ChangeTheHeaderStyle(){//get
the clientid of the GridView Where you want to fixed columnvar tbl = document.getElementById(‘<%=GridView1.ClientID%>’);//copy
all the row from gridview1var tblNoOfRow = tbl.cloneNode(true);//remove
all the row from tblNoOfRowfor(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 tblNoOfRowother.appendChild(tblNoOfRow);
}//call the functionwindow.onload = ChangeTheHeaderStyle</script>
SureshGuduru
Member
5 Points
27 Posts
Gridview Scrollbar with fixed Header
Feb 12, 2009 11:41 AM|LINK
Here is the steps 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 postbackIf IsPostBack <> True Then‘add attribute of style for GridView1GridView1.Attributes.Add("style", "table-layout:fixed")‘create list for dataDim objDataDs As New System.Collections.Generic.List(Of String)For index As Integer = 1 To 100objDataDs.Add(index.ToString())Next‘assign list to the GridViewGridView1.DataSource = objDataDsGridView1.DataBind()End If2.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 columnvar tbl = document.getElementById(‘<%=GridView1.ClientID%>’);//copy all the row from gridview1var tblNoOfRow = tbl.cloneNode(true);//remove all the row from tblNoOfRowfor(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 tblNoOfRowother.appendChild(tblNoOfRow); }//call the functionwindow.onload = ChangeTheHeaderStyle</script>now check the code and run.
Thanks,
PassHours
Contributor
4322 Points
736 Posts
Re: Gridview Scrollbar with fixed Header
Feb 12, 2009 12:03 PM|LINK
Hmmm...... interesting [:D]
But does this code browser independent because IE seems to support every scrap.
We make a living by what we get, but we make a life by what we give.
::: Winston Churchill :::
SureshGuduru
Member
5 Points
27 Posts
Re: Gridview Scrollbar with fixed Header
Feb 13, 2009 05:21 AM|LINK
sorry dude. i didnt test the code with other browsers.
Qin Dian Tan...
All-Star
113532 Points
12480 Posts
Microsoft
Re: Gridview Scrollbar with fixed Header
Feb 17, 2009 07:11 AM|LINK
Hi SureshGuduru,
Follow this article to fix header in GridView: http://www.codeguru.com/columns/vb/article.php/c11443__1/
Thanks,
If you have any feedback about my replies, please contactmsdnmg@microsoft.com.
Microsoft One Code Framework
p_maroun
Member
10 Points
5 Posts
Re: Gridview Scrollbar with fixed Header
Aug 26, 2009 05:50 PM|LINK
Hi SureshGuduru,
This solution provided in this article to fix header in GridView is not supported for Firefox!!