A Simple JqGrid Demo Using WCF

jqGrid provides a way for representing and manipulating tabular data on the web using AJAX. jqGrid can be used with any server-side technology, including ColdFusion, Perl, PHP, ASP, Java Servlets and JSP, since it is a client-side solution loading data dynamically using Ajax callbacks.

jqGrid's home page can be found here.

In this article we will see how to work with jqGrid and WCF in an ASP.NET application. Here we will bind a JSON object to a jqGrid using WCF.

Working with jqGrid mainly consists of the following three steps.

1. Adding references

First, we need to download jqGrid from here. Then add the references to the page as shown below.



2. Placement in the HTML

We need to place an empty <table> tag with a unique id in our HTML where we want the jqGrid to appear. The paging is optional. But if we need pagination we need to add a <div> tag too with a unique id along with the <table> tag. As shown below.



Here the table tag and div tag for pagination has been used.

3. Grid setting

This is the most important step, here we define the grid, the number of columns, type of columns and so on.



Then, we need to create an AJAX-enabled WCF Service in our ASP.NET web project. We need to create a method and add the following attributes to the method.





And we also need to define an ajax call in our script file. The following code shows how to.