“Imagination is more important than knowledge. For while knowledge defines all we currently know and understand, imagination points to all we might yet discover and create.” - Albert Einstein

I have started a project in CodePlex called IdeaSparx.CoolControls. The objective of this project is to extend the already powerful ASP.NET family of web controls. I initially started extending GridView to CoolGridView. CoolGridView, in addition to what GridView control can already provide, delivers the following features.
  1. Fixed column header, footer and pager
  2. Scrollable content 
  3. User-resizeable column widths (new!)
  4. Maintains scroll position and column widths after a postback or callback (new!)

This release is tested in Internet Explorer 8.0.6001, Firefox 3.5.3 and Safari 4.0.2.
The features being developed in the pipeline are as follows.
  1. Hierarchical presentation of data
  2. Asynchronous streaming of data
  3. AJAX sorting and paging
  4. Enhanced data editing
If you think there are features that you need and are not in the list, just make your requests or comments.

Download the source code and demo project at IdeaSparks ASP.NET CoolControls

Labels: , , , , , , ,

 Subscribe to feed

67 Responses to “Extend ASP.NET GridView to Support Fixed Header, Fixed Footer and Scrollable Content”

  1. # Anonymous Stranger SEO

    nice control..
    this is exactly what i need.

    but, it is compatible for VS 2008??  

  2. # Blogger John Eric Sobrepena

    Hi Stranger SEO, it is fully compatible with VS 2008. In fact, the sample project was created from VS 2008 express.  

  3. # Anonymous Anonymous

    John, I gave your control a try as I was going to do exactly what you did. I like it but what I found is that it doesn't flow dynamically like the original gridview. It appears you are enforced to use fixed with columns. Is that correct?  

  4. # Blogger John Eric Sobrepena

    Hi Anonymous, Yes you are correct. Columns need to be specified with predetermined widths in pixels (px). Would you like to elaborate more on how you would like to use the control? Having the columns as percentage is still possible. I am interested to know your usage of this control so that I can assist you better.  

  5. # Anonymous Anonymous

    Hi Jon ,

    I used your control . It works great , but when I switch to compatibility view in IE8 , the scrolling functionally breaks . The scrollbars are no longer visible .  

  6. # Blogger John Eric Sobrepena

    Thank you for using CoolControls. I will look into this IE8 compatibility issue. In the meantime you can subscribe to my blog to get updates when the fix is out using the "Subscribe through email" box located on the right hand side.  

  7. # Anonymous Anonymous

    there is a possibility of having a Visual Studio 2005 / .NET 2.0 version?


  8. # Blogger John Eric Sobrepena

    Yes, this is possible. You can actually create a VS 2005 solution file and project files and add the .cs, .js and .aspx files manually.

    I will be include a VS 2005 project in the next release. You might want to subscribe to this blog to get updates of any release.  

  9. # Anonymous Anonymous

    I will try. many, many thanks.  

  10. # Anonymous dario

    I subscribed.

    ......it does not compile. Various issue compiling.

    When next version are planned?


  11. # Blogger John Eric Sobrepena

    Hi Dario,

    Release is planned for early next week. I will try to make it compatible for VS 2005 / .NET 2.0. You can also drop me an email if you need to.  

  12. # Anonymous Dario

    I'm leaving work for the week. I will wait for next release.
    Your help is very appreciate.  

  13. # Blogger John Eric Sobrepena

    Hi Dario,

    In the meantime, you can try this out:
    1) Create a C# Library project in VS 2005 and name it IdeaSparx.CoolControls.Web.
    2) Add the CoolGridView.cs and CoolGridView.js manually into the project.
    3) remove the line "using System.Linq;" in CoolGridView.cs.

    You should now be able to compile this as a .NET 2.0 assembly.

    As for the sample VS 2008 web application project, I will also be creating one for VS 2005 on next release. For now, you can create a VS 2005 web application project and reference the project you created from the steps above. You should be able to test CoolGridView control.  

  14. # Anonymous Dario

    Don't compile.

    Seems I don't have "Style" class, I dont have "var" command and different overload for RegisterClientScriptInclude.  

  15. # Blogger John Eric Sobrepena

    Hi Dario,

    As promised, I have included a Visual Studio 2005 solution and project file. I have also updated the code to be fully C# 2.0 compatible. You can download the latest release from here http://ideasparks.codeplex.com. Tell me if this works for you.  

  16. # Anonymous Dario

    So fast.... many many thanks. I will try shortly.  

  17. # Anonymous Kean

    It's great!!!!
    Thanks so much. But there is problem if we apply ResizeableTable.js to this control.

    I have grid with fixed header and I apply your resizeable script, but I cannot resize width of column correctly.
    Column can change size but header cannot change.

    Please update your control. Thanks so much

  18. # Anonymous Anonymous

    Great Control. Thnx for the new ideas and insight.  

  19. # Blogger John Eric Sobrepena

    @Kean, Thank you for using the control. The ResizeableTable.js only works for GridView control or an HTML table. Intergrating user-resizable column with CoolGridView is still in the works. It will be available in CoolControls' next release.  

  20. # Blogger Patrick

    Is there any way to add support for an Excel style column freeze? I would like to be able to lock the first 1 or 2 rows so they will not scroll horizontally but do scroll vertically. I can't find anything online that can currently do this reliably crossbrowser...  

  21. # Blogger John Eric Sobrepena

    Hi Patrick, CoolGridView does not support this Excel-like functionality as of the moment. I will keep that in mind and might include this in future releases.  

  22. # Blogger John Eric Sobrepena
  23. # Anonymous Stranger SEO

    can we just use the this javascript library (CoolGridView.js) for generate scrolling in our gridview.  

  24. # Blogger John Eric Sobrepena

    Hi StrangerSEO, if you mean scrolling with fixed header and / or footer, then the answer is "it is not easy". CoolGridView.js expects the GridView in a specific hierarchy of DOM elements (DIVs and TABLEs structure). Hence CoolGridView extends GridView to emit the proper HTML.

    Somehow you have to modify the .js file so that on the client-side you need to modify the structure of the DOM elements so that it matches the expected structure by the CoolGridView.js.  

  25. # Anonymous Anonymous

    How do you disable the resizable column widths in the latest release? Thanks.  

  26. # Anonymous Anonymous

    Just what i was looking for,
    is there a way to freeze columns also?

    Any suggestions?


  27. # Blogger John Eric Sobrepena

    Hi @Anonymouse, in the new build (Build 20100207) you can now enable of disable resizable column widths by setting the AllowResizeColumn property of CoolGridView.

    Regarding freezing columns, this is still in the works  

  28. # Anonymous Anonymous

    Default width of column is 100px. While I set width of grid is 100%. I want width of column is auto. I see width of header's column and body can't the same.
    (Sorry, I'm Vietnamese, very bad English)  

  29. # Anonymous Axel

    John Eric,

    I tesed your grid. Its fantastic. While put your in my solution I found two issues. As I use text-alin: center in a parent div, the header will be centred also. I fixed this by adding a text-alin attribute within the code. The other issue I did not solved so far: the header line do not scroll in IE8 (compatible mode) in my enviroment. It work in your example. It also work in my eviroment with Firefox. I did debug the javascript and found, that the scrollLeft property will be set with the scrollLeft property of the table, but still leave in '0'. Any idea ?  

  30. # Blogger John Eric Sobrepena

    Hi Axel, I tested in my machine Vista 32-bit IE8 (compatibility mode) and the header is scrolling properly. If you don't mind, could you provide me an example VS project that demonstrates this issue so I can help you better. Thanks.  

  31. # Anonymous Anonymous


    Love your grid. Very rich and cooool. Many thanks. Would like to know if possible how to transform a cell into a control (link, checkbox, dropdown, ...) For example, have three diff text column that I would like to make into a hyperlink each uniquely to another page in webland.

    Again, many thanks for a great control.  

  32. # Anonymous Anonymous


    Forgot to mention in anonymous posting 03/05 that I am populating the grid using the AutoGenerateColumns="True" because of flexible column order need (I want to allow user to pick from up to 15 columns in any order and send db results to datatable and will then determine from there what columns I am working with). Hope this helps.  

  33. # Anonymous Anonymous


    Continuing from 03/15 posting, I was able to successfully add hyperlinks in the columns under the DataRowBound event. I'm good to go.


  34. # Blogger John Eric Sobrepena

    Great to hear that Anonymous. I just checked your comments and glad to know you were able to work it out :-) cheers and you are welcome.  

  35. # Anonymous Souvik

    Hi John,

    Is it possible to set the width at run-time as I need them to be of different size.  

  36. # Anonymous TT

    hey john... nice control!

    but i'm having some issues using it =/
    i dont know if im doin something wrong, but when i run my project, i dont get to see the scroll bars... =/ i need to resize a column in order them to appear =S
    any idea?
    thx in advance!  

  37. # Blogger quick

    Thanks for a good post. Seo footer links are good upto some extent and it may harm you if 100links rule in not followed in the page.

    But according to Web 2.0 style footer is also a good way of optimizing the pages.


  38. # Blogger Ryan Andres

    John you rock!

    I've spend this whole week looking for a solution that'll lock headers AND pagers while still working with my complex gridview. This is THE solution :D  

  39. # Blogger John Eric Sobrepena

    Thank you for the compliment Ryan.  

  40. # Blogger Dagdason

    Hey John - Outstanding solution. I alreeady had a gridview component built and didn't want to have to re-enter everything all over again. So I added your component above mine, copied the name to my gridview component and save the project

    Rebuilt the project and it works just grand.

    The only difference is that in the designer it show an error rendering the control because its not tied to an instance.

    Doesn't matter, it still performs as promised.

    Excellent job dude


  41. # Anonymous Anonymous

    Good day.
    I have same problem, as TT: "but when i run my project, i dont get to see the scroll bars... =/ i need to resize a column in order them to appear"
    Please, help me. :-(  

  42. # Anonymous Anonymous

    This is great Grid.Is it possible to move the columns?i.e the user can rearrange the colums according to his comforts.  

  43. # Blogger Karthik

    Hi. I really like the control. i just have a small issue. After I host the application the scrolls disappear in firefox and chrome. Any Ideas ?  

  44. # Anonymous Mandeep

    HI John,

    Outstanding work. I was looking for this fixed headers features. I am already extending gridview to have sorting code at one place so I kept your code on top of mine and after some changes it works great.

    Only problem is it is taking default column size as 100px, why do we need to do that? The original gridview decides the column spacing based on the data for example if define the width as 100% or 700px then the gridview takes the entire space and divides it among columns as per data size, can't we retain that feature from original gridview? I will try to bring this in. Please let me know if you get it faster.
    Again you have really done a fantastic, fabulous, awesome, mind blowing, superb job. You have virtually rewritten the gridview :-)  

  45. # Anonymous mandeep

    Hi John,
    I got that fixed.

    Just changed
    d[0].style.width = (this.TableContainer.scrollWidth + 100) + 'px';
    d[0].style.width = (this.TableContainer.scrollWidth + 15) + 'px';
    in file coolgridview.js

    I also want to implement drag and drop in gridview. I will share code with you once I am done. If you ever logged into netflix.com ... you will know what i mean.


  46. # Anonymous Bruce

    John, I second all the various comments about this being a great grid. My problem? In Design View, I'm getting "There was an error rendering this control. Object reference not set to an instance of an object." Since I much prefer to visually build my grids, this issue makes that impossible. I was wondering if anybody else has seen this and/or if I'm doing something wrong and just need to change a setting or something like that. Again, thanks for the control, it's just what my users ordered!  

  47. # Anonymous Anonymous

    Hi John,
    Your control can fix column cell ?
    Thank you.  

  48. # Anonymous Anonymous


    I have tested your control but it doesn't work with masterPages. The error is :
    "the coolgridview must be in a tag form with runat=server"

    Have you a solution to fix this bug ?


  49. # Blogger Cornboy88

    love the control. Has anybody had any luck changing the grid to auto size the columns?  

  50. # Anonymous Anonymous

    I've been waiting to see a reply to Cornboy88's question.

    Anyone have a solution that will incorporate the auto-sizing columns.

    If that were possible this would be just about perfect.  

  51. # Anonymous Anonymous


  52. # Anonymous Anonymous

    U have provided.. the dll... but there is no article on how to use it to produce fixed headers in gridview.. please suggest.. thanks.  

  53. # Blogger Ali

    I am trying to apply custom paging using

    and I applied a css using
    but it not applied any suggestion please  

  54. # Anonymous Anonymous

    not working  

  55. # Anonymous Anonymous

    First of all, you did a great job.
    I have one problem:
    Is it possible to set the gridview width to 100%?
    If i do this it doesn't work correct

  56. # Anonymous Wooper

    Hi, how are you? i was looking for this for long time, the freezing header are awesome, but i have a problem, i have a tabcontainer and in there i have 4 tabpanels, for each one i have a gridview, so when the page runs the first time all the gridviews are visible, so when you click on the tabpanel u can see the gridview it has, but you cant use the scroll, only the first gridview can use it, but if you click on other tap and refresh the info for that gridview now that gridview has the scroll but the other ones dont, so what can i do there? thanks  

  57. # Anonymous Wooper

    I forgot to tell you that this only happens with chrome, firefox or safari, but works perfect in IE8


  58. # Anonymous Wooper

    Hi, Could you help me nake the collums of the gridview auto, it has one size and sometimes my gridviews lot of columns


  59. # Anonymous Anonymous

    I have a checkbox in ym gridview. On a click of a button, I loop through the rows of the gridview. I find the checkbox control. So far so good. However, the checkbox.Checked always returns false, not matter if the checkbox is checked. With the regular gridview control, the code works fine. But as soon as I use the Coolgridview control, the checkbox is not working correct. Any suggestions? Thanks  

  60. # Anonymous Anonymous

    Thanks a lot for this control... Looking for this for a very long time....

    Thnaks once again  

  61. # Blogger Ed

    Really excellent control, but I have some questions / requests:

    1. Is it possible to have column widths as percentages instead of pixels - if so, how?

    2. Is it possible for say when a column increases in width, the last column reduces in width by the same amount to keep a constant overall grid width - like Yahoo Mail? Sorry, its a bit difficult to explain.


  62. # Anonymous Anonymous

    thanks for this control looking forward to other features specially the Hierarchical presentation of data

    thanks again  

  63. # Anonymous Anonymous

    I was going crazy, I tried everything (css, jquery, new tables for header and footer), but all methods had formatting problems (between columns header width and rows columns width).
    I can not believe, it's fantastic! You're a great person, congratulations!  

  64. # Anonymous Anonymous

    Great control but it still display columns even though it was set to visible=false.  

  65. # Anonymous Anonymous

    Grt Wrk. i learnt some thing from these article. thanks again  

  66. # Anonymous Anonymous

    Hi John, This is a cool control. Thank you.

    But as mentioned in some of the comments - is it possible to set the columns widths in %?

    My requirement is - When i resize the browser - the grid should shrink based on the browser width & browser should not get horizontal scroll.
    Please suggest.

    - Kiran  

  67. # Blogger Unknown

    Hi John,

    Your control is 'excellent'. Its better than third-party controls, which can never match the performance of gridview due to being bloated. Your control is gridview, which makes it super-fast in performance as I have tested today.

    A feature that would enhance this greatly would be to allow filtering by columns using conditions like contains, greater than etc.

    Thanks once again for such brilliant work.

Post a Comment

Links to this post

Create a Link

John Eric Sobrepena

John Eric Sobrepena
Hi, I am an I.T. professional who loves technology. I am right now into Android development. I am also a subject matter expert on C#, ASP.NET, WPF and Silverlight. Photography is one of my many hobbies.
Bookmark and Share

Type your Email

Follow me on Twitter.

Flickr Photostream

 Subscribe to feed

Powered by Blogger

© 2006 IdeaSparx | Blogger Templates by GeckoandFly.
No part of the content or the blog may be reproduced without prior written permission.