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'],
- 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}
- ],
- 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',
- viewrecords: true,
- sortorder: "asc",
- caption: "Files",
- 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.