Introduction

This article presents a simple example on how to use jQuery Grid Plugin in MVC.

Background

This is the part one of the article to present an example on how to use "jQuery Grid Plugin". The example will show you how to implement a read-only grid. This article tries to answer the following questions:

What is the minimum set of the JavaScript libraries and CSS styles that you need to download to use "jQuery Grid Plugin".

How to implement a basic grid.

How to implement the paging, sorting, and searching capabilities for the grid.

The "jQuery Grid Plugin" uses "Ajax" calls to obtain the data from the server to display. We can use many platforms such as "PHP" to implement the server code to serve the "Ajax" calls. In this example, the server code is implemented in an ASP.NET "MVC" controller.

This article assumes that you have some basic knowledge in "jQuery" and "MVC". If you are new to these subjects, you can easily find reference materials over the internet.

The Visual Studio Solution

To create a minimally functional grid using the "jQuery Grid Plugin", you need to download the following components:

You will need the "jQuery" script library. You can download it from here. The version used in this example is "1.6.2".

You will need the script library and some CSS styles from the "jQuery Grid Plugin". You can download them from here. At minimum, you will need the two JavaScript files "jquery.jqGrid.min.js" and "grid.locale-en.js". You will also need the CCS file "ui.jqgrid.css". The "jQuery Grid Plugin" used in this example is version "4.1.2".

The "jQuery Grid Plugin" uses some of the CSS styles from the "jQuery UI". You can download the "jQuery UI" from here. To create a basic grid, you do not need the JavaScript file from the "jQuery UI". You will only need the CSS style. The CSS styles from the "jQuery UI" come in different "themes". The "theme" used in this example is "redmond". The CSS styles used in this example come from the version "1.8.14".

In the solution explorer, you can see that I put all the downloaded JavaScript files in the "Scripts" folder and all the downloaded CSS style sheets and image files in the "Content" folder. Besides the downloaded files, the following files are related to the creation of the grid using the "jQuery Grid Plugin" in this example:

The "StudentRepository.cs" in the "Models" folder is the application's data model. It maintains the data for the grid to display.

The "Default.htm" is the file where the grid is created. It has the HTML components and the JavaScript code to create the grid.

The MVC controller "jQGridController.cs" in the "Controllers" folder implements the server code to serve the "Ajax" calls issued by the "jQuery Grid Plugin".

The sole purpose of the MVC controller "HomeController.cs" in the "Controllers" folder is to make the "Default.htm" file the default web page of this MVC application. If the user does not specify the controller and the action in the url, this file is responsible to re-direct it to the "Default.htm" page. The "HomeController.cs" is implemented as the following:

The JavaScript and CSS files downloaded from the web are referenced in the beginning of the "Default.htm" file.

The HTML "table" "jqTable" and the HTML "div" "jqTablePager" are the HTML elements needed to generate the grid.

In the "$(document).ready" event, the JavaScript code calls the "jqGrid()" function from the "jQuery Grid Plugin" to create the grid.

When we create the grid, we can pass many parameters to the "jqGrid()" function through a "Json" object. In this example, I passed the following information to this function:

The parameters for the "jQuery Grid Plugin" to issue "Ajax" calls. In this example, all the calls from the grid to the server will go to the action method "LoadjqData" in the "jQGrid" controller.

The names of the columns in the grid.

The configuration information for each column through the "colModel" parameter.

The information needed for the paging.

By default, sorting is enabled for all the columns in the grid. We only need to specify the default sorting column and sorting order.

In the function call to "navGrid()", we can further configure the behavior of the grid. For simplicity, I disabled the editing capabilities so we can focus on creating a read-only grid using the "jQuery Grid Plugin". By default, the search capability is enabled for the grid and the "jQuery Grid Plugin" provides us a long list of search operations. In this example, I will only demonstrate how to implement the "contains" type of search by limiting the search options using the "sopt" parameter.

The "jQGridController" Controller

The server code that sends the data to display in the grid is implemented in the "jQGridController.cs":

