Damo's spot on the web: Blog

iPhone Speed Check updated to test connection latency

Sat, 16 Aug 2008 14:37:30 GMT

I've published an update to iphonespeedcheck.com so that it tests connection latency. I've also stripped out the dependency on third-party JavaScript libraries so it's extra lean. There's also a shiny new home screen icon too.

Note that the site will only work properly in Safari on Windows, Mac or iPhone/iPod Touch.

Thanks to Cybner for the hosting.

Using PageDataSource (was ParentDataSource) with ASP.NET Web Site projects

Wed, 13 Aug 2008 12:13:28 GMT

I got a request today from somebody who was trying to use my ParentDataSource (now called PageDataSource) control in an ASP.NET Web Site project and was running into problems. The bound control kept throwing an InvalidOperationException saying it couldn't load the type. Turns out the problem is with the difference in the way that pages and assemblies are dynamically compiled and loaded by the BuildManager in web site projects. The fix involves simple adding the dynamic assembly name to the type name so that the BuildManager can locate it correctly when the bound control asks for it:

if (ctl.Parent == null)
{
    // At the top of the control tree and user control was not found, use page base type instead
    this.TypeName = Assembly.CreateQualifiedName(
        this.Page.GetType().Assembly.FullName,
        this.Page.GetType().BaseType.FullName);
    _parentHost = this.Page;
    return;
}

You can download the updated control class file from here.

What have I been up to?

Sat, 02 Aug 2008 11:13:43 GMT

I haven't posted here in a long time so I thought I'd do a quick heads up of what I've been doing lately:

I received an MVP award from Microsoft in ASP/ASP.NET.
I passed a couple more MS exams to complete my MCSD.NET. This leaves me only one MS exam off of finishing my Masters degree.
I bought an iPhone 3G.
I published my first iPhone web app. It's an online connection speed test: http://www.iphonespeedcheck.com
I hosted another meeting of the Ballarat.NET SIG. We were lucky enough to have two great presenters in Mahesh Krishnan and Tatham Oddie. Thanks again to Command Centre Ballarat for providing us with the venue. (if you're interested in presenting at future Ballarat.NET SIG events I'm always looking for presenters so please drop me a line via email, facebook, twitter, messenger, etc.)

On top of that I finished up a long term gig I'd been on and took a couple of weeks off to unwind.

What's on my radar for the coming months?

Presenting the session Lachlan Hardy and I did at ReMIX this year on Internet Explorer 8 at the RDN events in Sydney and Melbourne.
I'm helping to organise and coordinate the Chalk Talks at this year's Tech.Ed in Sydney (more details on this soon).
Check out Web Directions South in Sydney.
Do some further updates to www.iphonespeedcheck.com
Explore the new features in ASP.NET AJAX 4.
Add some new features to the AccessKeyHighlighter AJAX control.
Record some screencasts on the AccessKeyHighlighter and ASP.NET AJAX 4.
Participate in the Internet Explorer 8 Beta 2 Feedback and generally checking out what it has to offer.
Look into completing the requirements to become a Microsoft Certified Trainer.
Build a new developer workstation for home.

Phew, that looks like enough! If you want to know what I'm thinking at any given time I can usually be heard chirping over on Twitter.

AccessKeyHighlighter v1.0.1 released

Sat, 31 May 2008 00:05:22 GMT

I've released an update to the AccessKeyHighlighter to resolve a couple of issues and add some new features. Check it out on its CodePlex page.

Announcing the AccessKeyHighlighter control for ASP.NET AJAX

Sun, 25 May 2008 07:23:51 GMT

I've finally managed to get the first release of my AccessKeyHighlighter control for ASP.NET AJAX published. When the control is placed on a form it highlights the access keys assigned to form fields when the user holds down the access key shortcut key in their browser (Alt for IE & Safari, Shift+Alt for Firefox). You can see a live demo of it in action here.

If you find it useful, be sure to leave me a note on the CodePlex site, and if you find any issues or have any suggestions for improvements or new features, please create a feature request on the Issue Tracker page.

ReMIX08 Australia Welcome to Internet Explorer 8 session content

Thu, 22 May 2008 11:22:00 GMT

Thanks to all those who attended my and Lachlan's session on IE8 at ReMIX in Sydney and Melbourne. We hope you got something out of it. You can download the deck and demo from the session below.

Suggested improvements for CSS editor in Visual Web Developer and Expression Web

Wed, 21 May 2008 04:08:45 GMT

People who know me will know that I love CSS and that I can often be found with my head deep in a CSS file in Visual Web Developer (the web tools in Visual Studio). Recently I've been thinking about how Microsoft could make the support for editing CSS files directly in these tools more conducive to discovering features of CSS you don't know about, improving productivity through better contextual awareness, and offering insight as to real world issues such as browser compatibilities.

