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.

$(document).ready(function () {
   $("#divMyGrid").jqGrid({
      ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
      prmNames: {
         rows: "numRows",
         page: "pageNumber"
      },
      colNames: ['Id', 'File Name', 'Uploaded By', 'Uploaded On', 'Size', 'Status'], //define column names
      colModel: [
         { name: 'id', index: 'id', key: true, width: 100 },
         { name: 'fileName', index: 'fileName', width: 400 },
         { name: 'uploadedBy', index: 'uploadedBy', width: 200 },
         { name: 'uploadedOn', index: 'uploadedOn', width: 200 },
         { name: 'size', index: 'size', width: 50 },
         { name: 'status', index: 'status', width: 50}
      ], //define column models
      datatype: function (postdata) {
         var dataUrl = 'IgroupUploaderService.svc/GetAllFiles'
         $.ajax({
            url: dataUrl,
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify(postdata),
            success: function (data, st) {
               if (st == "success" && JSON.parse(data.d.indexOf("_Error_") != 0)) {
                  var grid = $("#divMyGrid")[0];
                  grid.addJSONData(JSON.parse(data.d));
               }
            },
            error: function () {
               alert("Error while processing your request");
            }
         });
      },
      pager: '#divPaging',
      sortname: 'id', //the column according to which data is to be sorted(optional)
      viewrecords: true, //if true, displays the total number of records, etc. as: "View X to Y out of Z” (optional)
      sortorder: "asc", //sort order(optional)
      caption: "Files", //Sets the caption for the grid. If this parameter is not set the Caption layer will be not visible
      multiselect: true,
      rowNum: 20,
      loadonce: false,
      autowidth: true,
      shrinkToFit: true,
      height: '100%',
      rowList: [10, 20, 30, 50, 100],
      sortable: true
   }).navGrid("#divPaging", { search: true, edit: false, add: false, del: false }, {}, {}, {}, { multipleSearch: false });
});

In the success function, we bind all the data to the jqGrid by calling grid.addJSONData.



jqGrid provides multiple features, such as inline editing, searching, filtering and sorting and so on. But in this article we only discussed the binding of a JSON object to a jqGrid using WCF services in an ASP.NET web application. I hope it helps you all in getting started with jqGrid.