MvcContrib Grid Part 7 – Auto-generated columns

This is part 7 of a series of posts on the MvcContrib grid component.

The MvcContrib grid provides a way to automatically generate columns based on the public properties of an object. This is particularly useful when you are using a dedicated presentation model where the object properties map directly to the columns that you want to display.

To make use of this feature, you can call the AutoGenerateColumns method in the Grid declaration:

<%= Html.Grid(Model).AutoGenerateColumns() %>

By default, this will generate one column per public property and the name of the property will be used as the column heading (although PascalCased properties will have spaces inserted, eg “DateOfBirth” would be rendered as “Date Of Birth”).

This output can be customised by making use of MVC2’s ModelMetadata.

Out of the box, MVC2 uses the System.ComponentModel.DataAnnotations attributes to obtain metadata about a particular type (although you can also use other frameworks). The following attributes can be used to customise the auto-generated columns:

  • ScaffoldColumn – can be used to prevent a property from being rendered as a grid column
  • DisplayName – can be used to provide a custom column heading
  • DisplayFormat – can be used to specify a custom display format

Additional columns not on your presentation model can also be added by making a call to the normal Columns method after the call to AutoGenerateColumns. For example, imagine we have a CustomerPresentationModel:

public class CustomerPresentationModel {
   public int CustomerId { get; set; }
   public string Name { get; set; }
   public DateTime DateOfBirth { get; set; }

If a collection of these objects is passed to the Grid method, then two columns will be auto-generated – one for Name and one for DateOfBirth (CustomerId is excluded because it is decorated with ScaffoldColumn(false))

If we also want to add an “Edit” link for the customer, then we could add an additional column:

<%= Html.Grid(Model).AutoGenerateColumns().Columns(extraColumns => {
        extraColumns.For(x => Html.ActionLink("Edit Customer", "Edit", new{ id = x.CustomerId });
}) %>

The additional column contains a link to the edit page for each customer. Note that while columns are automatically HTML-encoded, the grid will detect that ActionLink returns an instance of MvcHtmlString and therefore won’t encode this particular column.

Additional columns can also be re-ordered. For example, if we wanted our “Edit” link to appear before the Name/DateOfBirth then the InsertAt method could be used:

<%= Html.Grid(Model).AutoGenerateColumns().Columns(extraColumns => {
        extraColumns.For(x => Html.ActionLink("Edit Customer", "Edit", new{ id = x.CustomerId })
}) %>

Note that the InsertAt method is not contained in the latest MvcContrib release – you’ll need to build from source to get this.

I’ve also started to put together some documentation for the grid on the MvcContrib wiki.

Written on April 27, 2010