Introducing the Smart Grid for ASP.NET MVC
May 21, 2008 – 11:45
Edit: Some documentation for the Grid is now available at the MvcContrib Wiki.
I’ve recently been working on an equivalent of the ASP.NET GridView for use with ASP.NET MVC.
This is partially inspired by the SmartGrid component which is part of the Castle Contrib project, but uses lambdas in order to build up a set of columns that can be automatically turned into an HTML table. For example, I might have this in an ASP.NET MVC Controller:
public class HomeController {
private UserRepository repository = new UserRepository();
public ActionResult Index() {
ViewData["users"] = repository.FindAll();
return RenderView();
}
}
Then in my View I could have this:
<%
Html.Grid<Person>(
"people",
column => {
column.For(p => p.Id);
column.For(p => p.Name);
column.For(p => p.Gender);
column.For(p => p.RoleId);
}
);
%>
Which would create something like this:

Note how the column names are automatically generated from the lambda expressions. However, you can override a column heading:
column.For(p => p.Id, "ID Number");
You can also create custom columns using lambda statements…
column.For("Custom Column").Do(p => { %>
<td>A custom column...</td>
<% });
…and columns can have formatting applied to them:
column.For(p => p.DateOfBirth).Formatted("{0:d}");
Pagination is also fully supported by using the AsPagination extension method which works on any IEnumerable<T> or IQueryable<T>
public ActionResult Index(int? page) {
ViewData["users"] = repository.FindAll().AsPagination(page ?? 1);
return RenderView();
}
Which would produce something like this:

The source code is available in the mvccontrib trunk.
8 Responses
Hi Mike
So long as your custom pagable list implements MvcContrib.Pagination.IPagination then it should work fine with the grid.
Jeremy
Hi Jeremy,
I like it. I’ll try and work it into my Suteki Shop project, but I guess I may have to abandon my custom pagable list for the paging to work
Mike
Can’t get the grid to work. Using Preview 3 of MVC framework. Errors range from the grid not being recognized as an extension to HtmlHelper (I have the namespaces in the web.config file) to (when I did have it recognized – on a work project) getting a null reference.
Can you offer any help? I have followed all instructions as outlined in the docs and this web page.
Hi Charles,
Could you post a message to the mvccontrib mailing list? I’ll be able to help you better there.
Thanks
does this grid support sorting??
Not out of the box, but it is fairly easy to add by using something like the jQuery DataTable plugin (http://blogs.msdn.com/paulwhit/archive/2009/03/28/walkthrough-full-example-of-using-mvccontrib-grid-with-jquery-datatable.aspx)
Is it possible to nest this grid? Couldn’t find any example over the net.
Hi Amit,
I’m pretty certain it should be possible to nest grids, although it’s not something I’ve tried.
Check out the ‘Partial’ method that allows you to render a partial view for a table cell. There’s no reason why one of these partials couldn’t also contain a grid.
Jeremy