Export To Excel JQGrid Data in Spring/JSP - spring

I'm developing a Web application using Spring 3.0, JSP, Tiles.
On one of the JSP pages I've to display some data using JQgrid and I've to provide a button to facilitate the user to export the data in JQgrid to an Excel Sheet.
I've successfully created the JQgrid and am able to display the data.
I was wondering how to implement the "Export To Excel" functionality on the click of a button.
I tried looking for several solutions but couldn't find anything concrete.
My handler code:
#RequestMapping(method = RequestMethod.POST, value = "/workQueue")
#ResponseBody
public JqgridResponse loadXXXXXX(#RequestParam int page, #RequestParam int rows, #RequestParam String sidx, #RequestParam String sord){
List<ReferralCase> referrals = XXXXService.getReferralCases();
int endLimit = page * rows;
int startLimit = endLimit - rows;
if (endLimit > referrals.size()) {
endLimit = referrals.size();
}
JqgridResponse response = new JqgridResponse();
response.setRows(referrals.subList(startLimit, endLimit));
response.setPage(page);
response.setRecords(referrals.size());
response.setTotal((referrals.size() / rows) + 1);
return response;
}
My JSP/JS Code:
$("#XXXXWorkQueueGrid").jqGrid({
url:contextRoot+'/dart/workQueue',
datatype: 'json',
mtype: 'POST',
colNames: ['ID','Created','Last Name','First Name','A1','A2','Status','Updated','Workflow'],
colModel: [
{ name: 'recordId', index: 'recordId', width: 30 },
{ name: 'creationDate', index: 'creationDate', width: 40 },
{ name: 'lastName', index: 'lastName', width: 60 },
{ name: 'firstName', index: 'firstName', width: 60 },
{ name: 'A1', index: 'A1', width: 25 },
{ name: 'A2', index: 'A2', width: 25 },
{ name: 'status', index: 'status', width: 40 },
{ name: 'updateDate', index: 'updateDate', width: 40 },
{ name: 'workflow', index: 'workflow', width: 90 }
],onPaging: function() {
$(this).setGridParam({datatype: 'json'}).triggerHandler("reloadGrid");
},loadComplete: function() {
$(this).setGridParam({datatype: 'json'}).triggerHandler("reloadGrid");
},loadError: function(xhr,st,err) {
alert(err);
},onSelectRow : function(rowid, status, e) {
var selRow = $(this).getGridParam("selrow");
var selRecordId = $(this).getCell(selRow, 'recordId');
window.location = (contextRoot+"XXXX/referralDetails?recId=" + selRecordId );
},
pager: '#XXXXWorkQueuePager',
jsonReader: {
repeatitems: false,
root: "rows",
page: "page",
total: "total",
records: "records"
},
sortorder: "asc",
sortname: 'recordId',
gridview: true,
viewrecords: true,
hoverrows : false,
autowidth: true,
height: 'auto',
rowNum: 12,
forceFit: true,
altRows:true
});
$("#XXXXXWorkQueueGrid").jqGrid('navGrid','#XXXXXWorkQueuePager',{edit:false, add:false, del:false, search:false});
});
JqgridResponse is just a custom DAO class created by me.
Any help is appreciated!

You can generate a new Excel file using Apache POI and use Spring AbstractExcelView to make it downloadable. Just follow this turorial to setup everything.

Related

How to save/restore the CheckBox state in jqGrid across webMethod?

