scrollable gridview in asp.net

Steps:

1) Create Simple Web Application Using Asp.net (with C#).

2) put the below control on the form. or copy the below code and paste in to application.

Control	Id	Set Style Of Control
GridView	GridView1
Panel	other	style="width:100px;"
Panel	pnlGrid	style="overflow:auto;height:200px;width:100px;"

<asp:Panel ID="other" runat="server" style="width:100px;" >
</asp:Panel>
<asp:Panel ID="pnlGrid" runat="server" style="overflow:auto;height:200px;width:100px;" >
  <asp:GridView ID="GridView1" runat="server" >
  </asp:GridView>
</asp:Panel>

3) on the cs file Put the below code.

protected void Page_Load(object sender, EventArgs e)
    {
      //check the page postback
      if (!IsPostBack)
      {
        GridView1.Attributes.Add("style", "table-layout:fixed");
        //here i am use list instead of database
        System.Collections.Generic.List<string> objDataDs = new System.Collections.Generic.List<string>();

        for (int i = 0; i < 100; i++)
        {
          objDataDs.Add(i.ToString());
        }

        GridView1.DataSource = objDataDs;
        GridView1.DataBind();
      }
    }

4) now in the javascript put below code.

 <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>

Check The Application.

Thanks 

http://amitpatriwala.blogspot.com/

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/