I was very pleased with the code of my MVC application, but the presentation was so 1990's. With all of this new technology I thought the presentation deserved something snappy. That is when I found Flexigrid.
As I mentioned in my last blog entry, I started to use jQuery. To my joy, Flexigrid is a jQuery plugin! Flexigrid uses jQuery to asynchronously populate the contents of the grid using either XML or JSON input.
The following is an example of what the grid looks like. It contains features to sort, page, search, move columns, resize, etc…

The User Interface portion was pretty straightforward to put together. You just need to define your columns, the data source, and some additional parameters (such as: search terms, size, etc…).
I wanted to use this opportunity to try out some new features of .NET 3.5, so I wanted to incorporate LINQ and JSON serialization.
To do this, I needed to setup some classes that the Flexigrid will recognize once serialized. Here is what I came up with.
1: public class FlexigridViewData
2: {
3: public int page;
4: public int total;
5: public List<FlexigridRow> rows = new List<FlexigridRow>();
6: }
7:
8: public class FlexigridRow
9: {
10: public long id;
11: public List<string> cell;
12: }
1: public void Page_Load()
2: {
3: Response.Clear();
4: Response.ContentType = "text/x-json";
5: Response.Write(GetPagedContent());
6: Response.Flush();
7: Response.End();
8: }
9:
10: private string GetPagedContent()
11: {
12: var pageIndex = Convert.ToInt32(Request.Params["page"]);
13: var itemsPerPage = Convert.ToInt32(Request.Params["rp"]);
14: var sortName = Request.Params["sortname"];
15: var sortOrder = Request.Params["sortorder"];
16: var query = Request.Params["query"];
17:
18: IEnumerable<Contact> pagedContacts;
19: if (string.IsNullOrEmpty(query))
20: {
21: pagedContacts = sortOrder.Equals("asc") ?
22: Contacts.OrderBy(contact => contact.GetPropertyValue<IComparable>(sortName)) :
23: Contacts.OrderByDescending(contact => contact.GetPropertyValue<IComparable>(sortName));
24: }
25: else
26: {
27: Func<Contact, bool> whereClause = (contact => contact.GetPropertyValue<string>(sortName).Contains(query));
28: pagedContacts = sortOrder.Equals("asc", StringComparison.CurrentCultureIgnoreCase) ?
29: Contacts.Where(whereClause).OrderByDescending(contact => contact.GetPropertyValue<IComparable>(sortName)) :
30: Contacts.Where(whereClause).OrderBy(contact => contact.GetPropertyValue<IComparable>(sortName));
31: }
32: int count = pagedContacts.Count();
33: pagedContacts = pagedContacts.Skip((pageIndex - 1) * itemsPerPage).Take(itemsPerPage);
34:
35: const string imageLinkFormat = @"<a href=""{0}""><img src=""{1}"" border=""0"" /></a>";
36: const string imageFormat = @"<img src=""{0}"" border=""0"" />";
37: var flexigrid = new FlexigridViewData {page = pageIndex, total = count};
38: foreach (var contact in pagedContacts)
39: {
40: flexigrid.rows.Add(new FlexigridRow
41: {
42: id = contact.ID,
43: cell = new List<string>
44: {
45: string.Format(imageLinkFormat, ResolveUrl("~/Contact.mvc/Detail/" + contact.ID),
46: ResolveUrl("~/Images/Detail.gif")),
47: contact.ID.ToString(),
48: contact.FirstName,
49: contact.LastName,
50: contact.DateOfBirth.ToShortDateString(),
51: }
52: });
53: }
54:
55: return flexigrid.ToJson();
56: }
1: public static class JsonHelper
2: {
3: public static string ToJson(this object obj)
4: {
5: var serializer = new JavaScriptSerializer();
6:
7: return serializer.Serialize( obj );
8: }
9:
10: public static string ToJson(this object obj, int recursionDepth)
11: {
12: var serializer = new JavaScriptSerializer();
13:
14: serializer.RecursionLimit = recursionDepth;
15:
16: return serializer.Serialize( obj );
17: }
18: }
1: public static T GetPropertyValue<T>(this object component, string propertyName)
2: {
3: return (T) TypeDescriptor.GetProperties(component)[propertyName].GetValue(component);
4: }
I would prefer if the developer of the product had a better system of tracking bugs and maintaining a forum, but in the meantime what is setup is sufficient.