Click here to Skip to main content
Licence 
First Posted 17 Oct 2006
Views 91,670
Bookmarked 45 times

Create a scrollable Gridview in asp.net 2.0

By | 17 Oct 2006 | Article
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

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

About the Author

Xianhui Meng

Web Developer

China China

Member



Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
You must Sign In to use this message board. (secure sign-in)
 
Search this forum  
 FAQ
    Noise  Layout  Per page   
  Refresh
QuestionCode not working in Firefox PinmemberSunnyonfire2:43 24 Nov '11  
Generalnot working for me.. Pinmembermayur_mungi2:44 3 Jan '10  
GeneralMy vote of 1 Pinmember_ShreekUMAr_0:47 18 Nov '09  
GeneralOnly works with One Grid per Page Pinmemberrpeters743:12 20 Mar '09  
GeneralRe: Only works with One Grid per Page [modified] Pinmemberrpeters744:31 20 Mar '09  
Generalexcellent... but has a bug when use Themes Pinmemberjose garcia11:00 4 Jan '08  
GeneralJust a note on cloning w/ controls. PinmemberXorcist6:57 29 Nov '07  
GeneralExcellent! Could have used this for some time now. Pinmemberlotsoffear5:12 21 Nov '07  
QuestionHow about overflow: scroll instead of overflow-y? Pinmembercheepau17:11 20 Sep '07  
QuestionHow about fixed column headers? Pinmemberjmsteward7:59 12 Sep '07  
AnswerRe: How about fixed column headers? PinmemberSonal_0519:31 24 Mar '08  
QuestionCool!... but what about styles? Pinmemberandrez1010:26 27 Aug '07  
QuestionIt WORKS! How about a fixed footer? PinmemberGMartinTX10:31 17 Apr '07  
AnswerRe: It WORKS! How about a fixed footer? PinmemberGMartinTX11:13 17 Apr '07  
GeneralDoesn't work on sorting PinmemberUmesh_Soni18:17 27 Dec '06  
GeneralRe: Doesn't work on sorting Pinmembertopdrog12:21 17 Jun '07  
QuestionDoesn't work in firefox :( PinmemberGökmen BULUT22:49 13 Nov '06  
AnswerRe: Doesn't work in firefox :( Pinmemberlotsoffear5:04 21 Nov '07  
Generalworks fine as soon as I put change in the correct place great job thanks Pinmemberlennys11:35 3 Nov '06  
Generaltried your suggestion still fails Pinmemberlennys10:43 3 Nov '06  
Generaldoesn't work for me Pinmemberkunalagrawal9:07 20 Oct '06  
AnswerRe: doesn't work for me PinmemberXianhui Meng16:45 20 Oct '06  
GeneralRe: doesn't work for me Pinmemberkunalagrawal7:30 23 Oct '06  
GeneralRe: doesn't work for me PinmemberSasha Shipka2:05 20 Nov '06  
GeneralRe: doesn't work for me Pinmemberjason2k15:33 28 Oct '06  

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

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

Permalink | Advertise | Privacy | Mobile
Web01 | 2.5.120517.1 | Last Updated 17 Oct 2006
Article Copyright 2006 by Xianhui Meng
Everything else Copyright © CodeProject, 1999-2012
Terms of Use
Layout: fixed | fluid