So I've put together a series of mock-ups that illustrate some of the ideas I have for improving the support for CSS file editing:

Inline RGB colour picker
Ability to define colour swatches in XML comments including name, RGB and category
Inline colour swatch picker with $ keyboard shortcut that replaces name with hex RGB value on completion
Inline named colour picker with preview of named colour in pick list
Ability to choose browsers to warn of incompatibilities with when schema checking CSS
Green "squigglies" under CSS selectors and properties know to be unsupported or have issues in chosen warning browsers
ToolTips for CSS properties showing description and browser compatibility summary with hyperlinks to further information
ToolTips for CSS selectors showing description of what elements it will select, browser compatibility summary and specificity score with hyperlinks to further information on each
ToolTip preview of url resources (images) showing file size and image dimensions
ToolTip preview of font-family showing font source (TrueType, W3C, etc.) and font rendering preview
Support for automatic indenting of style declarations based on descendant or child selectors if they appear after each other

Hopefully somebody on the appropriate teams in Microsoft will here me :)

Presenting at ReMIX Australia

Wed, 21 May 2008 03:36:07 GMT

This week I'm presenting at ReMIX Australia in Sydney (yesterday) and Melbourne (tomorrow). I'm presenting a session along with Lachlan Hardy on Internet Explorer 8. The talk focuses heavily on web standards as that is the big news for IE8. Hope to see you there.

IE8 beta 1 browser version targeting and ASP.NET Themes

Tue, 11 Mar 2008 01:08:49 GMT

You might find that when you add the meta tag required to force IE8 beta 1 into IE7 (or 6) rendering mode into your ASP.NET page (or Master Page) that it doesn't work as expected.... IE8 continues to render the site in full standards mode. The reason might be that in beta 1 of IE8 the "X-UA-Compatible" meta tag must be the first element in the page head element and by default ASP.NET will insert the link tags to the CSS files in your theme at the beginning of the head element of your page (or Master Page), before any other elements that might actually be defined in the .aspx or .master file.

To fix this, add the following code to the page's (or Master Page's) PreRender event handler (Page_PreRender):

// Move browser tageting meta tag to top of header
HtmlMeta meta = null;
int metaXUACompatIndex = -1;
foreach (Control ctl in page.Header.Controls)
{
    meta = ctl as HtmlMeta;
    if (meta == null)
        continue;

    if (meta.HttpEquiv == "X-UA-Compatible")
    {
        // Grab index
        metaXUACompatIndex = page.Header.Controls.IndexOf(meta);
        break;
    }
}
if (metaXUACompatIndex > 0)
{
    HtmlMeta metaXUACompat = page.Header.Controls[metaXUACompatIndex] as HtmlMeta;
    page.Header.Controls.RemoveAt(metaXUACompatIndex);
    page.Header.Controls.AddAt(0, metaXUACompat);
}

This will move the browser targeting meta tag to the top of the list so that IE8 will honour it.

I'm at MIX08 in Las Vegas

Wed, 05 Mar 2008 21:31:27 GMT

Keep track of what I'm doing (when I have charge) on twitter: http://twitter.com/DamianEdwards

ASP.NET & CSS: Using skins to "zero out" default style and set default CSS class names

Fri, 15 Feb 2008 11:01:43 GMT

ASP.NET includes a feature called "Themes" that allows you to organise styling artifacts including CSS stylesheets and images into logical units that can be easily applied to a page or entire site through configuration. Part of this feature is the ability to create .skin files that set default values for certain properties of ASP.NET server controls as part of a theme.

Not all properties of ASP.NET controls are skinnable. Indeed the initial intention of .skin files was to enable the setting of default values for properties such as FontColor and BorderWidth, which when serving to CSS supporting browsers ASP.NET will render as inline style attributes on the emitted HTML controls. So what place do they have when we apply all of our style rules via way of attached CSS stylesheets and selectors (the way we should)?

Despite their evil initial purpose we can put .skin files to good use for two purposes:

Assigning CSS classes to all instances of particular ASP.NET server controls; and
Zeroing out the default inline style that ASP.NET sets on some controls.

So how does this work?

In your theme folder add a new .skin file called Controls.skin:

Now we want to add some declarations to the file to:

Zero out the inline style of the ASP.NET validator controls; and
Assign a default CSS class name to the Button, LinkButton, TextBox and validator controls.

