Flexigrid.Net

Past weekend, I ran into an interesting implementation of a grid using JQuery called "Flexigrid". There used to be an elegant web page with little about the plugin and a couple of examples @ http://flexigrid.info/ but this link doesn't seem to work any more !

You could view the flexigrid in action @ http://flexigrid.eyeviewdesign.com/.

The plugin offers quite a lot of useful functionality. I found a couple of resources on the web that explains how to use this grid in an ASP.NET application, but I wanted to implement my version to fix/add the following functionality:

1. An event when a row is selected
2. Sort the data that is in the view (say you are viewing 10 records out of 100 and you just want the sort to happen on the 10 records on the page). Although you could use dynamic datasource and get the sort working, I wanted to have it on a table that is intialized on the page and without having to get data from a server component.
3. A user control with flexigrid that lets you define the columns that you want to show, no matter how many ever columns are returned in the dataset

I tried my hand to build an ASP.NET website that uses Flexigrid (modified a bit to include the above two items, and I have used TinyTableSorter javascript to accomplish sorting) and the data for the grid comes dynamically from AdventureWorks database through an ASP.NET web form. The motto was to let a developer just place a user control and define the columns that should be visible without having to write flexgrid documented javascript on the page (except for sorting, as I am using another javascript to do this).

Currently the web form in the POC sends data as JSON string and I shall extend it to send XML too, sometime in future :) In the meantime, check out this code project article.

Here is the example for you to download :)