Create a scrollable Gridview in asp.net 2.0

Xianhui Meng

Rate me:

3.14/5 (13 votes)

17 Oct 2006

133.5K

1.2K

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

Download source files - 1.25 Kb

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:

JavaScript

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

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Written By

Xianhui Meng

Web Developer

China

This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Create a scrollable Gridview in asp.net 2.0

Introduction

License

Comments and Discussions