Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple jqGrid wire-up for MVC 4 controller action being called by jqGrid implementation.
Here's the (Home) controller action that serves the data back to the jqGrid.
[HttpGet]
public JsonResult GetPendingItems(string sidx, string sord, int page, int rows)
{
var requests = this.Store.RetrieveRequestorsPendingRequests(string.Empty);
var enumerable = requests as FiestaModels.Request[] ?? requests.ToArray();
var jsonData = new
{
total = 1, //todo: calculate
page = page,
records = enumerable.Count(),
rows = (
enumerable.Select(request => new
{
id = request.Id,
cell = new string[]
{
//request.Id.ToString(),
request.ToString(),
request.StartDate.ToShortDateString(),
request.EndDate.ToShortDateString(),
request.RequestStatus.ToString()
}
})).ToArray()
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
Here's the view's client-side code that calls the controller action
<!-- I haven't been able to get the bundler to work so I hard-coded these into the view. YMMV -->
<script src="~/Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#pendingRequests").jqGrid({
url: '/Home/GetPendingItems/',
datatype: 'json',
mtype: 'GET',
colNames:['Name','Start Date','End Date', 'Status'],
colModel :[
{ name: 'Name', index: 'Name', width: 120, align: 'left' },
{ name: 'Start Date', index: 'Start Date', width: 100, align: 'right' },
{ name: 'End Date', index: 'End Date', width: 100, align: 'right' },
{ name: 'Status', index: 'Status', width: 100, align: 'left' }],
//pager: jQuery('#pager'),
rowNum:10,
rowList:[5,10,20,50],
sortname: 'Id',
sortorder: "desc",
viewrecords: true,
caption: ''
});
});
</script>
<table id="pendingRequests"></table>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment