jqGrid and Flat JSON Data with Paging

A coworker was tasked with finding a good client-side grid for displaying and editing data from WCF services. We’ve had a little experience with WCF services and JSON serialization of simple data to generate some custom HTML but until now we hadn’t touched grids. Typically we’d use a 3rd party ASP.NET control inside a web application but lately we’ve been trying to be a little more lean.

I haven’t done any research into grids myself so I’m taking it on faith that jqGrid is alright for us. Right out of the gate there was some trouble getting the JSON data to be in a format the grid appreciated. Since we didn’t fancy the idea of boxing all our services into returning data in this format we had to get the grid to work with our format.

I went from knowing nothing about this grid to having 20 tabs open on various sites trying to find any information I could regarding options for making the grid work with our data. It is shocking how much information is out there but I didn’t find a single source that put it all together. It was through pure persistence I found a reference to jsonReader and then found the properties it expects.

So, dear Internet, here’s my gift to you.

jqGrid Configuration – jsonReader

To start I assume you already have your JSON available to be called from jqGrid. Using local data requires some different configurations on the grid and I’m unsure if this will affect the configuration. Just paste a JSON representation of your data into a file and put it in a folder you can access from the browser.

Configure the jqGrid like every other example you see (according to the new API standard) as below:

<script type="text/javascript">
  var grid;

  $(function () {
    grid = $("#list");

    grid.jqGrid({
      url: "http://example.org/jsonDataService",
      datatype: "json",
      height: "auto",
      colNames: ['Title', 'Description'],
      colModel: [
        { name: 'Title', width: 150, sortable: false },
        { name: 'Description', width: 500, sortable: false }
      ],
      rowNum: 10,
      rowList: [5, 10, 30],
      rownumbers: true,
      gridview: true,
      loadonce: true,
      pager: "#page",
      caption: "Flat Data Example"
    }).jqGrid('navGrid','#page',{edit:false,add:false,del:false});
  });
</script>

Now for the important part – jsonReader. This appears to have been introduced a few versions ago – along with xmlReader – to allow custom parsing of JSON data for the grid to render. This is where all (most) of the magic happens. For our example we also need loadonce: true to be set for paging to work properly.

Here’s an example of the JSON flat array returned from the URL configured on the grid:

[{ "Title": "First", "Description": "First Entry"},
{"Title": "Second", "Description": "Second Entry"}]

Here’s the jsonReader settings I’m using in context of the jqGrid config:

loadonce: true,
jsonReader: {
  repeatitems: false,
  root: function (obj) { return obj; },
  page: function (obj) { return grid.jqGrid('getGridParam', 'page'); },
  total: function (obj) { return Math.ceil(obj.length / grid.jqGrid('getGridParam', 'rowNum')); },
  records: function (obj) { return obj.length; }
},
pager: "#page",

The configuration options are really simple and using the jqGrid new API to query out the values stored in the grid itself we’re able to be completely dynamic.

Here we’re telling the grid the root of our data – the source array that should be used for the rows – is the JSON response itself. Records should return how many records (rows) the grid will use.

The two critical settings for which I was unable to find an example are page and total. Most of the sources I found just hard-coded the return to the number 1. This is obviously not workable if you have more records (rows) to display than a single page can show.

I was able to guess the grid’s variable name for our current page. Why this isn’t automatic, I don’t know. Maybe if I omitted this it would be? I leave this as an exercise for the reader but for our purpose this is all we need for page.

Total was the hardest to get working. I took a stab that the setting for rowNum in the jqGrid setup would be updated when a new option was selected in the pager control. It is! With that we can calculate the total (number of pages the grid needs to display all the rows) with a simple round-up of the records (rows) divided by rowNum (number of rows to show in a page).

Now that we can query out some state from the grid for use in our jsonReader configuration, we’re able to simulate the data the grid would normally pull from the original JSON data and paging works quickly and beautifully.

In case you’re wondering what the HTML looked like in my demo page:

<body>
 <div id="jQGrid">
  <table id="list"></table>
  <div id="page"></div>
 </div>
</body>

I’m sure there are more options that could be used to allow on-demand loading of data but unfortunately our time constraints did not permit me to go down that road. For our needs where all our data originates within 1 hop of our clients and the data itself is compact, loading all the data at once is acceptable. That said, I’d love to see what other cool features we can get from the grid but it’ll be my coworker that gets to have that adventure for now.

Happy JSON sourced client side gridding,
-Erik

Advertisements

5 responses to “jqGrid and Flat JSON Data with Paging

  1. thank you so much I have been struggling with the client side paging for days..

  2. Thanks this me helped me a lot.

  3. Hi! The prev and next buttons doesn’t work for me… Can you explain me how it works? I think it’s because when the data is loaded, the jqgrid prev and next buttons call to dthe webmwthod again…

    • Are you setting `loadonce` to true when configuring the grid? This should tell the grid that the data is a full, complete set. It will then operate over that data for the purposes of paging.

      For our use, we’re loading all the rows so paging is handled locally but we’re using server-side AJAX methods for filtering and sorting. This is because I wasn’t able to figure out custom sorting (using a data column that isn’t shown as the sort source when a user tries to sort a specific visible column).

      This has been working as expected and I don’t think we had any trouble with it.

  4. Respected Sir, It will be a Great Gift for all of us if you provide complete code of CRUD operations. Looking forward to hear from you soon.

Leave a Reply

Fill in your details below or click an icon to log in:

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