I am using jqGrid with "multiselect: true" and webMethods. I need to persist state, so I am going to put the Grid state in the DB, in order to do this I need to know which rows have selected checkboxes and pass that through the webMethod, then on the other side I need to be able to specify to the Grid to select or unselect a particular checkbox.
This is my current binding code, serializeGridData doesn't pick up the checkbox state.
$(document).ready(function () {
jQuery("#selectedInmateList").jqGrid({
url: "<%= AdminPath %>WebMethods/WebService1.asmx/GetUsersJSON3",
postData: {
inmateList: function () {
return InmateListArg;
}
},
mtype: 'POST',
datatype: 'json',
ajaxGridOptions: { contentType: "application/json" },
serializeGridData: function (postData) {
var propertyName, propertyValue, dataToSend = {};
for (propertyName in postData) {
if (postData.hasOwnProperty(propertyName)) {
propertyValue = postData[propertyName];
if ($.isFunction(propertyValue)) {
dataToSend[propertyName] = propertyValue();
} else {
dataToSend[propertyName] = propertyValue
}
}
}
return JSON.stringify(dataToSend);
},
onSelectRow: function (id) {
},
jsonReader: {
root: "d.rows",
page: "d.page",
total: "d.total",
records: "d.records"
},
colNames: ['select', 'LastName', 'FirstName', 'id'],
colModel: [
{ name: 'select', index: 'select', width: 300, align: 'center' },
{ name: 'LastName', index: 'LastName', width: 300, align: 'center' },
{ name: 'FirstName', index: 'FirstName', width: 300, align: 'center' },
{ name: 'id', index: 'id', align: 'center', hidden: true }
],
pager: '#prod_pager',
rowList: [10, 20, 30],
sortname: 'Code',
sortorder: 'desc',
rowNum: 10,
loadtext: "Loading....",
shrinkToFit: false,
multiselect: true,
emptyrecords: "No records to view",
//width: x - 40,
height: "auto",
rownumbers: true,
//subGrid: true,
caption: 'Selected Inmates'
});
});
If I understand your correctly you need first of all to send the current list of selected rows to the server. For example if the user select or unselect new row you can send the current list of the rows directly to the server. You can do this inside of onSelectRow and onSelectAll callbacks. Additionally you need that the server send you back only the data of the current page (the full data if you use loadonce: true option), but the list of ids of the rows which need be selected too. Inside of loadComplete you can call in the loop setSelection method to select the rows.
I would recommend you to examine the code of the callback onSelectRow, onSelectAll and loadComplete of the demo created for the answer. The old answer provide the basis of the same idea.
To pass the selected row IDs into the webMethod I used this:
var selectedIDs = jQuery('#selectedInmateList').jqGrid('getGridParam', 'selarrrow');
Then I added that to my webMethod param 'InmateListArg'
Then I added a hidden column which indicated if the row should be checked or not, then I used the loadComplete event to select the desired row based on the data in the hidden column.
$(document).ready(function () {
jQuery("#selectedInmateList").jqGrid({
url: "<%= AdminPath %>WebMethods/WebService1.asmx/GetUsersJSON3",
postData: {
inmateList: function () {
return InmateListArg;
}
},
mtype: 'POST',
datatype: 'json',
ajaxGridOptions: { contentType: "application/json" },
serializeGridData: function (postData) {
var propertyName, propertyValue, dataToSend = {};
for (propertyName in postData) {
if (postData.hasOwnProperty(propertyName)) {
propertyValue = postData[propertyName];
if ($.isFunction(propertyValue)) {
dataToSend[propertyName] = propertyValue();
} else {
dataToSend[propertyName] = propertyValue
}
}
}
return JSON.stringify(dataToSend);
},
onSelectRow: function (id) {
},
loadComplete: function (id) {
idsOfSelectedRows = [];
var gridData = jQuery("#selectedInmateList").getRowData();
for (i = 0; i < gridData.length; i++) {
var isChecked = gridData[i]['checked'];
var id = gridData[i]['id'];
if (isChecked == 'True') {
idsOfSelectedRows.push(id);
}
}
var $this = $(this), i, count;
for (i = 0, count = idsOfSelectedRows.length; i < count; i++) {
$this.jqGrid('setSelection', idsOfSelectedRows[i], false);
}
},
jsonReader: {
root: "d.rows",
page: "d.page",
total: "d.total",
records: "d.records"
},
colNames: ['select', 'LastName', 'FirstName', 'id', 'checked'],
colModel: [
{ name: 'select', index: 'select', width: 300, align: 'center' },
{ name: 'LastName', index: 'LastName', width: 300, align: 'center' },
{ name: 'FirstName', index: 'FirstName', width: 300, align: 'center' },
{ name: 'id', index: 'id', align: 'center' /*, hidden: true*/ },
{ name: 'checked', index: 'checked', align: 'center' }
],
pager: '#prod_pager',
rowList: [10, 20, 30],
sortname: 'Code',
sortorder: 'desc',
rowNum: 10,
loadtext: "Loading....",
shrinkToFit: false,
multiselect: true,
emptyrecords: "No records to view",
//width: x - 40,
height: "auto",
rownumbers: true,
//subGrid: true,
caption: 'Selected Inmates'
});
jQuery("#prodgrid").jqGrid('navGrid', '#prod_pager',
{ edit: false, add: false, del: true, excel: true, search: false });
});

