Javascript - JQuery Grid – jqGrid with ASP .NET

This article explains how to use jqGrid jQuery plugin to display a Javascript grid control like in the below figure. jqGrid is an Ajax-enabled jQuery plugin to display tabular data.

For the purpose we need to reference jquery.jqGrid.min.js and jquery-1.7.1.min.js libraries and we can do this in the header section of the page as follows.

Header content

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

 <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/themes/redmond/jquery-ui.css" />

 <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>

 <script src="Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>

</asp:Content>

Implementation of the grid is based on storing the grid data in a hidden field as a JSON string. Therefore when a grid row is edited or deleted hidden field content will also updated with RowSaveButtonClick and RowDeleteButtonClick functions respectively. (“gridDataOrderDetials” is the hidden field)

So at the end we can read hidden field value and Deserialize it to a list of objects, in the C# code. 

Here “AddRowData” function works as a helper method to build JSON string in row edit and delete.

Body content

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

 <!-- Grid -->

 <table id="JqTableOrderDetails" class="JqTableOrderDetails"></table>

 <!-- HiddenField to store grid JSON data -->

 <asp:HiddenField ID="gridDataOrderDetials" runat="server" />

 <script type="text/javascript">

 // Grid data.

 var orderData = jQuery.parseJSON('[{"ShippingAddress":"Colombo 01","OrderDate":"2011-12-20","OrderId":"100"},{"ShippingAddress":"Colombo 02","OrderDate":"2012-01-15","OrderId":"101"},{"ShippingAddress":"Colombo 03","OrderDate":"2012-02-19","OrderId":"102"}] ');

 

 // Create grid.

 $(function () {

  $(".JqTableOrderDetails").jqGrid({

   datatype: 'local',

   colNames: ['Order Id', 'Order Date', 'Shipping Address', ''],

   colModel: [

     { name: 'OrderId', index: 'OrderId', width: 200, sortable: false },

     { name: 'OrderDate', index: 'OrderDate', width: 200, sortable: false, editable: true, edittype: 'text' },

     { name: 'ShippingAddress', index: 'ShippingAddress', width: 200, sortable: false, editable: true, edittype: 'text' },

     { name: 'action', index: 'action', width: 200 }

     ],

   // Add action buttons

   gridComplete: function () {

    var ids = $(".JqTableOrderDetails").jqGrid('getDataIDs');

    

    for (var i = 0; i < ids.length; i++) {

     edit = "<input id='" + ids[i] + "_Edit' type='button' value='Edit' onclick=\"RowEditButtonClick(" + ids[i] + ")\" />";

     save = "<input id='" + ids[i] + "_Save' type='button' value='Save' onclick=\"RowSaveButtonClick(" + ids[i] + ")\" />";

     erase = "<input id='" + ids[i] + "_Erase' type='button' value='Del' onclick=\"RowDeleteButtonClick(" + ids[i] + ")\" />";

     $(".JqTableOrderDetails").jqGrid('setRowData', ids[i], { action: edit + save + erase });

    }    

   },

   caption: 'Order Details'

  });

  // Load grid data.

  if (orderData != null) {

   for (var i = 0; i < orderData.length; i++) {

    $("#JqTableOrderDetails").jqGrid('addRowData', i, orderData[i], 'last', 0);

   }

  }    

 });

 function RowEditButtonClick(cellId) {

  var ret = $(".JqTableOrderDetails").jqGrid('getRowData', cellId);

  $(".JqTableOrderDetails").restoreRow(cellId);

  $(".JqTableOrderDetails").jqGrid('setRowData', cellId, { OrderId: ret.OrderId, OrderDate: ret.OrderDate, ShippingAddress: ret.ShippingAddress });

  $(".JqTableOrderDetails").editRow(cellId, false);

 }

 function RowSaveButtonClick(cellId) {

  var ret = $(".JqTableOrderDetails").jqGrid('getRowData', cellId);

  

  $(".JqTableOrderDetails").jqGrid('setRowData', cellId, { OrderId: getCellDataValue(ret.OrderId), OrderDate: getCellDataValue(ret.OrderDate), ShippingAddress: getCellDataValue(ret.ShippingAddress) });

  $('#gridDataOrderDetials').attr('value', '[' + AddRowData($(".JqTableOrderDetails").jqGrid('getRowData', cellId), cellId) + ']');

 }

 function RowDeleteButtonClick(cellId) {

  $(".JqTableOrderDetails").delRowData(cellId);

  $('#gridDataOrderDetials').attr('value', '[' + AddRowData($(".JqTableOrderDetails").jqGrid('getRowData', cellId), cellId) + ']');

 }

 var rowDataGrid = new Array();

 function AddRowData(arr, cellId) {

  var memberArr = new Array();

  memberArr[0] = 'OrderId';

  memberArr[1] = 'OrderDate';

  memberArr[2] = 'ShippingAddress';

  selectRow = JSON.stringify(arr, memberArr);

  rowDataGrid[cellId] = selectRow;

  var ids = $(".JqTableOrderDetails").jqGrid('getDataIDs');

  var outData;

  var first = true;

  for (var i = 0; i < ids.length; i++) {

   if (rowDataGrid[ids[i]] != undefined) {

    if (first) {

     outData = rowDataGrid[ids[i]];

     first = false;

    }

    else {

     outData = outData + "," + rowDataGrid[ids[i]];

    }

   }

  }

  return outData;

 } 

 

 function getCellDataValue(rowValue) {

  if ($(rowValue).val() != null) {

   return $(rowValue).val();

  }

  else {

   return rowValue;

  }

 }

 </script>

</asp:Content>

Here are few jQuery grid plugins can be found in the web.

• Flexigrid: http://flexigrid.info/
• jQuery Grid: http://www.trirand.com/blog/
• Ingrid: http://reconstrukt.com/ingrid/
• SlickGrid http://github.com/mleibman/SlickGrid
• DataTables http://www.datatables.net/index