Author: Craig Stuntz
Having introduced jqGrid and written LINQ extension methods to make supplying data to the grid easy, we’re now ready to put together a demo application. The solution I’m going to build demonstrates sorting and paging. In a future post, I will enhance it to demonstrate search, formatting, and editing data. I’ve made the demo application available for download, but be advised that I intend to update it in the next few days; it’s currently a work in progress.
Rather than make you set up the Northwind database, I’ve written a quick, mock repository which supplies random data for the application. But the data persists for the lifetime of the app, so I’ll be able to demonstrate sorting, paging, etc. This way you can just run the application, without having to set up SQL Server.
So let’s write some code display a grid.
The data I’m going to display in the grid is a fairly useless type:
[crayon-6739ffd6d5549934029050/]
We need two actions. The first will display the page containing the grid. The second supplies data for one page of the grid. Remember, the grid can page through large datasets. It will only request one page of data at a time.
The first action simply returns a view containing the HTML table which will eventually become the grid. It doesn’t need a model, because the grid will request its data asynchronously. The second action handles the data requested by the grid.
In order to make this work, we need HTML elements for the grid and its pager in the view, along with a reference to the JavaScript which will turn those elements into the grid.
[crayon-6739ffd6d5552523271392/]
The JavaScript file is where the grid itself is configured.
[crayon-6739ffd6d5555219607579/]
Important to note here are:
colNames, the grid column captions the user sees.
colModel,which includes the propertyname, which is the field name in the returned JSON data which supplies the data for that column, andindex, which is the name which will be sent to theGridDemoDataaction as thesidx(field name to sort on) argument when you click on a grid header. There are a number of other properties you can set here which control editing, with, formatting, etc. See the documentation for full details. Importantly,colNamesandcolModelmust have the same number of entries, and be in the same order.
url, which tells the grid where to get its data. You’ll notice that the value I’ve passed is the name of the second action.
As I mentioned in the last post, I set a number of the grid options in a script referenced by the Site.Master, in order to prevent having to set them on every grid I create. The configuration idea for the grid on an individual page should be only the things that are unique to that page. So there is a fair bit of configuration for the grid which is not included here. In addition, the Site.Master contains references to the grid’s JavaScript and CSS files.
Finally, it’s worth mentioning that when you add jqGrid to a project you need to edit the jQuery.jqGrid.js file to tell the grid where to find the rest of the JS files it needs. Once you look at this file, it is obvious what you need to change.
At this point, I’m going to make the demo application available for download, so that you can experiment with it yourself. However, I’ll caution that I intend to update it when I write the next post in this series. In other words, the current download is a work in progress. It will change in the next few days.
Download the Solution (587 KB)
So let’s run the solution and see what we get:
OK, the hideous and eyestrain-inducing clash between the default MVC theme and the jQuery UI “lightness” theme included with the grid download notwithstanding, this is actually not bad. Sorting and paging both work, and performance is very good.
But what’s the deal with the data in that date column? It turns out that there is no standard representation of a date in JSON, so Microsoft invented their own. The grid doesn’t know about this special format. We’ll clean that up in the next post in this series and also cover search. Stay tuned!