A first look at Flexigrid (using it with WebMatrix and Json)

We all need a nice grid to display data from time to time. I found out at Stackoverflow that Flexigrid has some popularity and the images I saw of Flexigrid in action impressed me.

This is a brief introduction post describing a way to use it for basic display of data in a WebMatrix (WebPages) web site. (I soon need the update functionality, and I hope I’ll be able to try that out and blog about in a few days.)

Let’s say we have a datatable with the columns id, name and address. We can retrieve the data with the standard WebMatrix.Data library and display it with the WebGrid helper this way:

  var db = Database.Open("myConnection");
  var sql = @"SELECT * FROM items";
  var data = db.Query(sql)
  var grid = new WebGrid(data);

It works, but is not exactly pretty:

If we use Flexigrid instead we get a much nicer result:

To accomplish this we need the flexigrid js and css files from the Flexigrid site.

I downloaded the zip, and extracted the two folders js and css to the root of my web site. Then I added reference to them and to jQuery in my demo page:

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8" />
    <title>Flexigrid demo</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script src="js/flexigrid.pack.js"></script>
    <link href="css/flexigrid.pack.css" rel="stylesheet" type="text/css" />

The Flexigrid needs an empty table tag and is initialized with a javascript function – together with information about the data columns, behaviours and looks of the grid.

I used a Flexigrid-sample and only changed it slightly to handle my columns (id, name, address) + the url for fetching the data.

The code is pretty self explanatory:

<table id="flex1" style="display: none">
<script type="text/javascript">
        url: '/data.cshtml',
        dataType: 'json',
        colModel: [
            { display: 'id', name: 'id', width: 40, sortable: true, align: 'center' },
            { display: 'name', name: 'name', width: 180, sortable: true, align: 'left' },
            { display: 'address', name: 'address', width: 120, sortable: true, align: 'left' }
        searchitems: [
            { display: 'name', name: 'name' },
            { display: 'address', name: 'address', isdefault: true }
        sortname: "name",
        sortorder: "asc",
        usepager: true,
        title: 'Names',
        useRp: true,
        rp: 15,
        showTableToggleBtn: true,
        width: 700,            
        height: 200

Fetching the data from
The data is being fetched with the help of an Ajax call, the url is specified in a parameter as in the code above. The data format is prefferably Json.

The Json needs to follow this format:


To construct the actual Json I added a data.cshtml file, where I’m using the WebMatrix Json helper over an anonymous object like this (the code here also includes paging functionality):

    var db = Database.Open("myConnection");
    var sql = @"SELECT * FROM items";
    var data = db.Query(sql).ToList();

    var pageLength = 15;
    var page = Request["page"].AsInt();   
    if (page==0) {page = 1;}

    var flexiGridItems = new
        total = data.Count,
        page = page,
        rows = from n in data.Skip(pageLength*(page-1)).Take(pageLength)
               select new { id = n.id, cell = n }

    var json = Json.Encode(flexiGridItems);

That is all that’s necessary to get the nice Flexigrid up’n running in a WebMatrix (WebPages) web site.

In my next blog post I will explore the data updating functionality of Flexigrid.

Happy coding!

3 thoughts on “A first look at Flexigrid (using it with WebMatrix and Json)

  1. Joeriks

    I would like to use Flexigrid within a websire that I am developing with Webmatrix. I have copied your code but when I run it, I get a blank screen. Would it be possible for you to send me a copy of the files you used?

  2. The model of this article works fine. We are able to retrieve the json data. But the flexigrid displays undefined in all the cells. Kindly advise!

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s