Building Easy jQuery Grids with Wijmo

Grids are one of the most commonly sought after plugins for web sites. There are a huge variety of them out there, and they all work a little bit differently. Grids and visualizations have been something ComponentOne has been doing for a long time, and we pride ourselves in our ability to give you easy solutions that will impress. Wijmo Grid is a jQuery plugin that let’s you get up and running quickly with beautiful theme-rolled Grids. In this post, we’ll explore how to set up a grid from an existing table, and add powerful features such as sorting and paging. Since I’m writing this post in an airport, let’s use the example of a flight tracker board. We’ll have a table containing cities, gate numbers, statuses, and departure times.

When rendered normally, here's how the grid looks (note: I’m using the Studio for MVC Wijmo CTP project template to enable the styles): This is a nice looking grid, but we can easily enhance it with a little bit of Wijmo magic. In the JavaScript section of our page, I’ll write the following code:

$(document).ready(function () {
     $("table").wijgrid();
});

This code will turn our table into a Wijmo grid. You’ll see the ThemeRoller theme for my page has already been pulled in and applied. By default, I get row selection and highlighting. That’s nice, but let’s go a step farther and add client side sorting to this page. In my JavaScript, I’m going to alter the call to WijGrid a little bit.

$(document).ready(function () {
    $("table").wijgrid({
        **allowSorting: true**
    });
});

And there you go! With one more line of code, I’ve added client side sorting. Finally, grids are meant to hold a lot of data efficiently. One of the most efficient ways to display a lot of data is with pages. To add paging to a WijGrid, all you need to do is alter your JavaScript like so:

$(document).ready(function () {
    $("table").wijgrid({
        allowSorting: true,
        **allowPaging: true**,
        **pageSize: 5**
    });
});

Our end result, with paging and sorting enabled looks like this: And that’s all there is to it! In upcoming posts, I’ll show you how to get a little more fancy with your grids. And of course, if you have any questions, please feel free to ping me directly. Kevin Griffin keving@componentone.com Follow me on Twitter @1kevgriff