JQgrid Web Api Json on a SPA

I just found JQGrid , and think that JQgrid is very mature and perfect to use with Web API
I have a few questions:
we are using Web Api and have the following HTML code and Controller.
The Image field loses its data when It comes back to the controller. Google debugger shows data for the image field on the HTML, but if I set a breakpoint on the Put method inside the controller, Visual Studio , I can see the product entity with all its fields filled with data, all but one; the image field is null.
It took me some digging to get this working , therefore I decided to share the HTML code + the WebApi controller it with the community.
1- am I am doing this right (Grid parameters) ?
2-Why the image fields comes back null ?
3-How can I implement a search ?
this will not get called
public dynamic GetProducts4JqGrid1(string sidx, string sord, int page, int rows, bool _search, string searchField, string searchOper, string searchString)
4-why i Must pass the Entity ID to the controller ? I tried many other ways and it always come back as "0" so must pass the Id to the Put method , is this the only way ?
JQGrid is awesome with Web Api
nice to have everything under one roof
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs
using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Net;
using System.Net.Http;
using RoboMVC.Contracts;
using RoboMVC.Model;
namespace RoboMVC.Web.Controllers.jQgrid
{
public class ProductsJQgridController : ApiControllerBase
{
public ProductsJQgridController(IRoboMVCUow uow)
{
Uow = uow;
}
public dynamic GetProducts4JqGrid(string sidx, string sord, int page, int rows)
{
//var products = Uow.Product.GetAllProducts().OrderBy(e => e.ProductId) as IEnumerable<Product>;
var pageIndex = Convert.ToInt32(page) - 1;
var pageSize = rows;
var totalRecords = Uow.Product.Count();
var totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
var products = Uow.Product.GetAllProducts().OrderBy(e => e.ProductId).Skip(pageIndex * pageSize).Take(pageSize) as IEnumerable<Product>;
return new
{
total = totalPages,
page = page,
records = totalRecords,
rows =
(
from product in products
select new
{
id = product.ProductId,
cell = new object[]
{
product.ProductId,
product.Description,
product.SalePrice,
product.SaleCommissionFactor,
product.Stock,
product.StockMax,
product.StockMin,
product.DateOfEntry,
product.LastDateOfSale,
product.SKU,
product.LastCostPaid,
product.Weight,
product.Image,
product.Categoy,
}
}).ToList()
};
}
public HttpResponseMessage Put( int id, Product product)
{
product.ProductId = Convert.ToInt32(id);
Uow.Product.Update(product);
Uow.Commit();
var result = new HttpResponseMessage(HttpStatusCode.NoContent);
return result;
}
public HttpResponseMessage Post(int id, Product product)
{
product.ProductId = Convert.ToInt32(id);
product = Uow.Product.Add(product);
Uow.Commit();
var response = Request.CreateResponse<Product>(HttpStatusCode.Created, product);
string uri = Url.Route(null, new { id = product.ProductId });
response.Headers.Location = new Uri(Request.RequestUri, uri);
return response;
}
public HttpResponseMessage Delete(int id)
{
Uow.Product.Delete(id);
Uow.Commit();
var result = new HttpResponseMessage(HttpStatusCode.NoContent);
return result;
}
}
}
<script>
var API_URL = "/api/ProductsJQgrid/";
jQuery("#gridMain").jqGrid({
//http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options
url: "/api/ProductsJQgrid/GetProducts4JqGrid/",
datatype: 'json',
mtype: 'GET',
pager: '#pagernav',
viewrecords: true,
height: '60%',
width: '100%',
hoverrows: true,
rownumbers: true,
shrinkToFit: true,
gridview: true,
search: true,
ignoreCase:true,
loadonce: false,
viewsortcols: [false, "horizontal", true],
imgpath: '../../Content/jquery.jqGrid/content/images/',
rowNum: 10,
cache: true,
rowList: [10, 20, 30],
sortable: true,
sortname: 'productId',
sortorder: "desc",
// sorttype: "text",
caption: "CRUD With ASP.NET Web API",
autowidth: true,
colNames: ['productId', 'Description', 'SalePrice', 'SaleCommissionFactor', 'Stock', 'StockMax', 'StockMin', 'DateOfEntry', 'LastDateOfSale', 'SKU', 'LastCostPaid', 'Weight', '<image src=images/arrow-right.gif width=16 height=16>', 'Categoy'],
colModel: [
//http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options
{ key:true, name: 'productId', index: 'productId', width: 40, search : true , sorttype: "int", editable: false },
{ name: 'description', index: 'description', editable: true, edittype: 'text', width: 70 },
{ name: 'salePrice', index: 'salePrice', editable: true, edittype: 'text', width: 50, align: "right", sorttype: "float", formatter: "number" },
{ name: 'saleCommissionFactor', index: 'saleCommissionFactor', editable: true, edittype: 'text', width: 50, align: "right", sorttype: "float", formatter: "number" },
{ name: 'stock', index: 'stock', editable: true, edittype: 'text', width: 50, align: "right", sorttype: "int" },
{ name: 'stockMax', index: 'stockMax', editable: true, cellEdit:true, edittype: 'text', width: 50, align: "right", sorttype: "int"},
{ name: 'stockMin', index: 'stockMin', editable: true, edittype: 'text', width: 50, align: "right", sorttype: "int"},
{ name: 'dateOfEntry', index: 'dateOfEntry', editable: true, edittype: 'text', width: 50, align: "right", sorttype: "date", formatter: "date" },
{ name: 'lastDateOfSale', index: 'lastDateOfSale', editable: true, edittype: 'text', width: 50, align: "right", sorttype: "date", formatter: "date" },
{ name: 'sKU', index: 'sKU', editable: true, edittype: 'text', width: 70 },
{ name: 'lastCostPaid', index: 'lastCostPaid', editable: true, edittype: 'text', width: 50, align: "right", sorttype: "float", formatter: "number" },
{ name: 'weight', index: 'weight', editable: true, edittype: 'text', width: 70 },
{ name: 'image', index: 'image', editable: false, search:false, width: 50, align: "right", },
{ name: 'categoy', index: 'categoy', editable: true, edittype: 'text', width: 70 }
],
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: true,
id: "id", // from the controller returned value
cell: "cell",
search: "_search"
},
subGrid: true
});
function updateDialog(action) {
return {
url: "/api/ProductsJQgrid/"
, closeAfterAdd: true
, closeAfterEdit: true
, afterShowForm: function (formId) { }
, modal: true
, onclickSubmit: function (params) {
var list = $("#gridMain");
var selectedRow = list.getGridParam("selrow");
var rowData = list.getRowData(selectedRow);
params.mtype = action;
params.url += rowData.productId;
debugger;
// image has the right data here
}
, width: "600"
};
}
jQuery("#gridMain")
.jqGrid('navGrid', '#pagernav',
{ add: true, edit: true, del: true, search: true,refresh: true },
updateDialog('Put'),
updateDialog('Post'),
updateDialog('Delete'),
{ sopt: ["cn"] } // Search options. Some options can be set on column level
)
// .filterToolbar({ autoSearch: false, searchOnEnter: false, stringResult: true })
;
$(window).bind('resize', function () {
jQuery("#gridMain").setGridWidth($('#parentDiv').width() - 30, true);
}).trigger('resize');
</script>

