Hello Friends,
I have seen over the internet that there are many articles of simple jqGrid. In this article, I've tried to show you the use of jqGrid's functionality (eg. searching, sorting, paging, filtering, checkboxes, etc) and its states after a postback request. First question is what is jqgrid?
What is JqGrid?
  • JqGrid is Stylish and Featured Tabular data presentation control.
  • JqGrid is a JavaScript control for representing and manipulating tabular data on the web.
  • JqGrid is Ajax Enabled.
  • JqGrid Can be integrated with any of the server-side technologies like ASP, JavaServelets, JSP, PHP etc.
  • JqGrid was developed by Tony Tomov at Trirand Inc.
  • JqGrid is very simple to integrate with ASP.NET.
You can download all the scripts and style sheet file from this link https://github.com/jqwidgets/jQWidgets/tree/master/jqwidgets
or you can find the jqwidget folder from attached demo project also.
I have used simple static data in this demo, but you can use data from the database here. You can see the project structure as given below.

ASP.NET
Image1
The following is the test data function of "SimplePage.aspx.cs" page.
  1. [WebMethod]
  2. public static string GetProductsList()
  3. {
  4. List<ResponseMessage> respmsg = new List<ResponseMessage>();
  5. respmsg.Add(new ResponseMessage { ProID = 1,ID = 1, Name = "Product1", SKU = "sku1", Price = 100, vendorname = "Nike", Active = true });
  6. respmsg.Add(new ResponseMessage { ProID = 2,ID = 2, Name = "Product2", SKU = "sku2", Price = 100, vendorname = "Nike", Active = false });
  7. respmsg.Add(new ResponseMessage { ProID = 3,ID = 3, Name = "Product3", SKU = "sku3", Price = 100, vendorname = "Nike", Active = true });
  8. respmsg.Add(new ResponseMessage { ProID = 4, ID = 4, Name = "Product4", SKU = "sku4", Price = 100, vendorname = "Nike", Active = true });
  9. respmsg.Add(new ResponseMessage { ProID = 5, ID = 5, Name = "Product5", SKU = "sku5", Price = 100, vendorname = "Nike", Active = true });
  10. respmsg.Add(new ResponseMessage { ProID = 6, ID = 6, Name = "Product6", SKU = "sku6", Price = 100, vendorname = "Nike", Active = false });
  11. respmsg.Add(new ResponseMessage { ProID = 7, ID = 7, Name = "Product7", SKU = "sku7", Price = 100, vendorname = "Nike", Active = false });
  12. respmsg.Add(new ResponseMessage { ProID = 8, ID = 8, Name = "Product8", SKU = "sku8", Price = 100, vendorname = "Nike", Active = true });
  13. respmsg.Add(new ResponseMessage { ProID = 9, ID = 9, Name = "Product9", SKU = "sku9", Price = 100, vendorname = "Nike", Active = true });
  14. respmsg.Add(new ResponseMessage { ProID = 10, ID = 10, Name = "Product10", SKU = "sku10", Price = 100, vendorname = "Nike", Active = true });
  15. respmsg.Add(new ResponseMessage { ProID = 11, ID = 11, Name = "Product11", SKU = "sku11", Price = 100, vendorname = "Nike", Active = true });
  16. respmsg.Add(new ResponseMessage { ProID = 12, ID = 12, Name = "Product12", SKU = "sku12", Price = 100, vendorname = "Nike", Active = true });
  17. respmsg.Add(new ResponseMessage { ProID = 13, ID = 13, Name = "Product13", SKU = "sku13", Price = 100, vendorname = "Nike", Active = true });
  18. respmsg.Add(new ResponseMessage { ProID = 14, ID = 14, Name = "Product14", SKU = "sku14", Price = 100, vendorname = "Nike", Active = true });
  19. respmsg.Add(new ResponseMessage { ProID = 15, ID = 15, Name = "Product15", SKU = "sku15", Price = 100, vendorname = "Nike", Active = true });
  20. respmsg.Add(new ResponseMessage { ProID = 16, ID = 16, Name = "Product16", SKU = "sku16", Price = 100, vendorname = "Nike", Active = true });
  21. respmsg.Add(new ResponseMessage { ProID = 17, ID = 17, Name = "Product17", SKU = "sku17", Price = 100, vendorname = "Nike", Active = false });
  22. respmsg.Add(new ResponseMessage { ProID = 18, ID = 18, Name = "Product18", SKU = "sku18", Price = 100, vendorname = "Nike", Active = true });
  23. respmsg.Add(new ResponseMessage { ProID = 19, ID = 19, Name = "Product19", SKU = "sku19", Price = 100, vendorname = "Nike", Active = false });
  24. respmsg.Add(new ResponseMessage { ProID = 20, ID = 20, Name = "Product20", SKU = "sku20", Price = 100, vendorname = "Nike", Active = false });
  25. respmsg.Add(new ResponseMessage { ProID = 21, ID = 21, Name = "Product21", SKU = "sku21", Price = 100, vendorname = "Nike", Active = false });
  26. return Newtonsoft.Json.JsonConvert.SerializeObject(respmsg);
  27. }
  29. public class ResponseMessage
  30. {
  31. public int ProID { get; set; }
  32. public int ID { get; set; }
  33. public string Name { get; set; }
  34. public string SKU { get; set; }
  35. public float Price { get; set; }
  36. public string vendorname { get; set; }
  37. public bool Active { get; set; }
  38. }
