Last active
December 16, 2015 22:39
-
-
Save onefloridacoder/5509063 to your computer and use it in GitHub Desktop.
Simple jqGrid wire-up for MVC 4 controller action being called by jqGrid implementation.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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