Here is the example of integrate your Jgrid with REST webservice.
Firstly in your HTML Page. you just need this.
<asp:Content ID="Header" ContentPlaceHolderID="head" runat="server">
<link href="/scripts/js/jQuery/jqGrid/themes/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="/scripts/js/jQuery/jqGrid/themes/redmond/jquery-ui-1.8.2.custom.css"
rel="stylesheet" type="text/css" />
<!-- must have locale before jqGrid-->
<script src="/scripts/js/jQuery/jqGrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="/scripts/js/jQuery/jqGrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
//Get Data For JQGrid because we use data Service
function getData(postData) {
//add more parameter
postData.pCatId = '<%=RequestProductCategoryID %>';
//show loading button
$("#load_jqGridTable").show();
//alert(JSON.stringify(postData));
jQuery.ajax({
type: "POST",
url: "/usercontrols/CMS/Webservices/DataService.asmx/LoadJqGridDataProductList" ,
data: JSON.stringify(postData), //we can inject whatever data here
contentType: "application/json; charset=utf-8",
dataType: "json",
//success: function (msg) { alert('success' + msg); },
//use this complete.
complete: function (data, stat) {
//hide
$("#load_jqGridTable").hide();
if (stat == "success") {
var jg = $("#jqGridTable")[0];
//alert('jg : ' + jg);
//note. this example is from a NON-ASP.Net web service.
//there your data is wrapped into dictionary with only one key - '
var t = JSON.parse(data.responseText)['d'];
//alert('t : ' + t);
//alert('t.Name :' + t[0].Name);
//var str = {"page":"1","total":"1","records":"1","rows":[{"id":"1","cell":["True","Product1","1","random"]}]};
//jg.addJSONData(str);
jg.addJSONData(t);
}
else
{
alert('loading data: ' + stat + ' : ' + data.responseText);
}
}
/* this will be handle inside complete
error: function (context) {
alert('error loading data: ' + context.responseText);
}
*/
});
}
jQuery(document).ready(function () {
//jqGrid Defination
jQuery("#jqGridTable").jqGrid({
// the url parameter tells from where to get the data from server
// adding ?nd='+new Date().getTime() prevent IE caching
//url: requestURL,
// datatype parameter defines the format of data returned from the server
// in this case we use a JSON data
//datatype: "json",
//We use JSON Web Service so need to use this
datatype: getData,
// colNames parameter is a array in which we describe the names
// in the columns. This is the text that apper in the head of the grid.
//colNames: ['Publish', 'Name', 'ID', 'Last Modified','ActionLinks'],
colNames: ['Active', 'Name', 'ID', 'Last Modified'],
// colModel array describes the model of the column.
// name is the name of the column,
// index is the name passed to the server to sort data
// note that we can pass here nubers too.
// width is the width of the column
// align is the align of the column (default is left)
// sortable defines if this column can be sorted (default true)
colModel: [
{ name: 'Active', index: 'Active', width: 60, align: "center" },
{ name: 'Name', index: 'Name', width: 470 },
{ name: 'ProductID', index: 'ProductID', width: 95 },
{ name: 'LastModifiedDate', index: 'LastModifiedDate', width: 95 }
//{ name: 'ActionLinks', index: 'ActionLinks', width: 195, sortable: false }
],
// pager parameter define that we want to use a pager bar
// in this case this must be a valid html element.
// note that the pager can have a position where you want
pager: '#jqGridPager',
// rowNum parameter describes how many records we want to
// view in the grid. We use this in example.php to return
// the needed data.
rowNum: 30,
// rowList parameter construct a select box element in the pager
// in wich we can change the number of the visible rows
rowList: [10, 20, 30],
// path to mage location needed for the grid
//imgpath: rootFolder + '/js/jqGrid/themes/bCommerce/images',
//viewrecords defines the view the total records from the query in the pager
//bar. The related tag is: records in xml or json definitions.
viewrecords: true,
caption: "Products",
//height: "100%",
hidegrid: true,
// Set initial grid view.
page: 1,
// sortname sets the initial sorting column. Can be a name or number.
// this parameter is added to the url
sortname: 'Name',
//sets the sorting order. Default is asc. This parameter is added to the url
sortorder: 'asc',
// Events.
gridComplete: function () {
//alert('grid complete');
// Show items not found message.
if (jQuery("#jqGridTable").getGridParam("records") == "0")
jQuery("#jqGridEmptyRecordSet").css('display', 'block');
else
jQuery("#jqGridEmptyRecordSet").css('display', 'none');
// Set width of empty record set to grid width.
jQuery("#jqGridEmptyRecordSet").css('width', jQuery("#jqGridTable").css('width'));
},
});
jQuery("#jqGridTable").jqGrid('navGrid', '#jqGridPager', { edit: false, add: false, del: false });
});
/*
jQuery("#list").jqGrid(
{
url: 'server.php?q=2',
datatype: "json",
colNames: ['Active', 'ProductID', 'Product Name', 'Last Modified', 'Edit ', 'View'],
colModel: [
{ name: 'id', index: 'id', width: 55 },
{ name: 'invdate', index: 'invdate', width: 90 },
{ name: 'name', index: 'name asc, invdate', width: 100 }, { name: 'amount', index: 'amount', width: 80, align: "right" },
{ name: 'tax', index: 'tax', width: 80, align: "right" }, { name: 'total', index: 'total', width: 80, align: "right" }, { name: 'note', index: 'note', width: 150, sortable: false}],
rowNum: 10, rowList: [10, 20, 30],
pager: '#pager',
sortname: 'id', viewrecords: true, sortorder: "desc", caption: "JSON Example" });
jQuery("#list2").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: false });
*/
</script>
</asp:Content>
<asp:Content ID="Content" ContentPlaceHolderID="body" runat="server">
<umb:UmbracoPanel ID="Panel1" runat="server" hasMenu="false" Text="">
<table id="jqGridTable"></table>
<div id="jqGridEmptyRecordSet">No items found.</div>
<div id="jqGridPager"></div>
</umb:UmbracoPanel>
</asp:Content>
Finally Create your REST JSON Web Service
/// <summary>
/// Don't change this name attribute, coz this naming is related to jqGrid Spec
/// </summary>
public class JqGridRow
{
public string id { get; set; }
public List<object> cell { get; set; }
public JqGridRow(string id, List<object> cells)
{
this.id = id;
this.cell = cells;
}
}
/// <summary>
/// Don't change this name attribute, coz this naming is related to jqGrid Spec
/// </summary>
public class JqGridData
{
public int page { get; set; }
public int total { get; set; }
public int records { get; set; }
public List<JqGridRow> rows { get; set; }
public JqGridData(int pageNum, int totalPage, int totalRecords, List<JqGridRow> rows)
{
this.page = pageNum;
this.total = totalPage;
this.records = totalRecords;
this.rows = rows;
}
}
/// <summary>
/// Summary description for DataService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[ScriptService]
public class DataService : System.Web.Services.WebService
{
/// <summary>
/// This method for mapping the parameter from json, You can't change this because it will make an error in loading the data
/// Optional Parameter does not work as well. I Wish the optional parameter will work for this for the next version
///
/// Remember this is also Case sensitive
/// "_search":false,"nd":1289313832212,"rows":30,"page":1,"sidx":"Name","sord":"asc"
/// </summary>
/// <param name="page"></param>
/// <returns></returns>
[WebMethod]
[ScriptMethod]
public JqGridData LoadJqGridDataProductList(bool _search, int page, int rows, string sidx, string sord, int pCatId)
{
return LoadJqGridDataProductListProcess(_search, page, rows, sidx, sord, pCatId);
}
/// <summary>
/// This is the actual parameter
/// </summary>
/// <param name="isSearch"></param>
/// <param name="page"></param>
/// <param name="rows"></param>
/// <param name="sidx"></param>
/// <param name="sord"></param>
/// <param name="pCatId"></param>
/// <returns></returns>
private JqGridData LoadJqGridDataProductListProcess(bool isSearch = false,int page = 1,int rows = 30,string sidx = "", string sord = "", int pCatId = -1)
{
// int page = Convert.ToInt32(HttpContext.Current.Request["page"]);
try
{
//optimize it because using specific field
var lst = ProductRepository.FindAll();
//Generate jgGrid Rows
List<JqGridRow> gRows = new List<JqGridRow>();
List<object> cells = new List<object>();
foreach (var d in lst)
{
cells = new List<object>();
cells.Add(d.Active);
cells.Add(d.Name);
cells.Add(d.ProductID);
cells.Add(d.LastModifiedDate.ToString(CommonHelper.ShortDateTimeFormat));
gRows.Add(new JqGridRow(d.ProductID.ToString(), cells));
}
//Generate
return new JqGridData(1, 1, 1, gRows);
}
catch (Exception ex)
{
//just throw it at this time
throw ex;
}
return null;
}
}
Note: I wish this optional parameter will work for binding JSON object directly.
private JqGridData LoadJqGridDataProductListProcess(bool isSearch = false,int page = 1,int rows = 30,string sidx = "", string sord = "", int pCatId = -1)
