A new build release (Build 20100207) of CoolControls is now available at codeplex. Build 20100207 contains the following changes:

• COLGROUP and COL is back! These are generated for the header, table content and footer. This feature can align the header and table cell's width of CoolGridView.
• AllowResizeColumn property is added to CoolGridView. Set this property to true to enable user to resize  the columnns manually, set it to false to disable. The default value of this property if true.

Labels: ASP.NET 2.0, CoolControls, CoolGridView, GridView

The newest release of CoolGridView is available for download. There are a handful enhancements, optimizations and bug fixes in this release. Here are the ones worth mentioning.

DefaultColumnWidth Property

You can now define the default column width of CoolGridView columns through the DefaultColumnWidth property. The value for this property can not be of type UnitType.Percentage. On older releases of CoolControls, if a HeaderStyle-Width is not defined for a data column, it defaults to 100px. This value is hard coded inside the control. Now you can specify your own default column width. I got a lot of requests to allow column and table widths to be specified in percentage. Allowing column or table widths to be in percentage and at the same time making sure that the column widths can still be resized by the properly is a great challenge. However, rest assured that I am not dropping this request and that the development of this functionality is still being considered.

SPAN inside Table Cell

There was a bug in CoolGridView when displayed in IE 6 and 7. It was reported by developers that it seems that the style "white-space:nowrap" does not behave properly when applied to TD and TH element when the "width" is also defined in the style. Consider the following code:

<table style="table-layout:fixed;width:90px" border="1">
 <tr>
  <td style="white-space:nowrap; width:30px; overflow:hidden;">Test inside the cell.</td>
  <td style="white-space:nowrap; width:30px; overflow:hidden;">Test inside the cell.</td>
  <td style="white-space:nowrap; width:30px; overflow:hidden;">Test inside the cell.</td>
 </tr>
</table>

If you view the code above in IE 6 or 7, you will see that the text inside the cell wraps and breaks on white spaces even though the style was set not to wrap on white spaces. The fix for this is to put a SPAN that encloses the text inside the cell and put the style "white-space:nowrap" on the SPAN instead of the TD. The code below now works properly in IE 6 or 7. CoolGridView uses something similar to this but uses CSS instead.

<table style="table-layout:fixed;width:90px" border="1">
 <tr>
  <td style="width:30px; overflow:hidden;"><span style="white-space:nowrap;">Test inside the cell.</span></td>
  <td style="width:30px; overflow:hidden;"><span style="white-space:nowrap;">Test inside the cell.</span></td>
  <td style="width:30px; overflow:hidden;"><span style="white-space:nowrap;">Test inside the cell.</span></td>
 </tr>
</table>

"Gradient" Theme

There is a theme included in the sample project in this release that gives a 3D look on the table headers. In this theme, the white spaces inside the cell is not set to wrapped. When user resizes the column width and if text does not fit inside the cell, ellipsis will appear at the end of the text to indicate that there are portion of the text that is hidden.


To use this theme, you have to copy the "Gradient" folder into your "App_Themes" directory and copy the headerbg.gif file into your website in the location "\images\". Set EnableTheming to "True" for your ASPX page and set the Theme property to "Gradient".



COLGROUP and COL Elements Removed

Older releases of CoolGridView generates COLGROUP and COL html tags to control the column widths. However, the control does not render properly in the browser if the entire cells for a column is hidden using the style "display: none". Therefore, COLGROUP and COL were removed.

For more information of what are the other changes, you can read the release notes included in the latest build.

Have a great week everyone!

Labels: ASP.NET, COL, COLGROUP, CoolControls, CoolGridView, DefaultColumnWidth, GridView, IdeaSparks, IdeaSparx, Theme

I am pleased to announce that CoolGridView control for ASP.NET 2.0 now allows user-resizable columns and it remembers the current scroll position and column widths after a postback or callback.
You can download the latest release at Codeplex.com. Here are the following changes in this release (Build 20100124). Please take note that item #1 and #2 and breaking changes. If you are going to replace your CoolGridView from old releases with this new one, please modify your code according to the instructions provided.

