October 29, 2007

GridViewControlExtender II - Header Cell MouseOver Styles and a Few More Live Examples

I recently wrote a posting showing how GridView mouseover effects can be added to your existing GridView's through the use of a AjaxControlToolkit extender control.  In the last portion of the post I mentioned how I thought it would be useful to add other features into this extender to support column and header cell cell hover and select effects.  So on a recent road trip to Orlando FL I added a couple new features to this extender control and built a handful more grids to show off the new enhancements.  One of the new GridView themes uses the Sharepoint 2007 calendar color scheme and the other is derived from the ExtJs Data Grid.  All of the grids can be viewed on the demo site and of course you can also download the full source.   Live Demo (IE6, IE7 and FF) | Download The GridViewControlExtender now includes support for applying column hover and select CSS classes to cells that are in the same column...

October 23, 2007

GridViewControlExtender - Row MouseOver and Click Styles

In a recent post, I created a GridView that with the help of some JavaScript and CSS rendered similar to the Tablecloth style table shown here.  I like the Tablecloth sample because the presentation of the grid changes as the user interacts it.  It does a good job of keeping the user focused on the data elements the they are currently working with.            Live Demo (IE6, IE7, FF) | Download   The design of the Tablecloth grid is fairly simple.  It boils down to adding and removing CSS classes to the individual HTML Table elements (mostly TD's and TH's) in response to a four different DOM events (mouseover, mouseup, mousedown and click).  For example, when the mouse cursor is positioned over a particular cell in the table, the mouseover event fires and a bit of JavaScript runs and applies a CSS class to all of the cells that share the same rowIndex or cellIndex.  The image below shows how this works.  When the mouse is positioned over...

October 22, 2007

Theming the AjaxControlToolkit's Calendar Control

The calendar control that my team is using in our current web application is terrible for three reasons: it is ugly.  Viewing the control reminds me of the first time I went back to Window's 95 after having upgraded to XP it opens the calendar control in a new browser instance (something our users hate) it has a lot of supporting, custom JavaScript that has had its fair share of bugs If I am not mistaken, somehow the control survived the port from classic ASP to ASP.NET 1.1 and then again from ASP.NET 1.1 to ASP.NET 2.0.  I have no idea where the control orignally came from, but it is time to get rid of it. Live Demo (IE6, IE7, FF) | Download So my latest research tasks was to look into replacing this legacy control with something a little hipper.  I took a look at the AjaxControlToolkit's Calendar control to see if it was something we could use.  Sure enough...

October 15, 2007

YUI Style AJAX Progress Indicator

If you follow my blog, you have no doubt noticed that I have been taking a tour through the Yahoo! User Interface Library (you can read my previous posts here, here and here).  Well, I think I have finally made my way through a majority of the content and feel like I have come out with a few new UI components that I can incorporate into my current web app.  But before I move on, I thought I would write one last brief post describing how you can incorporate the YUI style progress panel into your existing ASP.NET AJAX web application. Live Demo (FF, IE6 and IE7) | Download The markup for the progress panel is below.  <asp:Panel ID="pnlPopup" runat="server" CssClass="progress" style="display:none;"> <div class="container"> <div class="header">Loading, please wait...</div> <div class="body"> <img src="img/activity.gif" /> </div> </div> </asp:Panel> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode...

October 14, 2007

Improving the Presentation of an Extra-Wide GridView

The codebase for the web application I am currently working on is pretty new.  We ported our legacy application from .Net 1.1 to .Net 2.0 and in the process we did a complete redesign of our presentation and business logic layers.  However, we did not do the same with our data model.  We upgraded from SQL Server 2000 to 2005, but for the most part we kept the exact same datamodel.  So while from a technology standpoint we have a completely new platform, our data model is about 5 years old.  Over those 5 years most of datamodel changes have been the addition of new columns to existing tables.  As a result, a number of our core tables have become quite wide.  And as the tables in our underlying datamodel get wider over time, so do the grids that present the data.         Live Demo (FF, IE6, IE7) | Download So during a recent visit to the Ajax Rain site, I came across a sample that had a few...

October 10, 2007

YUI Style Yes/No Confirm Dialog with the ModalPopupExtender