<asp:RequiredFieldValidator runat="server" ForeColor="" CssClass="validation-error" />
<asp:RangeValidator runat="server" ForeColor="" CssClass="validation-error" />
<asp:CompareValidator runat="server" ForeColor="" CssClass="validation-error" />
<asp:RegularExpressionValidator runat="server" ForeColor="" CssClass="validation-error" />
<asp:CustomValidator runat="server" ForeColor="" CssClass="validation-error" />

<asp:LinkButton runat="server" CssClass="button" />
<asp:Button runat="server" CssClass="button" />
<asp:TextBox runat="server" CssClass="text-box" />

And that's it! Now when ASP.NET renders these controls when they appear on a page (or in a site) with your theme configured, they'll automatically pick up properties defined in this .skin file.

ASP.NET: Binding the ObjectDataSource to the hosting page or user control

Wed, 06 Feb 2008 09:01:34 GMT

In my recent RDN presentation on CSS Layout with ASP.NET & Visual Studio 2008 I mentioned a technique I use to get some extra value from the ObjectDataSource control. From speaking with other developers I've found that many people try to use the control only to be dissatisfied with the way it works, and in particular the need to provide it with a separate business logic or gateway class to look for its CRUD methods on. This is most apparent when you are trying to separate the data-access, business and presentation logic through way of a MVC or MVP pattern like "Passive View". In this scenario most people go back to the method of setting the DataSource property of their data bound control directly and manually calling the DataBind() method. This is a shame as it prevents you from realising the productivity gains and ease of maintenance of the no-code support for paging and sorting when using a data source control (plus the ability to fully style the GridView as described in my previous article).

Rather than abandoning the ObjectDataSource altogether, we can make it work for us, by sub-classing it and changing it's behaviour slightly so that it looks for its methods on the hosting page or user control instead, i.e. its parent in the control hierarchy.

