Matt Berseth

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...

Comments (16) | TrackBacks (0)

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...

Comments (10) | TrackBacks (0)

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...

Comments (16) | TrackBacks (0)

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...

Comments (24) | TrackBacks (3)

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...

Comments (10) | TrackBacks (1)

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...

Comments (14) | TrackBacks (0)

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...

Comments (13) | TrackBacks (2)

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...

Comments (11) | TrackBacks (0)

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...

Comments (20) | TrackBacks (2)