65.9K
CodeProject is changing. Read more.
Home

Create a scrollable Gridview in asp.net 2.0

starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.14/5 (13 votes)

Oct 17, 2006

viewsIcon

133584

downloadIcon

1231

Using Javascript's cloneNode to create scrollable Gridview in asp.net 2.0

Sample Image - ScrollingGridView.gif

Introduction

  Using Javascript's cloneNode ,we can clone a table's header,so we can make a gridview to be scrollable.This method isn't set some long css.

  In asp.net 2.0's Page_Load event,we must add style for GridView, and this MUST for IE and Firefox can work!

  protected void Page_Load( object sender, EventArgs e )
  {
    if (!IsPostBack)
    {
      GridView1.Attributes.Add("style", "table-layout:fixed");
      GridView1.DataSource = CreateDataSource();
      GridView1.DataBind();
    }
  }

 Next,we must add some javascript for it:

function start()
{
 var t = document.getElementById("<%=GridView1.ClientID%>");
 var t2 = t.cloneNode(true)
 for(i = t2.rows.length -1;i > 0;i--)
 t2.deleteRow(i)  
 t.deleteRow(0)  
 a.appendChild(t2) 
}
window.onload = start