(If you have never looked at the data-source controls and two-way data-binding support in ASP.NET 2.0 before, it might be worth first checking out Scott Mitchell's excellent tutorials on the subject.)

Start out by adding a new class to your project called ParentDataSource.cs. I like to put all custom and user controls in a Controls sub-folder and thus namespace.

Make this new class inherit from the ObjectDataSource class and a ToolboxData attribute to define its tag name (you'll need to add some using statements to import the appropriate namespaces too):

namespace RDN.CSSReadiDepth.Controls
{
    [ToolboxData("<{0}:ParentDataSource runat=server></{0}:ParentDataSource>")]
    public class ParentDataSource : ObjectDataSource
    {

Now add a couple of constructors. These do a few things. First they enable paging and sorting by default (you don't need to do this but I use paging and sorting more often than not). Secondly they wire-up some events of the control to local handler methods:

public ParentDataSource()
    : this(String.Empty, String.Empty)
{ }

public ParentDataSource(string typeName, string selectMethod)
    : base(typeName, selectMethod)
{
    this.EnablePaging = true;
    this.SortParameterName = "sortExpression";

    this.Init += new EventHandler(ParentDataSource_Init);
    this.ObjectCreating += new ObjectDataSourceObjectEventHandler(ParentDataSource_ObjectCreating);
    this.ObjectDisposing += new ObjectDataSourceDisposingEventHandler(ParentDataSource_ObjectDisposing);
}

Now we need to add our event handler methods. They're going to do the following:

Init handler: walk the control tree to find the page or user control the data source is being hosted on and then set the TypeName property to the type of the hosting page or user control;
ObjectCreating handler: set the instance of the object we want our data source control to bind to, which will be the page or user control it is hosted on; and
ObjectDisposing handler: cancel the default behaviour of the ObjectDataSource which is to dispose of the object it is bound to.

void ParentDataSource_Init(object sender, EventArgs e)
{
#if DEBUG
    System.Diagnostics.Stopwatch sw = new System.Diagnostics.Stopwatch();
    sw.Start();
#endif
    FindParentHost(this);
#if DEBUG
    sw.Stop();
    System.Diagnostics.Debug.WriteLine(String.Format("Finding parent host for data source took {0}", sw.Elapsed));
#endif
}

void ParentDataSource_ObjectCreating(object sender, ObjectDataSourceEventArgs e)
{
    e.ObjectInstance = _parentHost;
}

void ParentDataSource_ObjectDisposing(object sender, ObjectDataSourceDisposingEventArgs e)
{
    e.Cancel = true;
}

Note I've also included some timing code in the Init handler so you can measure the impact of this method (it's negligible).

Finally we need to add some private members to support the handler methods:

Object _parentHost;

/// <summary>
/// Walks the control tree to find the hosting parent page or user control
/// </summary>
/// <param name="ctl">The control to start the tree walk at</param>
private void FindParentHost(Control ctl)
{
    if (ctl.Parent == null)
    {
        // User control was not found, use page base type instead
        this.TypeName = this.Page.GetType().BaseType.FullName;
        _parentHost = this.Page;
        return;
    }

    // Find the user control base type
    UserControl parentUC = ctl.Parent as UserControl;
    MasterPage parentMP = ctl.Parent as MasterPage;
    if (parentUC != null && parentMP == null)
    {
        Type parentBaseType = ctl.Parent.GetType().BaseType;
        this.TypeName = parentBaseType.FullName;
        _parentHost = ctl.Parent;
        return;
    }
    else
    {
        FindParentHost(ctl.Parent);
    }
}

The method FindParentHost, walks the control tree from the data source control until it finds the user control it is hosted on. If it can't find a hosting user control it assumes the control is hosted on a page. Once it finds the host it sets the TypeName property accordingly (note that the MasterPage class actually inherits from UserControl so we explicitly exclude that case).

Now that we have our customised data source control it's time to use it in anger! Add a declaration to the web.config to import the controls from the DLL containing the ParentDataSource control:

<pages styleSheetTheme="Theme1">
  <controls>
    <add tagPrefix="cc" namespace="RDN.CSSReadiDepth.Controls" assembly="RDN.CSSReadiDepth" />
  </controls>
</pages>

Now you can place the control in your page or user control mark-up file (.aspx or .ascx) and set the DataSourceID of your data-binding target control:

<asp:GridView ID="gvExample" runat="server" DataSourceID="pdsExample" DataKeyNames="Id"
    AllowPaging="true" AllowSorting="true" PageSize="10" AutoGenerateColumns="false"
    CssClass="customers-grid">
    <Columns>
        <asp:BoundField HeaderText="First Name" DataField="FirstName" SortExpression="FirstName"
            HeaderStyle-CssClass="first-name" ItemStyle-CssClass="first-name"
            AccessibleHeaderText="The customer's first name" />
        <asp:BoundField HeaderText="Last Name" DataField="LastName" SortExpression="LastName"
            HeaderStyle-CssClass="last-name" ItemStyle-CssClass="last-name"
            AccessibleHeaderText="The customer's last name" />
        <asp:BoundField HeaderText="Age" DataField="Age" SortExpression="Age"
            HeaderStyle-CssClass="age" ItemStyle-CssClass="age"
            AccessibleHeaderText="The age of the customer" />
        <asp:BoundField HeaderText="Member for" DataField="YearsAsMember" SortExpression="YearsAsMember"
            HeaderStyle-CssClass="years-as-member" ItemStyle-CssClass="years-as-member"
            AccessibleHeaderText="How many years the customer has been a member for" />
    </Columns>
</asp:GridView>
<cc:ParentDataSource ID="pdsExample" runat="server"
    SelectMethod="GetData" SelectCountMethod="GetDataRowCount" />

In this example I need to implement two methods on my page's code-behind file: GetData and GetDataRowCount. The first gets the current page of data to display, the second gets the total number of records (this is needed so the data source controls can calculate paging information):

#region << Data Binding Methods >>

public IEnumerable<Customer> GetData(string sortExpression, int maximumRows, int startRowIndex)
{
    if (this.Customers == null || this.Customers.Count == 0)
        return this.Customers;

    var sortFunc = this.Customers[0].GetPropertySelector<Customer, object>(sortExpression.Replace(" DESC", ""));

    if (sortExpression.ToUpper().IndexOf(" DESC") >= 0)
    {
        return this.Customers
                // Sort descending
                .OrderByDescending(sortFunc)
                // Grab a single page of data
                .Skip((startRowIndex / maximumRows) * maximumRows)
                .Take(maximumRows);
    }
    else
    {
        return this.Customers
                // Sort ascending
                .OrderBy(sortFunc)
                // Grab a single page of data
                .Skip((startRowIndex / maximumRows) * maximumRows)
                .Take(maximumRows);
    }
}

public int GetDataRowCount()
{
    return (this.Customers != null ? this.Customers.Count : 0);
}

#endregion

In this example the data is stored in a property on the page class itself and I'm using LINQ to simulate sorting and paging. The property is just wrapping calls into the application's session state. The data itself was loaded into session state when the application started up. In a real world example these calls might look up the data from a web-service or database, return data from cache, or in the MVP scenario first raise an event that the presenter class will handle and then return the value of a property on the page (who's contents was set by the event handler in the presenter class). Also, because these methods are instance methods on the actual page object you are free to manipulate other controls or properties of the page class.

You can use this method equally well with any of the ASP.NET controls that support the data source controls, such as GridView, DetailsView, FormView and Repeater. It also works with two-way data-binding.

Download the sample solution used in this article here

ASP.NET & CSS: Styling sortable columns in the GridView using CSS

Mon, 04 Feb 2008 10:10:19 GMT

The following is an article describing one of the techniques I spoke about during my recent RDN topic, CSS Layout with ASP.NET & Visual Studio 2008.

A common user interface requirement for applications is to visually indicate when:

a column in a grid is sortable;
which column in a grid is currently the sort column; and
which direction the sort is being applied in (ascending or descending).

In ASP.NET, we generally use the GridView control to display tabular data and provide the user with the ability to sort and page through that data. There are many examples on the web of techniques you can use to programmatically insert an image to indicate the currently sorted column and its sort direction (including the MSDN documentation). There are a number of problems with this approach:

It mixes functional code with presentation logic. The code behind for our pages and user controls is complicated enough without having to trawl through formatting and layout logic;
It requires you to add this code on every GridView (or sub-class the GridView and use the new version instead); and
It dilutes the semantic meaning of the resultant HTML mark-up, thus affecting the page's usability (IMG tags have no place in the header of a TABLE).

So what's a better solution I hear you say? The following solution uses ASP.NET, the CSS Friendly Control Adapters and CSS styling to:

add sorting information to a GridView in a semantic and accessible fashion; and
apply visual effects relating to sorting behaviour.

The CSS Friendly Control Adapters alter the HTML mark-up produced by ASP.NET for many of the included server controls so that it is more accessible, standards compliant and, importantly, easier to style using CSS. You can grab the latest source code for the adapters from CodePlex (be sure to download from the source code section, not the release section), however the technique shown here requires a small change to the included GridView adapter (further details about incorporating the CSS Friendly Control Adapters into your web project are included in the download). So, once you've downloaded the source, open up the solution and find the GridViewAdapter.cs file:

Replace its contents with this modified version. This adds a new function that sets the CSS class of the GridView's header cells based on which column the GridView is currently sorted by. So for example if I have a GridView defined as such:

<asp:GridView ID="gvExample" runat="server" DataSourceID="pdsExample" DataKeyNames="Id"
    AllowPaging="true" AllowSorting="true" PageSize="10" AutoGenerateColumns="false" CssClass="customers-grid">
    <Columns>
        <asp:BoundField HeaderText="First Name" DataField="FirstName" SortExpression="FirstName"
            HeaderStyle-CssClass="first-name" ItemStyle-CssClass="first-name" />
        <asp:BoundField HeaderText="Last Name" DataField="LastName" SortExpression="LastName"
            HeaderStyle-CssClass="last-name" ItemStyle-CssClass="last-name" />
        <asp:BoundField HeaderText="Age" DataField="Age" SortExpression="Age"
            HeaderStyle-CssClass="age" ItemStyle-CssClass="age" />
        <asp:BoundField HeaderText="Member for" DataField="YearsAsMember" SortExpression="YearsAsMember"
            HeaderStyle-CssClass="years-as-member" ItemStyle-CssClass="years-as-member" />
    </Columns>
</asp:GridView>

Then when the GridView is rendered sorted by the First name column, the HTML mark-up emitted will look like this:

<div class="AspNet-GridView" id="ctl00_main_gvExample">
<table cellpadding="0" cellspacing="0" summary="" class="customers-grid">
    <thead>
    <tr class="AspNet-GridView-Header">
        <th class="sortable sorted asc first-name" scope="col">
            <a href="javascript:__doPostBack('ctl00$main$gvExample','Sort$FirstName')">First Name</a></th>
        <th class="sortable last-name" scope="col">
            <a href="javascript:__doPostBack('ctl00$main$gvExample','Sort$LastName')">Last Name</a></th>
        <th class="sortable age" scope="col">
            <a href="javascript:__doPostBack('ctl00$main$gvExample','Sort$Age')">Age</a></th>
        <th class="sortable years-as-member" scope="col">
            <a href="javascript:__doPostBack('ctl00$main$gvExample','Sort$YearsAsMember')">Member for</a></th>
    </tr>
    </thead>
    <tbody><!-- Data rows here --></tbody>
</table>
</div>

Note how we now have CSS classes added to the <th> tags to describe their sorting behaviour (sortable, sorted and asc). We can see that all columns are sortable, and that the First Name column is currently being sorted by in the ascending direction. And because the logic to apply these classes is in the control adapter, it is automatically applied to all GridViews in the application.

There is a caveat to this approach however. The adapter relies on two properties of the GridView to determine the current sort column and direction: SortExpression and SortDirection. These are read only properties that are only populated when you provide data to the GridView by way of one of the data source controls introduced in ASP.NET 2.0, e.g. ObjectDataSource, SqlDataSource, etc., and the DataSourceID property. If you provide data to your GridView by setting its DataSource property directly from code behind (and calling DataBind()) the sort properties are not set and thus the adapter cannot insert the required CSS class names. You must also initially call the Sort() method on the GridView from the Page_Load() method in order to force the setting of these properties the first time the page is rendered:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // Set default sort expression
        gvExample.Sort("FirstName", SortDirection.Ascending);
    }
}

If you are not using the data source controls (the ObjectDataSource in particular) I thoroughly recommended you take a look as they provide you with "free" sorting and paging functionality out of the box without the need to manually handle events on the GridView. If you don't like the way the ObjectDataSource requires a separate business logic class to provide its data access functionality, for instance if you are implementing a MVP pattern in the "Passive View" flavour, then you can sub-class the OjectDataSource and force it to look on the instance of the class for the hosting page (or user control) for its methods instead (this is the method I used in the RDN sample solution and I will post an article on this technique shortly).

Now that we have our CSS classes set we can attach some CSS rules that provide some visual indicators on the sorting behaviour. The following CSS rules do just that (I've placed these in a common Grid.css file in the sample project):

div.AspNet-GridView {
    border: 1px solid #828790;
    font-size: 0.8em;
    min-height: 1px;
    font-family: "Lucida Sans";
}

    div.AspNet-GridView table {
        width: 100%;
        border-collapse: collapse;
    }    
        
        div.AspNet-GridView table thead tr th {
            padding: 3px 3px 2px 2px;
            background: url('grid-header-back.gif') top left repeat-x;
            font-weight: normal;
            border-bottom: 1px solid #d5d5d5;
            border-right: 1px solid #e3e4e6;
            
        }
            div.AspNet-GridView table thead tr th.sortable {
                padding: 0px;
            }
                div.AspNet-GridView table thead tr th.sortable:hover {
                    background: #b7e7fb url('grid-header-sortable-back-hover.gif') top left repeat-x;
                    border: 1px solid #96d9f9;
                    border-top: none;
                    border-left: none;
                }
                
                div.AspNet-GridView table thead tr th.sortable a {
                    display: block;
                    padding: 3px 3px 2px 2px;
                    color: Black;
                    min-height: 1px; /* Force layout in IE7 to prevent rendering issues */
                }
                    div.AspNet-GridView table thead tr th.sortable a:hover {
                        text-decoration: none;
                    }
            
            div.AspNet-GridView table thead tr th.sorted {
                background: #d8ecf6 url('grid-header-sorted-back.gif') top left repeat-x;
                border: 1px solid #96d9f9;
                border-top: none;
                border-left: none;
            }
            
                div.AspNet-GridView table thead tr th.asc a {
                    background: transparent url('grid-header-asc-glyph.gif') center 1px no-repeat;
                }
                
                div.AspNet-GridView table thead tr th.desc a {
                    background: transparent url('grid-header-desc-glyph.gif') center 1px no-repeat;
                }
            
        div.AspNet-GridView table tbody tr td {
            padding: 2px 6px 2px 4px;
            border: 1px solid #efefef;
        }
        
        div.AspNet-GridView table thead tr th.action,
        div.AspNet-GridView table tbody tr td.action {
            
            border-left: none;
            border-right: none;
        }
        div.AspNet-GridView table tbody tr td.action {
            padding: 2px 2px 2px 2px;
            width: 40px;
            text-align: center;
        }
    
    div.AspNet-GridView table tbody tr.AspNet-GridView-Alternate td {
        background: #f2f9fc;
    }
    
    div.AspNet-GridView-Pagination {
        background: #e6e9ee;
        text-align: center;
        padding: 2px 3px 2px 3px;
        font-size: 0.9em;
        min-height: 1px; /* Force layout in IE7 to prevent rendering issues */
    }
        div.AspNet-GridView-Pagination span {
            padding: 0px 3px;
            background: #d8ecf6;
            border: 1px solid #96d9f9;
        }

div.grid-row-count {
    color: #666666;
    padding: 2px 0px 2px 6px;
    font-size: 0.8em;
}

These style rules use a small number of background images to give our GridView a nice Vista-like look:

You can immediately see that the First Name column is currently the sort column in the ascending direction. Hovering over other sortable columns provides feedback by way of a :hover background image, here I've hovered my mouse over the Last Name column:

I've also added some formatting to the pager section of the GridView to highlight the current page.

To apply styles that are specific to this particular GridView, e.g. column widths, we can add some style rules like thus:

table.customers-grid {
    
}

    table.customers-grid th.first-name,
    table.customers-grid td.first-name {
        width: 35%;
    }
    
    table.customers-grid th.last-name,
    table.customers-grid td.last-name {
        
    }
    
    table.customers-grid th.age,
    table.customers-grid td.age {
        text-align: center;
        width: 10%;
    }
    
    table.customers-grid th.years-as-member,
    table.customers-grid td.years-as-member {
        width: 15%;
        text-align: center;
    }

Note: I've tested the included CSS here with IE7 and Firefox. There is a small issue with the Firefox rendering which I haven't bothered to fix (the left-most border is not displayed due to the different ways IE7 and Firefox collapse borders) and you will definitely need to make some changes to properly support IE6 (e.g. adding support for the :hover pseudo class on elements other than <a> using an .htc file) but they are outside the scope of this article.

So there you have it. Using this method we have freed our code-behind of nasty image injection code and made our GridViews more accessible and stylable to boot.

Download the sample project for this article here

RDN ReadiDepth: CSS Layout with ASP.NET & Visual Studio 2008

Mon, 04 Feb 2008 09:15:58 GMT

Thanks to all of those who attended my sessions on CSS Layout with ASP.NET & Visual Studio 2008 during last week's RDN tour of Australia. Most of you seemed to really enjoy it and I was glad to see many people stopping back to ask me specific questions. Great stuff. As I mentioned during my presentations I will be posting a series of articles on this blog relating to many of the topics I spoke about. Also the slides and demo solution I used are available for download here.

In the meantime, don't hesitate to drop me a line with any questions you might have.

HTML Email Article

Fri, 01 Feb 2008 03:58:35 GMT

Somebody at the Melbourne evening RDN session last night asked me about HTML e-mail. Well today I got this article in my inbox. I hope it helps you in some way.

When can we expect MS tooling & platform support for IE8?

Tue, 22 Jan 2008 12:03:01 GMT

Thinking of the lag time between versions of Visual Studio and ASP.NET I'm starting to wonder how long it's going to be before we can expect updates or new versions that better support and even promote the adoption of IE8 and its support for web standards. Today, ASP.NET 2.0 doesn't render in XHTML compliant mode unless you force it too, and Visual Studio's support for the DOCTYPE declaration is limited at best while the VS2008 ASP.NET designer can still be broken by completely valid HTML and CSS. For IE8 to truly reach its potential and have the impact it should we need updated tools and platforms from MS.

Is anybody listening?

Come see me at RDN next week to learn about CSS based layout with Visual Studio 2008

Tue, 22 Jan 2008 11:08:38 GMT

Next week I'll be travelling to Sydney, Canberra and Melbourne to deliver a ReadiDepth session on CSS based layout using Visual Studio 2008. If you've ever struggled making the leap to CSS based layout from table based layout come along to see just how easy it is to get started. I'll be covering the basics of CSS, how Visual Studio 2008 can assist you in developing CSS based layouts, wrestling ASP.NET into being more CSS friendly and my tips for web page and form layouts using clean, semantic mark-up and CSS.

The cat's out of the bag, how will IE8 support both old and new sites?

Tue, 22 Jan 2008 11:02:21 GMT

After the recent announcement regarding a pre-release version of IE8 passing the Acid2 test, I've been wondering how they were going to keep good on their promise of "don't break the web" with so many sites out there specifically designed to compensate for IE's many shortcomings. Well, Chris Wilson has just let the cat out of the bag over on the IE Blog. In short, if you want your page to render in IE8 in full hi-fidelity standards compliant wonder, you'll need to include a special <meta> tag in the page's <head>. Simple enough, and I agree with Chris' take on it regarding allowing web developers to introduce IE8 site changes on their schedule, not their users'.

I'm sure there will be those who think this method is another abomination by Microsoft but personally I think it's a step in the right direction. Writing pages to target a specific versions of browsers is what we do already, Microsoft are simply providing us with a far more elegant way to achieve this.

I personally think IE8 will herald a bigger change to the immediate future of the web than other much lauded technologies like Silverlight and RIAs. If it delivers on its promises, it will finally free up web designers and developers to more completely exploit the richness inherit in web standards today, and hopefully banish the use of table tags for layout forever!

Also checkout the great article on A List Apart regarding this latest development.

2007: A year in review

Thu, 10 Jan 2008 21:14:37 GMT

Wow, another year gone and a whole new one to think about. 2007 saw some pretty big milestones/achievements for me, including the birth of my son Fitzwilliam and the completion of my first year at Readify.

In the developer community we saw the re-birth of the Victoria.NET SIG as well as the commencement of the Readify Developer Network. My own Ballarat.NET SIG managed to hold a couple of meetings too.

I managed to do a bit of speaking this year at various events on various topics too:

Code Camp Oz: AJAX in the real world (with Paul Glavich)
ReMix WebJam: WPF Invaders
Victoria.NET SIG: Microsoft Expression Suite
Tech.Ed: Silverlight in a Flash
RDN: WPF Primer
RDN: ASP.NET AJAX Primer
Ballarat.NET SIG: ASP.NET AJAX Primer
Victoria.NET SIG: What's new for web developers in Visual Studio 2008

My blogging effort was a little poor. I started the year with good intentions but struggled to find the time or motivation to complete many of the articles I had penned titles for on my whiteboard. That's definitely something I want to improve on this year, especially with so many great new things happening in the web development space (ASP.NET 3.5 Extensions, Silverlight 2.0, Internet Explorer 8.0, etc.)

2008 is shaping up to be another big year and I hope to be involved with the developer community even more. Here are some things on the radar for the first part of the year:

Get the Ballarat.NET SIG organised and meeting more frequently so Ballarat developers can see more of the great speakers that Melbourne developers have access to;
Present at the Readify Developer Network in Sydney, Canberra and Melbourne on CSS Layout with Visual Studio 2008 (something I'm passionate about);
Present at the Readify Developer Network in Melbourne on ASP.NET AJAX Tips and Tricks;
Attend Mix 08 in Las Vegas in March, looking forward to hearing the latest about ASP.NET, Silverlight & Internet Explorer;
Present at Code Camp Oz in April, topic yet to be decided.

So make an effort this year to get down to your local user group and maybe even Code Camp Oz in Wagga Wagga. I look forward to seeing you.

I'm going to Mix 2008

Sun, 18 Nov 2007 07:20:49 GMT

I've booked my ticket and I'm going. Who else is going I wonder?

Blog links updated

Mon, 22 Oct 2007 00:27:36 GMT

I've gone back through my blog articles and updated the links to code samples and the like as many of them were no longer working after I recently changed hosting providers. If you happen to come across any I missed, just drop me a comment to let me know and I'll fix it up quick smart.

Updated: ASP.NET AJAX RDN ReadiPrimer slides & demo application available

Sun, 21 Oct 2007 08:38:11 GMT

UPDATED: These files (as well as other downloads from the RDN series) are now available from the Readify website.

You can get the slide deck and demo application I used during the recent Readify Developer Network event from here.

Readify Developer Network, Melbourne: Thursday, 18th October

Fri, 12 Oct 2007 11:26:27 GMT

So the Readify Developer Network (RDN) kicked off last week around Australia with sessions in Sydney, Canberra and Melbourne. Phil Beadle, one of our Senior Consultants, traveled to all three cities to deliver his ReadiDepth session on Silverlight for Developers, while I gave the ReadiPrimer session on WPF in Melbourne.

Next week, Dr Greg Low will be presenting the ReadiDepth session on an early look at SQL Server 2008, while I'll once again be delivering the ReadiPrimer in Melbourne, this time on ASP.NET AJAX.

If you want to come along, there are both early morning & evening sessions. Full details can be found on our website.

I hope to see you there!

Typing speed

Sun, 16 Sep 2007 11:59:17 GMT

Mitch did it, then Darren. Now I've taken the typing test.

I'm pretty happy with that, given that I'm not used to copying out great reams of repeating (or non-repeating) text.

What do you get?

Learning ASP.NET

Mon, 03 Sep 2007 12:56:22 GMT

I often get asked by people what they should do to start learning ASP.NET, that is, what bits should they look at first and what bits after that. The following is a list I put together for somebody recently that outlines a path to a good solid foundation of knowledge on ASP.NET. It doesn't include everything (mobile controls, web parts, performance tuning, deployment, web services, etc.) but it's a good start for any web developer wanting to get to grips with ASP.NET.

ASP.NET Application & Page Life Cycle
Configuration management
HTTP Modules
HTTP Handlers
Authentication & Membership providers (included and custom)
Authorisation & Roles providers (included and custom)
Pages
Server Controls (the included controls in ASP.NET)
Site Maps (included providers and custom)
Master Pages & Themes (and Cascading Style Sheets)
User Controls
Data Binding
State Management (Session, Application, ViewState, Cookies and Profiles)
Output Caching
Object Caching
Custom controls (Composite Controls & custom controls)
ASP.NET AJAX 1.0 (including client script libraries and management)
ASP.NET AJAX Control Toolkit
CSS Friendly Adapters (get the latest release on CodePlex, uses the control adapter capabilities of ASP.NET to change the HTML emitted from the built-in server controls)
Globalization support

Be sure to check out the QuickStarts site for some great tutorial material too.