The following is jqGrid.aspx code.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqGrid.aspx.cs" Inherits="JqGrid" %>
  3. <!DOCTYPE html>
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head runat="server">
  6. <title>JQGrid Demo - Searching, Sorting, Filtering, Paging, Checkbox Selection, etc</title>
  7. <link href="css/jqx.base.css" rel="stylesheet" />
  8. <script src="Js/jquery-3.2.1.min.js"></script>
  9. <link href="css/custom.css" rel="stylesheet" />
  10. <link href="css/font-awesome.min.css" rel="stylesheet" />
  11. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  13. <script type="text/javascript">
  14. $(document).ready(function () {
  15. $.ajax({
  16. type: "POST",
  17. url: "SimplePage.aspx/GetProductsList",
  18. contentType: "application/json; charset=utf-8",
  19. dataType: "json",
  20. data: "",
  21. async: false,
  22. success: function (data) {
  23. var obj = data.d;
  24. var source =
  25. {
  26. datafields: [
  27. { name: 'ID', type: 'int' },
  28. { name: 'ProID', type: 'int' },
  29. { name: 'Name', type: 'string' },
  30. { name: 'SKU', type: 'string' },
  31. { name: 'Price', type: 'float' },
  32. { name: 'vendorname', type: 'string' },
  33. { name: 'Active', type: 'bool' },
  34. ],
  35. id: 'ID',
  36. datatype: "json",
  37. localdata: obj
  38. };
  39. var dataList = new $.jqx.dataAdapter(source, { contentType: 'application/json; charset=utf-8' });
  41. var viewStatus = function (rownumber, columnname, value) {
  42. if (value == false) {
  43. var cc = '<i class="fa fa-2x fa-thumbs-down text-danger"></i>'
  44. }
  45. else {
  46. var cc = '<i class="fa fa-2x fa-thumbs-up text-success"></i>'
  47. }
  48. return '<div style="position: relative; left: 50%; top: 50%; transform: translate(-50%,-50%); display: inline-block;">' + cc + '</div>';
  49. }
  50. var viewAction = function (rownumber, columnname, value) {
  51. return '<div style="position: relative; left: 50%; top: 50%; transform: translate(-50%,-50%); display: inline-block; text-align: center;"><a href="javascript:void(0)" title="" onclick="EditProduct(' + value + ')" class="btn btn-success btn-sm"><i class="fa fa-edit"></i> Edit Product</a></div>';
  52. }
  54. $("#grid").jqxGrid(
  55. {
  56. width: '60%',
  57. height: 365,
  58. altrows: true,
  59. source: dataList,
  60. pageable: true,
  61. pagesize: 5,
  62. pagesizeoptions: ["5", "10", "15"],
  63. autoheight: true,
  64. autorowheight: true,
  65. columnsheight: 70,
  66. selectionmode: 'checkbox',
  67. showfilterrow: true,
  68. filterable: true,
  69. sortable: true,
  70. ready: function () { },
  71. columns: [
  72. { text: 'ID', datafield: 'ID', width: '8%', align: 'center' },
  73. { text: 'Product Name', datafield: 'Name', width: '25%', align: 'left' },
  74. { text: 'SKU', datafield: 'SKU', width: '15%' },
  75. { text: 'Vendor Name', datafield: 'vendorname', width: '16%', align: 'center' },
  76. { text: 'Price', datafield: 'Price', width: '11%', align: 'center', cellsalign: 'right', cellsformat: 'c2' },
  77. { text: 'Status', datafield: 'Active', width: '8%', cellsrenderer: viewStatus, align: 'center', filtertype: 'bool', sortable: false },
  78. { text: 'Actions', datafield: 'ProID', width: '14%', cellsrenderer: viewAction, align: 'center', filterable: false, sortable: false, }
  79. ]
  80. });
  82. //=================================
  83. if ('<%=Session["sessionTextBox"] %>' != null || '<%=Session["sessionCheckbox"] %>' != null || '<%=Session["sessionPageNumber"] %>' != null || '<%=Session["sessionPageRowCount"] %>' != null || '<%=Session["sessionColumnSorting"] %>' != null) {
  84. textboxValue = '<%=Session["sessionTextBox"] %>';
  85. gridCheckboxOption = '<%=Session["sessionCheckbox"] %>';
  86. gridPageNumber = '<%=Session["sessionPageNumber"] %>';
  87. gridPageRowCount = '<%=Session["sessionPageRowCount"] %>';
  88. gridColumnSorting = '<%=Session["sessionColumnSorting"] %>';
  89. $.ajax(
  90. {
  91. type: "POST",
  92. url: "JqGrid.aspx/DestroySession",
  93. contentType: "application/json; charset=utf-8",
  94. data: "",
  95. dataType: "json",
  96. async: false,
  97. cache: "false",
  98. success: function (data) {
  99. }, Error: function (x, e) {
  100. alert("Error in Delete");
  101. }
  102. });
  103. }
  105. //paging row counts
  106. if (gridPageRowCount > 5) {
  107. $($('#grid').find('div[id="gridpagerlistgrid"]')[0]).val(gridPageRowCount);
  108. }
  110. //Column Header Sorting
  111. var allgridsortingvalues;
  112. if (gridColumnSorting.includes('ascending') || gridColumnSorting.includes('descending')) {
  113. gridColumnSorting = gridColumnSorting.replace(/none/gi, 'undefined');
  114. allgridsortingvalues = gridColumnSorting.split('|');
  115. }
  116. else {
  117. gridColumnSorting = gridColumnSorting.replace(/none/gi, 'undefined');
  118. allgridsortingvalues = gridColumnSorting.split('|');
  119. }
  121. var allsortingtext = $('#grid').find('div[role^="columnheader"]');
  122. var tcontrolsorting = null;
  123. if (allgridsortingvalues.length > 1) {
  124. for (var i = 1; i < allsortingtext.length; i++) {
  125. if (allgridsortingvalues[i].toString() != 'undefined') {
  126. while ($(allsortingtext[i]).attr('aria-sort') != allgridsortingvalues[i].toString()) {
  127. $('#grid').trigger('reloadGrid');
  128. $(allsortingtext[i]).attr('aria-sort', allgridsortingvalues[i].toString());
  129. tcontrolsorting = allsortingtext[i];
  130. $(tcontrolsorting).trigger('click');
  131. }
  132. break;
  133. }
  135. }
  136. }
  138. //Textboxes
  139. var allgridvalues = textboxValue.split('|');
  140. var alltext = $('#grid').find('input[id^="jqxWidget"]');
  141. var tcontrol = null;
  142. var checkBool = false;
  143. if (allgridvalues.length > 1) {
  144. for (var i = 0; i < alltext.length; i++) {
  145. if (allgridvalues[i].toString() != "") {
  146. $(alltext[i]).val(allgridvalues[i].toString());
  147. tcontrol = alltext[i];
  148. checkBool = true;
  149. }
  150. }
  151. if (checkBool == true) {
  152. $(tcontrol).trigger('keydown');
  153. }
  154. }
  156. //paging
  157. if (gridPageNumber > 1) {
  158. while ($($('#grid').find('input[class="jqx-input jqx-widget-content jqx-grid-pager-input jqx-rc-all"]')[0]).val() != gridPageNumber) {
  159. $('#grid').trigger('reloadGrid');
  160. $($('#grid').find('input[class="jqx-input jqx-widget-content jqx-grid-pager-input jqx-rc-all"]')[0]).val(gridPageNumber);
  161. $($('#grid').find('input[class="jqx-input jqx-widget-content jqx-grid-pager-input jqx-rc-all"]')[0]).trigger('change');
  162. }
  163. }
  165. //Checkboxes
  166. var allgridcheckboxvalues = gridCheckboxOption.split('|');
  167. if ((allgridcheckboxvalues.length) > 1) {
  168. var allcheckboxtext = $('#grid').find('div[class^="jqx-checkbox-default"]');
  169. var tcontrol1 = null;
  170. var tcontrol2 = null;
  171. var tcontrol3 = null;
  172. var ckhAllBool = true;
  173. for (var i = 0; i < allcheckboxtext.length; i++) {
  174. if (i == 0 && allgridcheckboxvalues[i].toString() != "") {
  175. tcontrol1 = allcheckboxtext[i];
  176. $(tcontrol1).find('span').attr('class', allgridcheckboxvalues[i].toString());
  177. if (allgridcheckboxvalues[i].toString() == "jqx-checkbox-check-checked") {
  178. ckhAllBool = false;
  179. }
  180. }
  181. else if (i == 1 && allgridcheckboxvalues[i].toString() != "") {
  182. tcontrol2 = allcheckboxtext[i];
  183. while ($(allcheckboxtext[i]).find('span').attr('class') != allgridcheckboxvalues[i].toString().replace('jqxcheckboxcheckindeterminate---', '').toString().trim().replace('jqxcheckboxcheckchecked---', '').toString().trim()) {
  184. $('#grid').trigger('reloadGrid');
  185. $(allcheckboxtext[i]).find('span').attr('class', allgridcheckboxvalues[i].toString());
  186. $(allcheckboxtext[i]).trigger('mousedown');
  187. }
  188. }
  189. else {
  190. if (ckhAllBool == true) {
  191. tcontrol3 = allcheckboxtext[i];
  192. $(tcontrol3).find('span').attr('class', allgridcheckboxvalues[i].toString());
  193. }
  194. else {
  195. tcontrol3 = allcheckboxtext[i];
  196. $(tcontrol3).find('span').attr('class', 'jqx-checkbox-check-checked');
  197. }
  198. }
  199. }
  200. if (tcontrol1 != null) {
  201. $(tcontrol1).trigger('keydown');
  202. }
  203. if (tcontrol3 != null) {
  204. $(tcontrol3).trigger('keydown');
  205. }
  206. }
  207. //=================================
  208. }
  209. });
  210. });
  213. var textboxValue = "";
  214. var gridCheckboxOption = "";
  215. var gridPageNumber = "";
  216. var gridPageRowCount = "";
  217. var gridColumnSorting = "";
  218. function EditProduct(val) {
  220. //pagenumber
  221. var strPageNumber = $($('#grid').find('input[class="jqx-input jqx-widget-content jqx-grid-pager-input jqx-rc-all"]')[0]).val();
  222. //pagenumber
  224. //pageRowCount
  225. var strPageRowCount = $($('#grid').find('div[id="gridpagerlistgrid"]')[0]).val();
  226. //pageRowCount
  228. //Column Header Sorting
  229. var allColumnSortHeader = $('#grid').find('div[role^="columnheader"]');
  230. for (var i = 0; i < allColumnSortHeader.length; i++) {
  231. if (i == 0) {
  232. gridColumnSorting = $(allColumnSortHeader[i]).attr('aria-sort') + "|";
  233. }
  234. else {
  235. gridColumnSorting = gridColumnSorting + $(allColumnSortHeader[i]).attr('aria-sort') + "|";
  236. }
  237. }
  239. //Column Header Sorting
  241. //Column textboxes
  242. var alltext = $('#grid').find('input[id^="jqxWidget"]');
  243. for (var i = 0; i < alltext.length; i++) {
  244. if (i == 0) {
  245. textboxValue = $(alltext[i]).val();
  246. }
  247. else {
  248. textboxValue = textboxValue + "|" + $(alltext[i]).val();
  249. }
  250. }
  252. //Column textboxes
  254. //Column checkboxes
  255. var alltext = $('#grid').find('div[class^="jqx-checkbox-default"]');
  256. var tcontrol = null;
  257. var tcontrol1 = null;
  258. for (var i = 0; i < alltext.length; i++) {
  259. if (i == 0 && alltext[i] != null) {
  260. tcontrol = alltext[i];
  261. gridCheckboxOption = $(tcontrol).find('span').attr("class");
  262. }
  263. //====For checkbox of STATUS column in grid
  264. else if (i == 1 && alltext[i] != null) {
  265. tcontrol1 = alltext[i];
  266. gridCheckboxOption = gridCheckboxOption + "|" + $(tcontrol1).find('span').attr("class");
  267. }
  268. //====For checkbox of STATUS column in grid
  269. else {
  270. tcontrol = alltext[i];
  271. gridCheckboxOption = gridCheckboxOption + "|" + $(tcontrol).find('span').attr("class");
  272. }
  273. }
  274. //Column checkboxes
  276. textboxValue = textboxValue.replace(/'/g, "%27").replace(/&/g, "%26").replace(/\//, "%2F").replace(/\?/g, "%3F");
  277. $.ajax(
  278. {
  279. type: "POST",
  280. url: "JqGrid.aspx/SetSearchReminderSessions",
  281. contentType: "application/json; charset=utf-8",
  282. data: "{ textboxValue:'" + textboxValue + "', gridCheckboxOption:'" + gridCheckboxOption + "', strPageNumber: '" + strPageNumber + "', strPageRowCount:'" + strPageRowCount + "', gridColumnSorting:'" + gridColumnSorting + "' }",
  283. dataType: "json",
  284. async: false,
  285. cache: "false",
  286. success: function (data) {
  287. if (data.d == "0") {
  288. window.location = "/SimplePage.aspx?Id=" + val;
  289. }
  290. }
  291. });
  292. }
  294. function Clearfilter() {
  295. $('#grid').jqxGrid('clearselection');
  296. $("#grid").jqxGrid('clearfilters');
  297. var allcheckboxtext = $('#grid').find('div[class^="jqx-checkbox-default"]');
  298. for (var i = 0; i < allcheckboxtext.length; i++) {
  299. $(allcheckboxtext[i]).find('span').attr('class', '-');
  300. }
  301. }
  303. </script>
  304. </head>
  305. <body>
  306. <form id="form1" runat="server">
  307. <div class="content">
  308. <div class="page-content">
  309. <div class="page-header position-relative">
  310. <h1>JQGrid Demo</h1>
  311. </div>
  312. </div>
  313. <div class="row">
  314. <div id="grid"></div>
  315. </div>
  316. </div>
  317. </form>
  319. <script type="text/javascript" src="Js/jqxcore.js"></script>
  320. <script type="text/javascript" src="Js/jqxdata.js"></script>
  321. <script type="text/javascript" src="Js/jqxbuttons.js"></script>
  322. <script type="text/javascript" src="Js/jqxscrollbar.js"></script>
  323. <script type="text/javascript" src="Js/jqxmenu.js"></script>
  324. <script type="text/javascript" src="Js/jqxgrid.js"></script>
  325. <script type="text/javascript" src="Js/jqxgrid.pager.js"></script>
  326. <script type="text/javascript" src="Js/jqxgrid.selection.js"></script>
  327. <script type="text/javascript" src="Js/jqxgrid.filter.js"></script>
  328. <script type="text/javascript" src="Js/jqxgrid.sort.js"></script>
  329. <script type="text/javascript" src="Js/jqxlistbox.js"></script>
  330. <script type="text/javascript" src="Js/jqxwindow.js"></script>
  331. <script type="text/javascript" src="Js/jqxdropdownlist.js"></script>
  332. <script type="text/javascript" src="Js/jqxcheckbox.js"></script>
  333. </body>
  334. </html>
The following is the jqGrid.aspx.cs code. You can set and clear/destroy the session for all the required controls of jqGrid.
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Services;
  6. using System.Web.UI;
  7. using System.Web.UI.WebControls;
  9. public partial class JqGrid : System.Web.UI.Page
  10. {
  11. protected void Page_Load(object sender, EventArgs e)
  12. {
  14. }
  16. [WebMethod]
  17. public static string SetSearchReminderSessions(string textboxValue, string gridCheckboxOption, string strPageNumber, string strPageRowCount, string gridColumnSorting)
  18. {
  19. HttpContext.Current.Session["sessionTextBox"] = System.Web.HttpContext.Current.Server.UrlDecode(textboxValue).Replace("'", @"\'");
  20. HttpContext.Current.Session["sessionCheckbox"] = gridCheckboxOption;
  21. HttpContext.Current.Session["sessionPageNumber"] = strPageNumber;
  22. HttpContext.Current.Session["sessionPageRowCount"] = strPageRowCount;
  23. HttpContext.Current.Session["sessionColumnSorting"] = gridColumnSorting;
  24. return "0";
  25. }
  27. [WebMethod]
  28. public static string DestroySession()
  29. {
  30. HttpContext.Current.Session["sessionTextBox"] = null;
  31. HttpContext.Current.Session["sessionCheckbox"] = null;
  32. HttpContext.Current.Session["sessionPageNumber"] = null;
  33. HttpContext.Current.Session["sessionPageRowCount"] = null;
  34. HttpContext.Current.Session["sessionColumnSorting"] = null;
  35. return "0";
  36. }
  38. }
Now, after downloading the source code, build it and then run the application; it will show you the jqGrid as shown below. I have set 5 records per page as shown on the screen.
CHECKBOX

ASP.NET
Image2

Now, I am going step by step to show you the function. Select all or specific product checkboxes as shown in the below screen and after that, click "EDIT PRODUCT" button which will call the post request.

ASP.NET
Image3

Here, after calling the Edit button of any selected product, you move to another page. You can do everything as per your project's requirement, but after coming back again, you need to maintain all the states of controls as they are. Because, once there are many records in jqGrid, it is very frustrating for the user to search and find all the selected products again.

ASP.NET
Image4

So, I will show you after coming back that the state of controls is saved as it is.

ASP.NET
Image5

SEARCHING

Now, in the same way as the above checkbox functionality, you can use searching, filtering, sorting and paging functionality. I will show you just images of it. You can run the demo and experience it for yourself.

ASP.NET
Image6

Filtering/Sorting

Here, you can see there are 3 types of sorting given by jqGrid -
1) Ascending
2) Descending
3) No sort.

ASP.NET
Image7

Status Filtering(ACTIVE)

Here, you can see that if you want to get products which are in an active status, then you can do the following.

ASP.NET
Image8

Status Filtering(IN-ACTIVE)

Here, you can see that if you want to get products which are in inactive status than, you can do this.

ASP.NET
Image9

Paging

Here, you can see that you can move to the third page with the use of paging functionality.

ASP.NET
Image10

Another Important thing to find while you are using jqGrid is that you need to find the event/trigger of the controls. So, I will show you a simple solution, which is to just use developer tool and click on the control for which you want to find the event. Now, go to event listener of that control and you will find event/trigger from there, as shown below.

ASP.NET
Image11

I hope you will like this article and may use it for your projects. Suggestions are welcome.

Thanks in advance!