jqgrid with web api not getting populated

I am very new to jqGrid. I am trying to load simple jqgrid using asp.net web api.
The api send back the list of emailDto. The emailDto is plain class with 3 public properties
The problem is the jqgrid is not getting populated. Any help is very much appreciated.
function dataBindToGrid() {
var lastsel;
$("#emailgrid").jqGrid({
url: '/api/email/',
datatype: "json",
mytype: 'GET',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
colNames: ['Address ID', 'Type', 'Email'],
colModel: [{ name: 'Address_ID', width: 70, primaryKey: true, editable: false, sortable: false, hidden: false, align: 'left' },
{ name: 'Email_Type', width: 70, editable: true, align: 'left', sortable: false },
{ name: 'Email_Address', width: 200, editable: true, align: 'left', sortable: false }
],
onSelectRow: function (id) {
if (id && id !== lastsel) {
var grid = $("#emailgrid");
grid.restoreRow(lastsel);
grid.editRow(id, true);
lastsel = id;
}
},
//This event fires after all the data is loaded into the grid
gridComplete: function () {
//Get ids for all current rows
var dataIds = $('#emailgrid').jqGrid('getDataIDs');
for (var i = 0; i < dataIds.length; i++) {
//Put row in edit state
$("#emailgrid").jqGrid('editRow', dataIds[i], false);
}
},
rowNum: 3,
viewrecords: true,
caption: "Email Addresses"
});
}
When configured for jsondatatype, jqGrid expects data in the following json format:
{
"total": "xxx",
"page": "yyy",
"records": "zzz",
"rows" : [
{"id" :"1", "cell" :["cell11", "cell12", "cell13"]},
{"id" :"2", "cell":["cell21", "cell22", "cell23"]},
...
]
}
data returned must match this otherwise it will not work. This is the default json structure (you can change this if you want). Depending on what browser you are using, you should be able to see the ajax request and response with what data is being sent and returned when the grid is building itself (Firefox use firebug, IE use the developer toolbar)
as per here
Solved!
Just added to jqGrid below and it works.
jsonReader: {
repeatitems: false,
page: function () { return 1; },
root: function (obj) { return obj; },
records: function (obj) { return obj.length; }
},

