In my previous posts you can see that I love jqgrid.
And because I like it that much, this is a small tutorial of how I use it.
Describe your data
I’ve created an abstract class with the properties Id and Timestamp.
When using databases an Id is the minimum requirement for an object.
The timestamp can be used to see if the object is changed between the read and update.

The BinaryTimestamp is just serializable wrapper for the byte array.
The dto itself is pretty simple.

That’s the dto part. So if we have a grid we want to filter the data right?
How do we pass the data from grid to repository
Ok, First of all.I want to generate javascript code to set the filter on load of the grid.
So I defined a interface with a method GenerateJavascriptFilter with returns a string.
Every filter has to implement this method.

In the filter I define the parameters given by the grid.
Some parameters are nullable because we want to filter on a subset of property and not necessarily on all parameters at ones.
And the format of the javascriptfilter for the grid.

That’s just enough to filter the data.
Create pages of data
Most of the time we don’t want to give the user al the data at ones. So we implement paging.
There are 2 parts in this one. Giving the paged result to the ui and give paging data back to repository.
This is the class I use for passing the result to ui.
It has 3 integers: the requested pagenumber, the number of rows requested and the total amount of items found.
and off course the last an IEnumerable of items with contains all results of the requested page.

For passing the paging data to the repository, I’m using following object.
very simple, just the requested pagenumber and the amount of rows we want.

Sorting data
Ever seen a business application that can’t sort data?
Me neither 
So below the sortdescriptor, just the name of the column to sort and the sortorder.

The fun part: UI
Ok, we are almost there.
Let’s convert the pagedresult to a json structure.
I’m using this extension method.

So now is everythin ready for creating the grid itself.
This the HTML part. A div with a height of 200p, a table to fill with data and a div for the pager.

The grid definition.

Defining the custom buttons and the initial search status.

Method to define the initial loaded search.

The source code is downloadable here.