I am working on a sample of JQ Grid. I worked with JQ Grid so many times in simple web application and website, there i didn't face any problem. But this is the first time i am working with MVC 4 . I am creating 1 million data dynamically and converting it to the json. In the view i am accepting the json and bind to the jqGrid. But even document.ready function is not firing. Here i am giving my codes. Any help is appreciated .
View :
@{
ViewBag.Title = "getJson";
}
@Styles.Render("~/css/jquery-ui.css")
@Styles.Render("~/css/jquery-ui-1.10.4.css")
@Styles.Render("~/themes/ui.jqgrid.css")
@Scripts.Render("~/js/jquery-2.1.1.js")
@Scripts.Render("~/js/trirand/i18n/grid.locale-en.js")
@Scripts.Render("~/js/trirand/jquery.jqGrid.js")
@Scripts.Render("~/js/trirand/jquery.jqDatePicker.js")
@Scripts.Render("~/js/trirand/jquery.jqAutoComplete.js")
@Scripts.Render("~/js/JQGridSettings.js")
<style type="text/css">
#ui-datepicker-div {
font-size: 11px;
}
.ui-menu-item {
font-size: 11px;
}
.ui-autocomplete {
font-size: 11px;
}
</style>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
My JS :
$(document).ready(function () {
alert("");
$("#jqGrid").jqGrid({
async: false,
url: '/Home/getJson',
mtype: "GET",
datatype: "json",
page: 1,
colNames: ['Order ID', 'Customer ID', 'Order Date', 'Freight', 'Ship Name'],
colModel: [
{ name: 'OrderID', key: true, width: 75 },
{
name: 'CustomerID',
width: 150,
stype: "select",
searchoptions: { value: "[All]:[All];ALFKI:ALFKI;ANATR:ANATR;ANTON:ANTON;AROUT:AROUT;BERGS:BERGS;BLAUS:BLAUS;BLONP:BLONP;BOLID:BOLID;BONAP:BONAP;BOTTM:BOTTM;BSBEV:BSBEV;CACTU:CACTU;CENTC:CENTC;CHOPS:CHOPS;COMMI:COMMI;CONSH:CONSH;DRACD:DRACD;DUMON:DUMON;EASTC:EASTC;ERNSH:ERNSH;FAMIA:FAMIA;FOLIG:FOLIG;FOLKO:FOLKO;FRANK:FRANK;FRANR:FRANR;FRANS:FRANS;FURIB:FURIB;GALED:GALED;GODOS:GODOS;GOURL:GOURL;GREAL:GREAL;GROSR:GROSR;HANAR:HANAR;HILAA:HILAA;HUNGC:HUNGC;HUNGO:HUNGO;ISLAT:ISLAT;KOENE:KOENE;LACOR:LACOR;LAMAI:LAMAI;LAUGB:LAUGB;LAZYK:LAZYK;LEHMS:LEHMS;LETSS:LETSS;LILAS:LILAS;LINOD:LINOD;LONEP:LONEP;MAGAA:MAGAA;MAISD:MAISD;MEREP:MEREP;MORGK:MORGK;NORTS:NORTS;OCEAN:OCEAN;OLDWO:OLDWO;OTTIK:OTTIK;PERIC:PERIC;PICCO:PICCO;PRINI:PRINI;QUEDE:QUEDE;QUEEN:QUEEN;QUICK:QUICK;RANCH:RANCH;RATTC:RATTC;REGGC:REGGC;RICAR:RICAR;RICSU:RICSU;ROMEY:ROMEY;SANTG:SANTG;SAVEA:SAVEA;SEVES:SEVES;SIMOB:SIMOB;SPECD:SPECD;SPLIR:SPLIR;SUPRD:SUPRD;THEBI:THEBI;THECR:THECR;TOMSP:TOMSP;TORTU:TORTU;TRADH:TRADH;TRAIH:TRAIH;VAFFE:VAFFE;VICTE:VICTE;VINET:VINET;WANDK:WANDK;WARTH:WARTH;WELLI:WELLI;WHITC:WHITC;WILMK:WILMK;WOLZA:WOLZA" }
},
{
name: 'OrderDate',
width: 150,
searchoptions: {
dataInit: function (element) {
$(element).datepicker({
id: 'orderDate_datePicker',
dateFormat: 'M/d/yy',
minDate: new Date(2010, 0, 1),
maxDate: new Date(2020, 0, 1),
showOn: 'focus'
});
}
}
},
{ name: 'Freight', width: 150 },
{
name: 'ShipName',
width: 150,
searchoptions: {
dataInit: function (element) {
$(element).autocomplete({
id: 'AutoComplete',
source: 'data.json',
autoFocus: true
});
}
}
}
],
width: 750,
height: 250,
rowNum: 20,
pager: "#jqGridPager"
});
$('#jqGrid').filterToolbar();
});
My controller :
namespace JQGrid.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public JsonResult getJson()
{
JsonModel jsm = new JsonModel();
var collection=jsm.jsonResultString();
return (Json(collection, JsonRequestBehavior.AllowGet));
}
protected override JsonResult Json(object data, string contentType, System.Text.Encoding contentEncoding, JsonRequestBehavior behavior)
{
return new JsonResult()
{
Data = data,
ContentType = contentType,
ContentEncoding = contentEncoding,
JsonRequestBehavior = behavior,
MaxJsonLength = Int32.MaxValue
};
}
}
}
And when i checked in the browser console. The page rendered as the following . Please look.
<html>
<head></head>
<body>
<pre>
"[{\"OrderID\":\"0\",\"CustomerID\":\"SCT0\",\"Ord…
</body>
</html>
Thank you.