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.

http://www.ibusiness-management.com/

Advertisements

3 comments

  1. hi
    where will call ChangeTheHeaderStyle() javascript function.

  2. hello,

    we change the HeaderStyle at the window.onload event.please check in the Javascript i written the line window.onload = ChangeTheHeaderStyle();

  3. Rajiv Kumar · · Reply

    Thanks for this post on fixed header to display the datas from a table.
    I have lot of rows and lot of columns so i need scrollbars in horzontal and vertical directions so that i can see the whole datas. I am new in asp.net application. I am doing the following:
    1) using a dropdownlist( to select customer ids present in the table) as a filter to display the datas in a table.
    the datas from the table is being displayed on a grid view. I am using a panel to put the 2)grid view in it so that the all data from the table is confined to the panel only.
    i want the header for the different columns to be fixed for the vertical direction but move horizontally.

    Please help me.
    Eagerly waiting for your reply.

    Regards
    Rajiv Kumar
    Management Trainee
    ITS
    Tata Steel Ltd.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s