Extend ASP.NET GridView to Support Fixed Header, Fixed Footer and Scrollable Content
68 Comments Published by John Eric Sobrepena on Sep 27, 2009
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.
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.
Download the source code and demo project at IdeaSparks ASP.NET CoolControls
- Fixed column header, footer and pager
- Scrollable content
- User-resizeable column widths (new!)
- Maintains scroll position and column widths after a postback or callback (new!)
The features being developed in the pipeline are as follows.
- Hierarchical presentation of data
- Asynchronous streaming of data
- AJAX sorting and paging
- Enhanced data editing
Download the source code and demo project at IdeaSparks ASP.NET CoolControls
Labels: ASP.NET, CoolControls, CoolGridView, fixed column header, Footer, GridView, IdeaSparks, scrollable content
Follow me on Twitter.
nice control..
this is exactly what i need.
but, it is compatible for VS 2008??
Hi Stranger SEO, it is fully compatible with VS 2008. In fact, the sample project was created from VS 2008 express.
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?
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.
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 .
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.
there is a possibility of having a Visual Studio 2005 / .NET 2.0 version?
Thanks
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.
I will try. many, many thanks.
I subscribed.
......it does not compile. Various issue compiling.
When next version are planned?
Thanks
Dario
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.
I'm leaving work for the week. I will wait for next release.
Your help is very appreciate.
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.
Don't compile.
Seems I don't have "Style" class, I dont have "var" command and different overload for RegisterClientScriptInclude.
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.
So fast.... many many thanks. I will try shortly.
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
Kean
Great Control. Thnx for the new ideas and insight.
@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.
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...
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.
You might want to check out the latest release CoolGridView New Release : Resizable Column Widths and Keeping Scroll Position
can we just use the this javascript library (CoolGridView.js) for generate scrolling in our gridview.
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.
How do you disable the resizable column widths in the latest release? Thanks.
Just what i was looking for,
is there a way to freeze columns also?
Any suggestions?
Thanks!
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
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)
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 ?
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.
John,
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.
John,
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.
John,
Continuing from 03/15 posting, I was able to successfully add hyperlinks in the columns under the DataRowBound event. I'm good to go.
Thanks.
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.
Hi John,
Is it possible to set the width at run-time as I need them to be of different size.
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!
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.
http://www.quickheed.com/seo/seo-footer-optimization.html
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
Thank you for the compliment Ryan.
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
Doc
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. :-(
This is great Grid.Is it possible to move the columns?i.e the user can rearrange the colums according to his comforts.
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 ?
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 :-)
Hi John,
I got that fixed.
Just changed
d[0].style.width = (this.TableContainer.scrollWidth + 100) + 'px';
to
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.
Thanks,
Mandeep
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!
Hi John,
Your control can fix column cell ?
Thank you.
Hi,
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 ?
Thanks,
love the control. Has anybody had any luck changing the grid to auto size the columns?
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.
vb?
U have provided.. the dll... but there is no article on how to use it to produce fixed headers in gridview.. please suggest.. thanks.
I am trying to apply custom paging using
and I applied a css using
PagerSettings-PagerStyle-CssClass="pgr"
but it not applied any suggestion please
not working
Hi,
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
Greatings
Jürgen
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
I forgot to tell you that this only happens with chrome, firefox or safari, but works perfect in IE8
thanks
Hi, Could you help me nake the collums of the gridview auto, it has one size and sometimes my gridviews lot of columns
thanks
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
Thanks a lot for this control... Looking for this for a very long time....
Thnaks once again
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.
Cheers..Ed
thanks for this control looking forward to other features specially the Hierarchical presentation of data
thanks again
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!
Great control but it still display columns even though it was set to visible=false.
Grt Wrk. i learnt some thing from these article. thanks again
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
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.
Sunil
Hello, you article is great.. it really worked for me.. just one question, all the columns has same width it how to disable that featur.. i want my own column width based on my data.
thank you in advacne