Let’s start by explaining how to include jqGrid (http://www.trirand.com/blog/) in your views. First you need to download and unzip jqGrid and jQueryUI (http://jqueryui.com/). I placed them in the root folder (jquery-ui-1.8.7.custom, jquery.jqGrid-3.8.2) of my project. Afterwards you need to reference them in the header of your web page.
<%--css for UI--%>
<link rel="stylesheet" type="text/css" media="screen" href="<%:Url.Content("~/jquery-ui-1.8.7.custom/css/ui-lightness/jquery-ui-1.8.7.custom.css") %>" />
<%--css for grid--%>
<link rel="stylesheet" type="text/css" media="screen" href="<%:Url.Content("~/jquery.jqGrid-3.8.2/css/ui.jqgrid.css") %>" />
<%-- jquery scripts --%>
<script src="<%:Url.Content("~/jquery.jqGrid-3.8.2/js/jquery-1.4.2.min.js") %>" type="text/javascript"></script>
<%-- ui scripts --%>
<script src="<%:Url.Content("~/jquery-ui-1.8.7.custom/js/jquery-ui-1.8.7.custom.min.js") %>" type="text/javascript"></script>
<%-- grid scripts --%>
<script src="<%:Url.Content("~/jquery.jqGrid-3.8.2/js/i18n/grid.locale-en.js") %>" type="text/javascript"></script>
<script src="<%:Url.Content("~/jquery.jqGrid-3.8.2/js/jquery.jqGrid.min.js") %>" type="text/javascript"></script>
Including following code should render the jqGrid on your page.
<table id="grid">
</table>
<div id="pager">
</div>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#grid").jqGrid({
url: "/JqGrid/GridData",
datatype: 'json',
mtype: 'POST',
colNames: ['Start Time', 'End Time', 'Date', 'Description', 'Notes'],
colModel: [
{ name: 'FromTime', sortable: true, editable: true, edittype: 'text', width: 80 },
{ name: 'ToTime', sortable: true, editable: true, edittype: 'text', width: 80 },
{ name: 'Date', search: true, editable: true, edittype: 'text', width: 80 },
{ name: 'Description', search: true, editable: true, edittype: 'text', width: 200 },
{ name: 'Notes', sortable: true, editable: true, edittype: 'text', width: 150}],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50, 100, 200, 500, 1000],
sortname: 'Date',
sortorder: "desc",
height: "100%",
viewrecords: true,
scrollOffset: 0,
caption: 'Sample'
});
jQuery("#grid").jqGrid('navGrid', '#pager',
{ edit: true, add: true, del: true, search: true },
{ url: "/JqGrid/Edit", width: 'auto', closeAfterEdit: true, beforeShowForm: function (formid) { $("#Date").datepicker({ dateFormat: 'dd.mm.yy', showButtonPanel: true }); } },
{ url: "/JqGrid/Create", width: 'auto', closeAfterAdd: true, beforeShowForm: function (formid) { $("#Date").datepicker({ dateFormat: 'dd.mm.yy', showButtonPanel: true }); } },
{ url: "/JqGrid/Delete" },
{ closeAfterSearch: true, closeOnEscape: true, multipleSearch: true });
});
</script>
Let’s explain now some parts:
url: "/JqGrid/GridData" -> tells where the grid should retrieve the data
colNames: ['Start Time', 'End Time',..] '-> column names
colModel: [{ name: 'FromTime' ...}] –> describes the data
To be more precise data is formatted as json. For example:
"cell":["00:00","02:00","06.02.2011","Element0",""]
where the element 1 (ex. 00:00) of cell items corresponds to the item 1 of the colNames and colModel items.
Finally, we are going to investigate how data is retried from a controller. This part is quite simple you just need to have the data in a list object. At that moment you will have an extension method which encapsulate sorting, filtering and paging functionality. It is just enough to call JqGridDataModelConvert and to specify which properties of the objects contained in the list corresponds to the colModel. Moreover the property has to be wrapped by an object of GridCell, which encapsulate compare and string serialization and deserialization logic. Most of the time you will use BasicGridCell<T>, but it is also possible to extend the wrapper with custom code.
Example:
public virtual ActionResult GridData(GridSettings jqGridSettings)
{
JqGridDataModel data = Data.JqGridDataModelConvert(columns =>
{
columns.Add("FromTime", ev => new BasicGridCell<string>(ev.FromTime));
columns.Add("ToTime", ev => new BasicGridCell<string>(ev.ToTime));
columns.Add("Date", ev => new DateTimeGridCell(ev.Date) { Format = "dd.MM.yyyy" });
columns.Add("Description", ev => new BasicGridCell<string>(ev.Description));
columns.Add("Notes", ev => new BasicGridCell<string>(ev.Notes));
}, ev => new BasicGridCell<int>(ev.ID), jqGridSettings);
return Json(data);
}
Programming is fun!!