If you have read a few of my most recent posts (here and here) you have probably noticed that I have been spending some time with  Yahoo!'s YUI control library.  During my most recent visit I came across a great looking confirm dialog.  It's simple and straight to the point ... Live Demo (FF, IE6, IE7) | Download The team I currently work on had already been debating whether or not we needed to replace our existing standard confirm dialog with something a little better looking.  Watching the demo pretty much sealed it.  So I signed up for investigating what markup and style classes were needed to get this dialog into our application and working with the AjaxControlToolkit's ModalPopupExtender control.  The following are the steps I did to accomplish this ... Design the HTML Structure and CSS Classes Our existing confirm dialog is not CSS friendly.  That made tweaking the look and feel a little harder than it should have been.  So this time around, I...

October 06, 2007

A YUI DataTable Styled GridView

Lately I have been spending more and more time browsing through the YUI Developer pages.  I have worked exclusively with Microsoft's .Net Framework for the past 5 years, but I find it interesting to learn about other competing technologies as well (I even went so far to get certified on Sun's Java platform).  I don't know if it is boredom or curiosity, but I generally find it interesting to see what tools, development environments, programming languages and other techniques non-Microsoft engineers are using.  I try to come out of these research projects with something concrete that I can potentially use in my day to day activities as a .Net web developer. During my most recent effort I came across what I thought was a slick looking GridView like control (YUI calls it a DataTable Control).  You can play around with the interactive demo for it here.  The control renders as an HTML Table, and has a few sorting features that are sometimes a little difficult...

Topics: ASP.NET , GridView

October 03, 2007

ZIP Code Database Created from the 2000 Census Data

A few months ago, I wrote a blog entry describing how you could use ASP.NET AJAX along with the Virtual Earth Map Control to create a web based map application that locates ZIP Code boundaries by drawing a shaded region on the maps surface.  You can view the interactive demo for this here.    The number one comment I received from that post was: That's cool, but where did you get the ZIP Code dataset from? Well ...  I got this data from the U.S Census Bureau's Cartographic web site.  The site contains links that allow you to download the data files for each of the 50 states along with Puerto Rico and District of Columbia.  The data is from the 2000 census, so it is already almost eight years old.  Nevertheless it makes for a pretty good test dataset (if you need a more up to date dataset there are plently of...

Topics: Other , Virtual Earth

October 02, 2007

ModalPopup with Multiple Cancel Buttons

I recently stumbled across the following post.  In the entry, the author describes a simple modal popup he has created for his hotel reservation ASP.NET AJAX web application.  While developing the popup control, he ran into a problem when trying to include both a 'Close' button at the bottom of the dialog as well as a close 'X' button in the top right corner: I ran into a bit of a stumbling block because I wanted to have multiple buttons close the popup.  I had the OK button and the cancel button centered and vertically aligned at the bottom of the window, but I also wanted a cancel button in the top right  (ie "Cancel [X]") - with the familiar [X] that we know and love for closing something.  The problem is, I couldn't figure out how to assign more than one control to the CancelControlID.  Live Demo | Download [Update 10/3/2007]: As Koen points out, the...


Consulting Services

Yep - I also offer consulting services. And heck, I'll do just about anything. If you enjoy my blog just drop me an email describing the work you need done.

Recent Comments

  • TimothyP wrote: I work with tons of developers who haven't even got a clue what Twitter of Facebook is. In fact, it'...
  • Janko wrote: Yes it's strange that people think it's ok to blog at work but consider unethical to use facebook. P...
  • Kam Lagan wrote: Hi Matt, The numbers do seem a little "off" to what you perceived the community would be like. But...
  • Siderite wrote: You're kidding me! So the people that don't blog think it is ok to blog at work (maybe because they ...
  • Guy Harwood wrote: Good to see the results. one typo.... 'What best describes your current job title?' appears twice,...
  • sirrocco wrote: One problem with : DEV I DEV II DEV III was that I didn't know what it meant :( .(is it common ...
  • Jack wrote: How many person fill the survery? Blog is very common, so I don't think 71.5% is high. Maybe our bos...
  • Andy wrote: Done. The developer1, developer2 question - not sure how meaningful the results are going to be for ...