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/