1. CoolCore.js and CoolCore.cs were added to IdeaSparx.CoolControls.Web project.
2. If you are using CoolGridView inside an UpdatePanel, the add-on script is not needed anymore. You should remove the JavaScript code (as shown here) from your ASPX page. This functionality is now fully integrated in the CoolGridView control.
   

   //Remove this JavaScript from your ASPX
   function AjaxEndRequestHandler(sender, args) {
       var p = sender._updatePanelClientIDs;
       if (p != null)
       for (var j = 0; j < p.length; j++) {
           var scripts = $get(p[j]).getElementsByTagName("script");
           // .text is necessary for IE.
           for (var i = 0; i < scripts.length; i++) {
               try {
                   eval(scripts[i].innerHTML || scripts[i].text);
               } catch (e2) { }
           }
       }
   }
   
   try {Sys.WebForms.PageRequestManager.getInstance() .add_endRequest(AjaxEndRequestHandler);
   }catch (e) { }
   

3. User can resize column headers' width.
4. Column header and scroll position are preserved after a postback or callback.

What a great way to start the week!

Have a great Monday everyone.

Labels: AJAX Control, AjaxControlToolkit, ASP.NET 2.0, CodePlex, CoolGridView, Fix Headers, Footer, GridView, IdeaSparks, Pager, Resizable columns, Resize column, Scroll Position, UpdatePanel

I recently received a question about how to data bind CoolGridView to an object of type IQueryable<> with automatic sorting and paging. CoolGridView extends ASP.NET GridView control. GridView does not directly support DataSource of type IQueryable<>, and the same is true for CoolGridView. We can use LinqDataSource control to bridge the gap. Quickly bind CoolGridView control to IQueryable<> with automatic sorting and paging capability by following these easy steps.

1. Drop a CoolGridView and a LinqDataSource control into your ASPX page.
2. In the "Properties" toolbox, set the DataSourceID of CoolGridView to point to your LinqDataSource control. Set the properties of CoolGridView control to the following:
   
   • AllowPaging : True
   • AllowSorting : True
3. Handle the "Selecting" event of LinqDataSource
4. In the "Selecting" event handler, call your method that returns an IQueryable<> object and assign it to the event argument's property "e.Result".

There you have it!

Have a great weekend everyone.

Labels: ASP.NET, CoolGridView, Data Binding, GridView, IQueryable, LinqDataSource

Four months back I started this blog and my open-source project - IdeaSparx CoolControls. I am a fan of ASP.NET 2.0 GridView. In my opinion it is simple yet flexible, plain yet lightweight, unsophisticated yet powerful. GridView control is well designed that it is easy to customize and extend. Not only that, it is also possible to extend GridView so that it can nearly match any popular and commercially available third-party controls out there. The only thing, of course, is that it requires a lot of work. But the huge amount of "sweat" i put into this is all worth it. I have this monumental dream which I planned out in my head that someday, somewhere, somehow (haha, now i am being a bit melodramatic..)  the ASP.NET community will have an open-source alternative over the commercially available grid controls. Therefore, I named this dream project - IdeaSparx CoolControls.

All About IdeaSparx CoolControls

One of its controls is CoolGridView which extends ASP.NET 2.0 GridView. At the end of 2009, CoolGridView was able to render GridView with fixed header, footer or pager and scrollable content. Now think about these features - resizable columns, rearrange columns, present hierarchical data, selective area reloading through AJAX, feature-rich Visual Studio designer support, sorting using multiple columns, data grouping, data binding tools for complex data structures, enhanced data editing and delivery of data-pages through streaming. I think these features are very much possible! Don't you think its cool? (hence, the name CoolGridView, by the way :)  my next installment - having a CoolGridView with resizable columns is already on the way.

Thinking Ahead : To Infinity and beyond..

This year I have decided to jump a little higher and put a little more "sweat" into the project. And surely I will be blogging more about it. But I cannot run the next mile alone.. I need your help. Your inputs are very valuable (not to mention, it boosts my confidence from zero to maybe, 10). Whenever I log on and see a few comments which meant somebody out there finds this dream of mine workable, doable.. possible, I literally dash to my work desk and start pounding on my keyboard and try to do my best to keep you all in the loop of things.

I am glad to tell everyone that because of the recent string of feedback I received in the past couple of months, we were able to make CoolGridView more stable . We were able to make sure that the features worked perfectly on different browsers - Internet Explorer 8/7/6, Firefox 3.5/3.0, Safari and Chrome. This was made possible because you have all used the control and provided feedback. It's Teamwork, i guess so I thank you. I am indeed very grateful.

I hope that you would all stand by me in making this distant dream of mine a reality. This year let's create a CoolGridView control that is easy to use and packed with lots of useful features.

"To infinity and beyond..."

Labels: AJAX Control Toolkit, ASP.NET, CoolGridView, Fixed footer, Fixed header, GridView, Internet Explorer 6, Scrollable, Scrolling, UpdatePanel