MVC3 Razor Page using jqGrid not rebinding

I have a jqGrid on a view page and it is loaded based on gathering data from a few select lists.
The first time through all is fine. If I change one of the select lists the .change function is triggered but the .jqGrid doesnt fire so the Controller method isnt hit.
My jqGrid code
$("#Builds").change(function () {
var programID = $("#ProgramID").val();
var buildID = $('#Builds').val();
$("#UpdateBuild").show();
// Set up the jquery grid
$("#jqTable").jqGrid({
// Ajax related configurations
url: '#Url.Action("_CustomBinding")',
datatype: "json",
mtype: "POST",
postData: {
programID: programID,
buildID: buildID
},
// Specify the column names
colNames: ["Assembly ID", "Assembly Name", "Cost", "Order", "Budget Report", "Partner Request", "Display"],
// Configure the columns
colModel: [
{ name: "AssemblyID", index: "AssemblyID", width: 40, align: "left", editable: false },
{ name: "AssemblyName", index: "AssemblyName", width: 100, align: "left", editable: false },
{ name: "AssemblyCost", index: "AssemblyCost", width: 40, align: "left", formatter: "currency", editable: true },
{ name: "AssemblyOrder", index: "AssemblyOrder", width: 30, align: "left", editable: true },
{ name: "AddToBudgetReport", index: "AddToBudgetReport", width: 40, align: "left", formatter: "checkbox", editable:true, edittype:'checkbox'},
{ name: "AddToPartnerRequest", index: "AddToPartnerRequest", width: 45, align: "left", formatter: "checkbox", editable:true, edittype:'checkbox'},
{ name: "Show", index: "Show", width: 20, align: "left", formatter: "checkbox", editable:true, edittype:'checkbox'}],
// Grid total width and height and formatting
width: 650,
height: 200,
altrows: true,
// Paging
toppager: true,
pager: $("#jqTablePager"),
rowNum: 10,
rowList: [10, 20, 30],
viewrecords: true, // Specify if "total number of records" is displayed
emptyrecords: 'No records to display',
// Default sorting
sortname: "AssemblyID",
sortorder: "asc",
// Grid caption
caption: "Build Template"
}).navGrid("#jqTablePager",
{ refresh: true, add: true, edit: true, del: true },
{}, // settings for edit
{}, // settings for add
{}, // settings for delete
{sopt: ["cn"]} // Search options. Some options can be set on column level
);
});
My controller Code:
[HttpPost]
public JsonResult _CustomBinding(string programID, string buildID, int page, int rows)
{
/* Variable Declarations */
BuildsRepository br = new BuildsRepository();
IEnumerable<ProgramsAssemblyBuilds> pab = br.GetProgramAssembliesBuilds(Convert.ToInt32(programID), Convert.ToInt32(buildID));
// Calculate the total number of pages
var totalRecords = pab.Count();
var totalPages = (int)Math.Ceiling((double)totalRecords / (double)rows);
var data = (from s in pab
select new
{
AssemblyID = s.AssemblyID,
cell = new object[] { s.AssemblyID, s.AssemblyName, s.AssemblyCost, s.AssemblyOrder, s.AddToBudgetReport, s.AddToPartnerRequest, s.Show}
}).ToArray();
var jsonData = new
{
total = totalPages,
page = page,
records = totalRecords,
rows = data.Skip((page - 1) * rows).Take(rows)
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
Anyone have any ideas on this one?
Thanks
You should create the grid only once. So you should place the code
$("#jqTable").jqGrid({ ... });
outside of the change event handler.
To reload the grid you should use
$("#Builds").change(function () {
$("#jqTable").trigger("reloadGrid", [{page: 1}]);
$("#UpdateBuild").show();
});
At the end to have actual values from "#ProgramID" and '#Builds' you should use functions (methods) as the programID and buildID properties of postData:
// Set up the jquery grid
$("#jqTable").jqGrid({
// Ajax related configurations
url: '#Url.Action("_CustomBinding")',
datatype: "json",
mtype: "POST",
postData: {
programID: function() { return $("#ProgramID").val(); },
buildID: function() { return $('#Builds').val(); }
},
...
});
See more information here.

Display data in jqGrid Footer row in MVC Application

I need help display data in the jqGrid footer row. This is my configuration on the Server. Notice the userdata = (Hours) line.
// Format the data for the jqGrid
var jsonData = new
{
total = totalPages,
page = page,
records = totalRecords,
rows = (
from a in activities
select new
{
id = a.ActivityId,
cell = new string[] {
a.ActivityId.ToString(),
DateTime.Parse(a.Date.ToString()).ToShortDateString(),
a.Person.Name.ToString(),
a.ActivityName.ToString(),
a.Hours.ToString()
}
}).ToArray(),
userdata = (Hours)
};
// Return the result in json
return Json(jsonData, JsonRequestBehavior.AllowGet);
The userData amount that I need displayed in the footer is coming through in the JSON. I am using Fiddler to view it. Here is a screenshot of the fiddler view:
alt text http://shirey.technologyblends.com/Content/images/json.jpg
I need to display this value of "12" in the footer. This the HTML I am using to read the JSON:
jQuery("#list").jqGrid({
url: gridDataUrl + '?startDate=' + startDate.toJSONString() + '&endDate=' + endDate.toJSONString(),
datatype: "json",
mtype: 'GET',
colNames: ['Activity ID', 'Date', 'Employee Name', 'Activity', 'Hours'],
colModel: [
{ name: 'ActivityId', index: 'ActivityId', width: 40, align: 'left' },
{ name: 'Date', index: 'Date', width: 50, align: 'left' },
{ name: 'Person.Name', index: 'Person.Name', width: 100, align: 'left', resizable: true },
{ name: 'ActivityName', index: 'ActivityName', width: 100, align: 'left', resizable: true },
{ name: 'Hours', index: 'Hours', width: 40, align: 'left' }
],
loadtext: 'Loading Activities...',
multiselect: true,
rowNum: 20,
rowList: [10, 20, 30],
imgpath: gridimgpath,
height: 'auto',
width: '700',
pager: jQuery('#pager'),
sortname: 'ActivityId',
viewrecords: true,
sortorder: "desc",
caption: "Activities",
footerrow: true, userDataOnFooter: true, altRows: true
}).navGrid('#pager', { search: true, edit: false, add: false, del: false, searchtext: "Search Activities" });
Try to use following
var jsonData = new {
total = totalPages,
page = page,
records = totalRecords,
rows = (
from a in activities
select new {
id = a.ActivityId,
cell = new string[] {
a.ActivityId.ToString(),
DateTime.Parse(a.Date.ToString()).ToShortDateString(),
a.Person.Name.ToString(),
a.ActivityName.ToString(),
a.Hours.ToString()
}
}).ToArray(),
userdata = new {
Hours = 12
}
};
then the userdata part of the JSON data will be
"userdata":{"Hours":12}
which follows to displaying of the bold value 12 in the column Hours of the footer part of the jqGrid table.

Resources