scrollable gridview in asp.net

image

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/

Advertisements

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