Matt Berseth

As far as web development goes, I came a little late to the party.  I started life as a developer working on the absolute guts of a fairly complex object persistence engine.  At my next stop I hand-coded an obscene number of business objects that fed our presentation layer (which is pretty ironic considering I just worked on an ORM!).  Needless to say I didn't stay at that place too long.  From there I finally took a stab at user interface when I took a gig as a WinForms developer.  I did that for a little over a year and it was OK.  Finally I ended up where I am now, about 60% of my day to day activities includes web developer on Microsoft's ASP.NET 2.0 platform.  I did a little bit of web development with 1.1, but nothing substantial.  Hands down, I enjoy web development the best (I have never once been complimented on how nice my LEFT OUTER JOIN looks).

When I started to work with ASP.NET 2.0, I had absolutely zero experience with HTML, JavaScript and CSS.  Quite honestly, I found that you can get pretty far as an ASP.NET developer without too much knowledge of any of these.  I interviewed for a good number of ASP.NET job's, and never once was I asked to

• Describe how the box model works
• Explain CSS selectors 
• Discuss JavaScript's inheritance model

I am still no expert, but being knowledgeable in these areas is pretty much a prereq for building great web applications.  So when the opportunity comes to dig deeper into one of these area's I usually take it.  One of these came along last week.  A business analyst was poking around on ComponentArt's web site and liked the look of a few of their controls.  Specifically, they liked the shinny black border that surrounds their dialog and grid controls.  So I did a little research to see what it would take to incorporate a similar border around our data grids and dialog controls. 

The goal of the research was to create an HTML template that included the markup and CSS classes that we could use to surround our existing data grids and popup controls to get a similar look and feel.  Below is a screen shot from the sample I created.  The grid is live so you can page and sort the data.  Also, there is a slider on the page that you can use to adjust the width of the grid (this demonstrates the fluidness of the border).  The second demo shows Delete Confirm and Tip of the Day popup controls that use this border as well. 

Live Data Grid Demo (IE6, IE7 and FF) | Live Popup Demo (IE6, IE7 and FF) | Download (.Net 3.5 and AJCT 3.5.11119.0)    

HTML Structure and CSS Classes

Like I said earlier, I wanted to create an HTML structure that I could surround both my data grids (GridViews and for this sample a ListView) and popup panels with.  So to create the border template, I created an HTML structure that divided the container into 3 regions: header, body and footer.  Each of these 3 regions was further subdivided into 3 sub-regions: outer, inner and content.  For each of the regions, the outer class is used to apply the right hand border, the inner class is used to apply the left hand border, and the content is used to apply the background.  This is similar to the approach the AjaxControlToolkit's TabPanel uses to provide the nice rounded borders for each of the tab headers. 

Here is the markup that builds the header structure.

Here are the images that make up the header.

And finally, here are the CSS rules that apply these images.

I used the sample template for both the footer and the body and as a result I came up with the following HTML structure.

Adding the Border to a DataGrid

Applying this border to the ListView/DataPager/Slider example I created previously was really simple.  I just moved the ListView into the body's content region like so.  That's it.

Adding the Border to a Delete Confirm Popup Control

Besides surrounding a data grid, I also wanted to apply the same template to our delete confirm popup panel.  Because our popup panel also currently support dragging, I also wanted to include this feature as well.  So I tweaked the template and replaced the dialog and header DIV's with asp:Panels so the DragPanel control would have something to attach to.  If you haven't used the DargPanel before, it is simple - there are really only 2 attributes you have to worry about!

I also added a close button to the upper right hand corner of the dialog.  Additionally, I added a section to the body for the OK and Cancel buttons.  Here is the markup for the Delete Confirm sample dialog.  Below that is what it looks like.

Adding the Border to a Tip of the Day Dialog

For good measure, I also applied this template to the Tip of the Day dialog I previously blogged about.  Again, I wanted to support dragging, so just like with the Delete Confirm example, I replaced the containing DIV with an asp:Panel as well as the header DIV.  Additionally, I wanted to use the DynamicPopulate extender to replace the tip with the response from a web service.  So again, I added an asp:Panel to the body's content and this is what the DynamicPopulate replaces with the webservice result.

Here is the markup I used for the Tip of the Day dialog, below that is the markup for the PopupControl, DragPanel and DynamicPopulate extender controls.  Lastly, is a screenshot of what the control looks like.

That's it.  Enjoy!