In this example, the "jQuery Grid Plugin" will make "Ajax" calls to the action method "LoadjqData" to get the data to display in the grid. All the "Ajax" calls to the server are automatically initiated by the "jQuery Grid Plugin", we do not need to call the "$.ajax()" method directly in our code to set up the grid. The "Ajax" calls will pass all the information that the server needs to prepare the data through the function parameters, such as the information required for sorting, paging, and searching. Using the information in the function parameters, the "LoadjqData" method goes through the following steps to send the data to the grid:

It first retrieves the whole list of students from the "StudentRepository".

If search is required, it will get a sub-set of the students based on the search criterion.

It then sorts the filtered student list and calculate the total number of the pages needed to display the data for the given page size.

At last, it prepares the data in the format that is recognized by the "jQuery Grid Plugin" and sends the data to the web browser in a "Json" object.

The "SortIQueryable" method is a utility method that helps to sort the list of the students. My implementation of the "LoadjqData" method is based on that the students are saved in memory and there is no "index" on the data. You do not need to implement it the same way if your data is stored in the database and the data is well indexed. You may take advantage of the indexes in your database to improve the speed. In practice, although not always, retrieving data from a well indexed database may prove faster than manipulating the data cached in the web server's memory.

Run the Application

Now we finish the implementation of a minimally functional grid, let us take a look at how it looks like in the web browser. You can debug run this example in your Visual Studio. When the application launches, the grid is shown in the browser. By default, the grid is sorted by the "Id" column in ascending order.

If you click on the header of the "Id" column, you can see that the sorting order is changed and the student with the largest "Id" number is shown at the top.

To save some space for the "CodeProject", I am not going to post all the pictures when testing this grid. But if you run the application by yourself, you can test all the sorting, paging, and searching capabilities implemented in this example.

Points of Interest

This is the part one of the article to present an example on how to use "jQuery Grid Plugin".

When you finish reading this article, you should know the minimal set of JavaScript libraries, CSS styles, and images that you need to download to create a basic grid using the "jQuery Grid Plugin". You should also know how to implement the basic sorting, paging, and searching capabilities for the grid using an "MVC" controller.

The "jQuery Grid Plugin" is a very flexible and powerful JavaScript library and you can create complex grids upon it. This article only shows you how to create a very simple grid to help you get started.

I hope you like my postings and I hope this article can help you one way or the other.

Hi,
I am quit new with JavaScript/jQuery. I am trying to refresh my jqGrid using "setInterval" that JavaScript provides. My jqGrid is getting data updated continuously from database but I don't see any changes in my UI. I did like that but it's not working, can someone help me please ?

Hi I want to implement jquery grid in mvc3 razor engine , I implemented the same but having issues while binding the data , Do this relate anything with the htm page u r using while I'm using razor engine ?

I do not think that Razor will make much difference, since basically how the grid works relies on only HTML, javascript, and json. But you may want to check if the razor gives you the same HTML, and json or may be you have a bug on your own?

Basically I believe that you should be able to use razor and the grid together. You may need to go some try & error type of experiment and look into the HTML & json though.

This is really great. I can't get it to work though unless I have 4 columns. Is it possible to reduce or increase the number of columns? It breaks when I modify the colNames and colModel's number of columns in the Default.htm file. For example I deleted the last column from the colNames and colModel in the Default.htm file and only have 3 column names in the jQGridController.cs in the "Prepare the data to fit the requirement of jQGrid" section. And I modified the width in the Default.htm file. It breaks the app.

I believe that you can add more columns with this grid though. Take a look at the controller to see how the data is passed over to the client. If you have more columns, say 5, you will need to have 5 items in the cell array when you "Prepare the data to fit the requirement of jQGrid".

I gave up this grid is because when I try to make it to be editable (CRUD), it is not easy to use. If you want a read-only grid, this one should be fine.

I later found another jQuery based grid and studied its source code. I have full control on how I want it to be by changing the source code. I gave up jQgrid in my projects and later usage. jQgrid is simply too much on its own. If you still want to use it, you can find the paid version jQgrid. It is much nicer for CRUD type of operations. If I have time, I may release my version of jQuery based grid later.