JQGrid Will Not Display in MVC4 CSHTML View - json

I am having difficulties getting a jqgrid to display in my MVC 4 web application view. I have tested the exact same view code in a standard html document and the grid displays, however only the h2 tag shows up in my Index view. I've even managed to get the model information to display in html document, so I'm really confused as to why the grid won't even load in my MVC view.
My controller code for my grid data is as follows:
public ActionResult GridData()
{
var query = (from u in db.Users
join ur in db.User_Relationship on u.User_ID equals ur.Child_ID
join lu in db.Lookups on u.First_LanguageID equals lu.LookupID
join ut in db.User_Tests on u.User_ID equals ut.User_ID into ps
from ut in ps.DefaultIfEmpty()
where ur.Parent_ID == 45875
group new { u, lu } by new
{
u.User_ID, u.Forename, u.Surname, u.Client_Code,
u.User_Name, u.Password, u.Email, u.Gender,
u.Report_date, u.EmailDate, u.Job_Function,
lu.LookupValue
} into g
select new UserViewModel
{
User_ID = g.Key.User_ID,
Forename = g.Key.Forename,
Surname = g.Key.Surname,
Client_Code = g.Key.Client_Code,
User_Name = g.Key.User_Name,
Password = g.Key.Password,
Email = g.Key.Email,
Gender = g.Key.Gender,
Report_Date = g.Key.Report_date,
Email_Date = g.Key.EmailDate,
Job_Function = g.Key.Job_Function,
Lookup_Value = g.Key.LookupValue
});
var jsonData = new
{
total = 10,
page = 1,
records = 50,
rows = query.Select(x => new
{
x.User_ID, x.Forename, x.Surname, x.Client_Code, x.User_Name,
x.Password, x.Email, x.Gender, x.Report_Date, x.Email_Date,
x.Job_Function, x.Lookup_Value
}).ToList().Select(x => new
{
id = x.User_ID,
cell = new string[]
{
x.User_ID.ToString(),
x.Forename,
x.Surname,
x.Client_Code.ToString(),
x.User_Name,
x.Password,
x.Email,
x.Gender,
x.Report_Date.ToString(),
x.Email_Date.ToString(),
x.Job_Function,
x.Lookup_Value
}}).ToArray(),
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
The method for Index is as follows:
public ActionResult Index()
{
return View();
}
My view code for Index.cshtml is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.8.23.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function ()
{
jQuery("#list").jqGrid(
{
url: '/WebFormUserList/GridData',
datatype: 'json',
mtype: 'GET',
colNames:
[
'User_ID', 'Forename', 'Surname', 'Client_Code', 'User_Name',
'Password', 'Email', 'Gender', 'Report_Date', 'Email_Date',
'Job_Function', 'Lookup_Value'
],
colModel:
[
{ name: 'User_ID', index: 'User_ID', width: '50', align: 'centre' },
{ name: 'Forename', index: 'Forename', width: '50', align: 'centre' },
{ name: 'Surname', index: 'Surname', width: '50', align: 'centre' },
{ name: 'Client_Code', index: 'Client_Code', width: '50', align: 'centre' },
{ name: 'User_Name', index: 'User_Name', width: '50', align: 'centre' },
{ name: 'Password', index: 'Password', width: '50', align: 'centre' },
{ name: 'Email', index: 'Email', width: '50', align: 'centre' },
{ name: 'Gender', index: 'Gender', width: '50', align: 'centre' },
{ name: 'Report_Date', index: 'Report_Date', width: '50', align: 'centre' },
{ name: 'Email_Date', index: 'Email_Date', width: '50', align: 'centre' },
//{ name: 'Test_Count', index: 'Test_Count', width: '50', align: 'centre' },
//{ name: 'Test_Completed', index: 'Test_Completed', width: '50', align: 'centre' },
{ name: 'Job_Function', index: 'Job_Function', width: '50', align: 'centre' },
{ name: 'Lookup_Value', index: 'Lookup_Value', width: '50', align: 'centre' },
],
pager: jQuery('#pager'),
height: 'auto',
width: '1000',
rowNum: 10,
jsonReader: { repeatitems: false },
rowList: [5, 10, 20, 50],
sortname: 'Id',
sortorder: "desc",
viewrecords: true,
imgpath: '/css/ui-lightness/images',
caption: 'My first grid'
});
});
</script>
</head>
<body>
<h2>My Grid Data</h2>
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
</body>
</html>
Any help would be greatly appreciated as I'm not exactly sure what is going wrong. I'm fairly certain the json returned is in the correct format as the html document happily accepts it.
My only thoughts is that because the grid won't even load, that something is happening to interrupt its creation within the _layout.html of MVC4.
Again, thanks in advance.

Related

Using jqGrid with .NET MVC Json Data won't load -columns showing ok

I am having a tough time loading data from .NET MVC 4.0.01 and I have been doing extensive research on the JQgrid site and documentation but cannot seem to find the issue.
And in my Grid (I'm using jqGrid 4.9.2)
$(function () {
gridMs = $("#jqGridMSats").jqGrid({
url: "Status/GetMissingItems",
//contentType: "application/json",
datatype: "json",
loadError: function (xhr, status, error) { alert(status + " " + error); },
mtype: "GET",
colNames: ["SattId", "SattUId", "SattScannedId", "SattName",
"SattAntenna", "SattCount", "SattFirstDiscovered", "SattLastSeen", "ZoneUId",
"ContainerId", "SattPlanUId", "Details"],
colModel: [{ name: "SattId", index: "SattId", hidden: false, width: 100 },
{ name: "SattUId", index: "SattUId", align: 'left', hidden: true, search: false, sortable: true, width: 75 },
{ name: "SattScannedId", index: "SattScannedId", align: 'left', search: false, sortable: true, width: 75 },
{ name: "SattName", index: "SattName", align: 'center', hidden: false, width: 30 },
{ name: "SattAntenna", index: "SattAntenna", align: 'center', hidden: false, width: 30 },
{ name: "SattCount", index: "SattCount", align: 'center', hidden: false, width: 30 },
{ name: "SattFirstDiscovered", index: "SattFirstDiscovered", align: 'center', hidden: true, formatter: 'date',
formatoptions: { newformat: "d-M-Y" }, search: true, sortable: true, width: 80,
searchoptions: {
dataInit: function (element) {
$(element).daterangepicker({
id: 'Discovered',
dateFormat: 'yy/mm/dd',
minDate: new Date(2014, 0, 1),
maxDate: new Date(2025, 0, 1),
showOn: 'focus',
onSelect: function () {
//var startDate = $(el).val().start;
//var endDate = $(el).val().end;
//alert("Start: " + startDate + " End: " + endDate);
}
});
},
// show search options
sopt: ["ge", "le", "eq"] // ge = greater or equal to, le = less or equal to, eq = equal to
}
},
{
name: "SattLastSeen", index: "SattLastSeen", align: 'center', stype: 'text', formatter: 'date',
formatoptions: { newformat: "d-M-Y" }, search: true, sortable: true, width: 90,
searchoptions: {
// dataInit is the client-side event that fires upon initializing the toolbar search field for a column
// use it to place a third party control to customize the toolbar
dataInit: function (el) {
$(el).daterangepicker({
id: 'drpLS',
dateFormat: 'yy/mm/dd',
minDate: new Date(2014, 0, 1),
maxDate: new Date(2025, 0, 1),
showOn: 'focus',
onClose: function () {
var misDate = $(el).val();
var dtArray = misDate.split('-');
var startdate = dtArray[0].trim();
var endDate = dtArray[1].trim();
}
});
},
// show search options
sopt: ["ge", "le", "eq"] // ge = greater or equal to, le = less or equal to, eq = equal to
}
},
{ name: "ZoneUId", index: "ZoneUId", align: 'center', sortable: true, width: 60 },
{ name: "ContainerId", index: "ContainerId", align: 'center', hidden: false, sortable: true, width: 60 },
{ name: "SattPlanUId", index: "SattPlanUId", align: 'center', hidden: true, sortable: true, width: 60 },
{ name: "Details", index: "Details", align: 'center', width: 30, hidden: true, search: false, formatter: function (cellvalue) {
return "<img src='../../Content/finder.png' alt='Locate sat' />";
}
}
],
width: 770,
height: 'auto',
loadonce: true,
//rowNum: 11,
pager: "#jqGridPagerMSatts",
viewrecords: true,
caption: "Missing",
gridview: true,
autoencode: true,
footerrow: true,
loadComplete: function () { alert("loaded"); },
jsonReader: {
root: "rows",
repeatitems: false,
page: function (obj) { return 1; }, // page as 1
total: function (obj) { return 1; }, // total as 1
records: function (obj) { return obj.length; }
},
onCellSelect: function (rowid, index) {
var cm = gridMs.jqGrid('getGridParam', 'colModel');
if (cm[index].name == 'Details' && satValue.indexOf("----") == -1) {
alert('test');
}
},
});
gridMs.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, searchOperators: true });
gridMs.navGrid('#jqGridPagerMSatts', { edit: false, add: false, del: false, search: false });
});
My client side references:
<link href="<%= Url.Content("~/Scripts/jqGridM/css/ui.jqgrid.css") %>" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jqGridM/js/i18n/grid.locale-en.js") %>" ></script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jqGridM/js/jquery.jqGrid.min.js") %>" ></script>
My columns load and the total records show. But cannot get the data to show. I've tried changing the controller to return a JavascriptSerializer format but still the same. I also removed the dates column thinking maybe it's a format issue but still the same results- no data shown. I get no errors at all when checking (Response) from Chrome. I have another grid in the same page which I can push dynamic data to just fine however loading the data from MVC Action is the problem. Is there something I am missing in my code? Any help would be greatly appreciated.
Here is how the FULL page renders in Chrome. If I invoke the missingTagGrid function first that Grid shows the data fine. Then if I select the resetGrid afterwards it loads fine too. If I select the resetGrid function first however the other grid won't load but it will show the colums and total pages....no errors in Chrome.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title></title>
<link href="/Content/Css/Reset.css" rel="stylesheet" type="text/css" />
<link href="/Content/Css/History.css" rel="stylesheet" type="text/css" />
<link href="/Content/Css/AnyTime.css" rel="stylesheet" type="text/css" />
<link href="/Content/Inventory/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="/Content/Inventory/ui.daterangepicker.css" rel="stylesheet" type="text/css" />
<link href="/Scripts/jqGridM/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="/Content/Css/spectrum.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/Scripts/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/Scripts/spectrum.js"></script>
<link type="text/css" href="/Content/telerik.common.min.css" rel="stylesheet"/>
<link type="text/css" href="/Content/telerik.vista.min.css" rel="stylesheet"/>
</head>
<body>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var inventoryData = [];
var missingData = [];
var mydata;
var rowMissing = 0;
var rowTotals;
var rowMissingMis = 0;
var rowtotalsMis;
var isMissing = false;
var mydata = [];
var newCompArray = [];
var machineName = 'bcd44e4c';
var registeredGrp = 'ACME Lgstks';
</script>
<form method="post" action="Status" id="form1"><div>
<div id="timeDiv"></div>
<div id="stsGrid" style="float: left;">
<div id="tagStatus" style="width: 560px;">
<div id="invGrid">
<table id="jqGrid"></table>
<div id="jqGridPager"></div></div>
<div id="misGrid">
<table id="jqGridMTags"></table>
<div id="jqGridPagerMTags"></div>
</div>
</div>
</div>
</div>
<div style="clear: both;">
</div>
</form>
<div id="removeChildModal" class="jqmWindow section">
</div>
<script type="text/javascript">
$('#misGrid').hide();
</script>
<script type="text/javascript">
function resetGrid() {
$('#misGrid').hide();
$('#invGrid').show();
var gridData;
var rowIds;
var messenger = $.connection.messenger;
$("#jqGridMTags").hide();
gridInv = null;
//<![CDATA[
$(function () {
'use strict';
var mydata = [], //Need this for SignalR
gridInv = $("#jqGrid");
gridInv.jqGrid({
datatype: "jsonstring",
datastr: inventoryData,
colNames: ["Antenna", "Content", "Count", "Direction", "Discovered", "Duration", "EPC", "Freq","LastSeen", "Name", "Pack", "RSSI", "Size", "Speed", "Title", "Type", "Zone", "Find"],
colModel: [{name: "Antenna", index: "Antenna", key: true, hidden: true, width: 100, cellattr: function (rowId) {if (rowId < 5) { return 'colspan=8'; }}
},
{ name: "Content", index: "Content", align: 'left', search: false, sortable: true, width: 75 },
{ name: "Count", index: "Count", align: 'center', search: false, sortable: true, width: 40 },
{ name: "Direction", index: "Direction", align: 'center', hidden: true, width: 30 },
{ name: "Discovered", index: "Discovered", align: 'center', stype: 'text', search: true, sortable: true, width: 80,
searchoptions: {
// dataInit is the client-side event that fires upon initializing the toolbar search field for a column
// use it to place a third party control to customize the toolbar
dataInit: function (element) {$(element).daterangepicker({id: 'Discovered',dateFormat: 'yy/mm/dd',minDate: new Date(2014, 0, 1),maxDate: new Date(2025, 0, 1),
showOn: 'focus'
});
},
// show search options
sopt: ["ge", "le", "eq"] // ge = greater or equal to, le = less or equal to, eq = equal to
}
},
{ name: "Duration", index: "Duration", align: 'center', hidden: true, width: 60 },
{ name: "EPC", index: "EPC", align: 'center', sortable: true, width: 140 },
{ name: "Freq", index: "Freq", align: 'center', hidden: true, sortable: true, width: 50 },
{
name: "LastSeen", index: "LastSeen", align: 'center', stype: 'text', search: true, sortable: true, width: 80,
searchoptions: {
dataInit: function (element) {$(element).daterangepicker({id: 'LastSeen',dateFormat: 'yy/mm/dd',minDate: new Date(2014, 0, 1),maxDate: new Date(2025, 0, 1),showOn: 'focus'});},
// show search options
sopt: ["ge", "le", "eq"] // ge = greater or equal to, le = less or equal to, eq = equal to
}
},
{ name: "Name", index: "Name", align: 'center', sortable: true, width: 50 },
{ name: "Pack", index: "Pack", align: 'center', hidden: true, sortable: true, width: 60 },
{ name: "RSSI", index: "RSSI", align: 'center', hidden: true, sortable: true, width: 50 },
{ name: "Size", index: "Size", align: 'center', hidden: true, sortable: true, width: 60 },
{ name: "Speed", index: "Speed", align: 'center', hidden: true, sortable: true, width: 60 },
{ name: "Title", index: "Title", align: 'center', hidden: true, sortable: true, width: 60 },
{ name: "Type", index: "Type", align: 'center', width: 33, search: false, formatter: function (cellvalue) {
if (cellvalue == "----") return "----";
if (cellvalue == "None" || cellvalue === 'undefined' || cellvalue == '')
return "<img src='../../Scripts/Tree/skin/0000.png' alt='Locate tag' />";
else
return "<img src='../../Scripts/Tree/skin/" + cellvalue + ".png' alt='Locate tag' />";
}
},
{ name: "Zone", index: "Zone", align: 'center', search: true, sortable: true, width: 50 },
{ name: "Find", index: "Find", align: 'center', width: 25, search: false, formatter: function (cellvalue) {
if (cellvalue == "----") return "----";
else
return "<img src='../../Content/finder.png' alt='Locate tag' />";
}
}
],
width: 770,
height: 428,
gridview: true,
rowattr: function (rd) {
if (rd.Find === "----") { // verify it's Zone parent
return { "class": "zoneHdr" };
}
else
return { "class": "selected-row" };
},
loadonce: true,
rowNum: 11,
pager: "#jqGridPager",
sortname: 'Antenna',
treeGrid: true,
treeGridModel: 'adjacency',
treedatatype: "jsonstring",
ExpandColumn: 'Content',
viewrecords: true,
caption: "Inventory List",
footerrow: true,
grouping: false,
jsonReader: {
repeatitems: false,
root: function (obj) { return obj; },
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.length; }
},
onCellSelect: function (rowid, index) {
var tagValue = gridInv.jqGrid('getCell', rowid, 'Title');
var zneValue = gridInv.jqGrid('getCell', rowid, 'Zone');
var cm = gridInv.jqGrid('getGridParam', 'colModel');
if (cm[index].name == 'Find' && tagValue.indexOf("----") == -1) {
localStorage.setItem("tagStore", tagValue);
localStorage.setItem("zneStore", zneValue);
}
window.location = "/Package";
},
});
gridInv.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, searchOperators: true });
gridInv.navGrid('#jqGridPager', { edit: false, add: false, del: false, search: false });
gridInv.navButtonAdd('#jqGridPager', {
caption: "Click to show missing tags",
buttonicon: "ui-icon-tag",
position: "last",
onClickButton: function () {
alert("Deleting Row");
}
});
});
gridData = $('#jqGrid').jqGrid('getRowData');
for (var key in gridData[0]) {rowIds = $('#jqGrid').jqGrid('getCol', key, true);
break;
}
if (typeof gridData != "undefined" && typeof rowIds != "undefined") {
$.each(gridData, function (id) {var $row = $('#' + rowIds[id].id);
$row.show();});
}
rowTotals = ($('#jqGrid').getGridParam('records') - 4);
rowMissing = 0;
$('#jqGrid').jqGrid("footerData", "set", { Content: "<span style='color:red'>Total Missing:</span>", Count: "<span style='color:red'>" + rowMissing + "</span>", LastSeen: "Total Inventoried:", Name: rowTotals });
$("#jqGrid").trigger("reloadGrid");
messenger.server.broadCastReaderConfig(false, '');
//
}
///Missing Tags
function missingTagGrid() {
$('#misGrid').show();
$('#invGrid').hide();
var gridMs = null;
//<![CDATA[
$(function () {
gridMs = $("#jqGridMTags").jqGrid({
url: "Status/GetMissingItems",
//contentType: "application/json",
datatype: "json",
loadError: function (xhr, status, error) { alert(status + " " + error); },
mtype: "GET",
colNames: ["TagId", "TagUId", "TagScannedId", "TagName", "TagAntenna", "TagCount", "TagFirstDiscovered", "TagLastSeen", "ZoneUId", "ContainerId", "FloorplanUId", "Details"],
colModel: [{ name: "TagId", index: "TagId", hidden: false, width: 100 },
{ name: "TagUId", index: "TagUId", align: 'left', hidden: true, search: false, sortable: true, width: 75 },
{ name: "TagScannedId", index: "TagScannedId", align: 'left', search: false, sortable: true, width: 75 },
{ name: "TagName", index: "TagName", align: 'center', hidden: false, width: 30 },
{ name: "TagAntenna", index: "TagAntenna", align: 'center', hidden: false, width: 30 },
{ name: "TagCount", index: "TagCount", align: 'center', hidden: false, width: 30 },
{
name: "TagFirstDiscovered", index: "TagFirstDiscovered", align: 'center', hidden: true, formatter: 'date',
formatoptions: { newformat: "d-M-Y" }, search: true, sortable: true, width: 80,
searchoptions: { dataInit: function (element) {
$(element).daterangepicker({
id: 'Discovered',
dateFormat: 'yy/mm/dd',
minDate: new Date(2014, 0, 1),
maxDate: new Date(2025, 0, 1),
showOn: 'focus',
onSelect: function () {
}
});
},
sopt: ["ge", "le", "eq"] // ge = greater or equal to, le = less or equal to, eq = equal to
}
},
{ name: "TagLastSeen", index: "TagLastSeen", align: 'center', stype: 'text', formatter: 'date',
formatoptions: { newformat: "d-M-Y" }, search: true, sortable: true, width: 90,
searchoptions: { dataInit: function (el) {
$(el).daterangepicker({
id: 'drpLS',
dateFormat: 'yy/mm/dd',
minDate: new Date(2014, 0, 1),
maxDate: new Date(2025, 0, 1),
showOn: 'focus',
onClose: function () {
var misDate = $(el).val();
var dtArray = misDate.split('-');
var startdate = dtArray[0].trim();
var endDate = dtArray[1].trim();
}
});
},
sopt: ["ge", "le", "eq"] // ge = greater or equal to, le = less or equal to, eq = equal to
}
},
{ name: "ZoneUId", index: "ZoneUId", align: 'center', sortable: true, width: 60 },
{ name: "ContainerId", index: "ContainerId", align: 'center', hidden: false, sortable: true, width: 60 },
{ name: "FloorplanUId", index: "FloorplanUId", align: 'center', hidden: true, sortable: true, width: 60 },
{ name: "Details", index: "Details", align: 'center', width: 30, hidden: true, search: false, formatter: function (cellvalue) {
return "<img src='../../Content/finder.png' alt='Locate tag' />";
}
}
],
width: 770,
height: 'auto',
loadonce: true,
pager: "#jqGridPagerMTags",
viewrecords: true,
caption: "Missing",
gridview: true,
autoencode: true,
footerrow: true,
jsonReader: {
root: "rows",
repeatitems: false,
page: function (obj) { return 1; }, // page as 1
total: function (obj) { return 1; }, // total as 1
records: function (obj) { return obj.length; }
},
onCellSelect: function (rowid, index) {
var cm = gridMs.jqGrid('getGridParam', 'colModel');
if (cm[index].name == 'Details' && tagValue.indexOf("----") == -1) {
alert('Pop up to decribe missing tag in detail');
}
},
});
gridMs.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, searchOperators: true });
gridMs.navGrid('#jqGridPagerMTags', { edit: false, add: false, del: false, search: false });
});
}
<!-- other content -->
<script type="text/javascript" src="/Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript" src="/Scripts/telerik.common.min.js"></script>
<script type="text/javascript" src="/Scripts/telerik.list.min.js"></script>
<script type="text/javascript" src="/Scripts/SignalR.StatusHub.js"></script>
<script type="text/javascript" src="/Scripts/trirand/jquery.jqDropDownList.min.js" ></script>
<script type="text/javascript" src="/Scripts/trirand/jquery.jqDatePicker.min.js" ></script>
<script type="text/javascript" src="/Scripts/trirand/jquery.jqAutoComplete.min.js" ></script>
<script type="text/javascript" src="/Scripts/jqGridM/js/i18n/grid.locale-en.js" ></script>
<script type="text/javascript" src="/Scripts/jqGridM/js/jquery.jqGrid.min.js" ></script>
<script type="text/javascript" src="/Scripts/jqGridM/js/jquery.jqGrid.src.js" ></script>
<script type="text/javascript" src="/Scripts/jquery-ui-1.10.4.custom.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ui.dialog.js"></script>
<script type="text/javascript" src="/Scripts/InventoryScripts/date.js"></script>
<script type="text/javascript" src="/Scripts/InventoryScripts/daterangepicker.jQuery.js"></script>
<script type="text/javascript" src="/Scripts/jquery.signalR-2.1.2.js"></script>
<script type="text/javascript" src="/signalr/hubs"></script>
</body>
</html>

You use wrong order of included JavaScript data and you placed some HTML element on the wrong place. For example you placed in <head> of the page the following JavaScript files
<script type="text/javascript" src="/Scripts/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/Scripts/spectrum.js"></script>
You have to include jQuery before jquery-1.11.0.min.js which depends from jQuery.
The next error: you included two different version of the same file. For example, You included jquery-1.11.0.min.js in the <head> and then placed jquery-ui-1.10.4.custom.js in the <body>. It's wrong. In the same way it's wrong to include both non-minimized and minimized version of the same JavaScript library. See jquery.jqGrid.src.js included directly after jquery.jqGrid.min.js.
You used jquery-1.7.1.js which is not an error, but I would strictly recommend you don't uses such retro version of jQuery. Instead of that you should use jQuery 1.11.3 or jQuery 2.1.4 if you don't need to support old web browsers IE6, IE7 and IE8.
I places <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> inside of <body>. It's wrong. All <meta> should be included directly after <title>. Don't forget to include
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
which is required to prevent using compatibility mode of IE.
Now about the code itself. It's difficult to read the code divided into many separate <script></script> parts. Moreover the code is either not full or some important functions will be not called or be called in the wrong order. You should first include jQuery, then include jqGrid and only after that you can use jqGrid method. Another problem: you define resetGrid and missingTagGrid function, but never call there (using resetGrid(); or missingTagGrid();).
One more problem: The code
$(function () {...});
is the short form of document ready function:
$(document).ready(function () {...});
which wait till the document which includes the <> is loaded and then execute the function inside of it (... part). In the case the usage of document ready inside of <body> (inside of the document) is not a good idea. You should wither remove $(function () { part, but place the code after HTML parts which you used in the handler (after <table id="jqGrid"></table> for example) or better to move the inside of <head>. Just examine once more the demo, which I posted before in the comment, under the aspect of the order included JavaScript files, the code, <head> and and <body>.
One more important aspect of JavaScript language: you should define variables of function inside of another outer function if it's possible. If you define variables directly on the top of the script like
<script type="text/javascript">
var inventoryData = [];
var missingData = [];
var mydata;
var rowMissing = 0;
var rowTotals;
var rowMissingMis = 0;
var rowtotalsMis;
var isMissing = false;
var mydata = [];
var newCompArray = [];
var machineName = 'bcd44e4c';
var registeredGrp = 'ACME Lgstks';
</script>
then you define global variables. It makes potential conflicts with another code which you included. For example if you would define $ = 0 or jQuery = null in the way you will break the code of jQuery and and jQuery plugins. It's important to understand additionally that the above script not only define global variables, it assign new properties to the global window object. You can easy verify that window object have rowMissing property now and the value of the property is 0. It would be much better to move the code inside of some function. For example the code
<script type="text/javascript">
$(function () {
var rowMissing = 0, rowTotals;
...
rowTotals = ($('#jqGrid').getGridParam('records') - 4);
$('#jqGrid').jqGrid("footerData", "set", {
Content: "<span style='color:red'>Total Missing:</span>",
Count: "<span style='color:red'>" + rowMissing + "</span>",
LastSeen: "Total Inventoried:",
Name: rowTotals
});
...
});
</script>
is much better. It defined local variables rowMissing and rowTotals existing only inside the function and it uses the variables inside of the function. In the way one will have no conflicts.

Ok, the biggest problem was Telerik's script register was embedding the older version of Jquery (jquery-1.7.1.js). I didn't notice it until you pointed it out. It's one of those things that Telerik does undercover so it was easy to miss. Great observation on the bad references, order and global vars, fixed those also. Thanks for all your help Oleg..you're truly awesome. Works like a charm now!

JTable JQuery Not showing records

I am using JTable(JQuery) for displaying certain records from database, (database is MySQL)
I am also inserting data using createAction of JTable. I have 3 field which displays date in JTable. The problem that i am facing is when add Type: 'date' for the field which displays date, jtable stops displaying records from database. but when i remove type: 'data' in field it again starts displaying data using listAction. I am not getting why this is happening?
I want create form to show datepicker and also want dates to get displayed in listAction.
Note: I am using yyyy-mm-dd format for date. the following code list record from database when type: 'date' is removed from dateApplied, startDate and endDate fields. but when type: 'date' is present in the code in these field it fails to display records.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# page import="java.util.ArrayList"%>
<%# page import="daobject.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="../css/metro/red/jtable.css" rel="stylesheet" type="text/css" />
<link href="../css/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
<script src="../js/jquery-1.8.2.js" type="text/javascript"></script>
<script src="../js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<script src="../js/jquery.jtable.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/jquery-ui.css" type="text/css">
<link rel="stylesheet" href="../css/calenderStyle.css" type="text/css">
<title>Leave Applications</title>
<script type="text/javascript">
$(document).ready(function () {
$('#StudentLeaveTableContainer').jtable({
title: 'Leave Applications',
actions: {
listAction: '/Final_Notebook/StudentLeaveCancelController?action=list',
createAction: '/Final_Notebook/StudentLeaveCancelController?action=create',
deleteAction: '/Final_Notebook/StudentLeaveCancelController?action=delete'
},
fields: {
To:{
title:'Application To',
create: true,
options: '/Final_Notebook/StudentLeaveCancelController?options=ApplicationTo',
list: false
},
leaveId:{
key: true,
create: false,
edit: true,
sorting: false,
list: false
},
name: {
title:'Name',
list: true,
create:false,
},
rollNo: {
title: 'Roll No',
width: '20%',
list: true,
edit:true,
create: false
},
leaveType: {
title: 'Type',
width: '20%',
options:{'personal':'personal','medical':'medical','other':'other'},
edit:false,
create: true,
list: true
},
leaveReason: {
title: 'Reason',
width: '30%',
type: 'textarea',
edit: false,
list: true,
create: true
},
dateApplied: {
title: 'Applied On',
width: '30%',
list: true,
create: true,
edit: true,
type: 'date',
displayFormat: 'yy-mm-dd'
},
startDate: {
title: 'From Date',
width: '30%',
list: true,
create: true,
edit: true,
type: 'date',
displayFormat: 'yy-mm-dd'
},
endDate: {
title: 'To Date',
width: '30%',
list: true,
create: true,
edit: true,
type: 'date',
displayFormat: 'yy-mm-dd'
},
days: {
title: 'Total Days',
width: '20%',
edit: false,
create: true,
list: true
},
status: {
title: 'Status',
width: '20%',
list: true,
edit: false,
create: false,
options: {'0':'pending', '1':'Apprtoved', '2':'Rejected'}
}
}
});
$('#StudentLeaveTableContainer').jtable('load');
});
</script>
</head>
<body>
<div style="width:70%;margin-right:20%;margin-left:20%;text-align:center;">
<h1>Leave Applications</h1>
<div id="StudentLeaveTableContainer"></div>
</div>
</body>
</html>

to display records try following:
dateApplied: {
title: 'Applied On',
width: '30%',
list: true,
create: true,
edit: true,
type: 'date',
displayFormat: 'yy-mm-dd',
display: function (data) {
return data.record.<your-field-name>;
},
},

adding live data to highstock Using json file

I'm trying to update a highcharts highstock chart with live data from a json file on my server.
now I have a chart that gets its data from a json file (that I create with php that requests the data from my MySQL database) like so:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OKcoin Price LTCCNY</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$.getJSON('json/lastTradesOkcoinLTCCNY.json', function(data) {
Highcharts.setOptions({
global: {
useUTC: false
}
});
// create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1
},
title : {
text : 'OkCoin Price LTCCNY'
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'hour',
count: 6,
text: '6h'
}, {
type: 'hour',
count: 12,
text: '12h'
}, {
type: 'hour',
count: 24,
text: '24h'
}, {
type: 'day',
count: 3,
text: '3d'
}, {
type: 'day',
count: 7,
text: '7d'
}, {
type: 'all',
text: 'All'
}],
selected: 2
},
xAxis: {
gridLineWidth: 1,
title: {
enabled: true,
text: 'Time',
style: {
fontWeight: 'normal'
}
}
},
yAxis: [{
title: {
text: 'Price LTCCNY'
},
gridLineWidth: 1,
minorTickInterval: 'auto',
minorTickColor: '#FEFEFE',
labels: {
align: 'right'
}
}],
plotOptions: {
series: {
lineWidth: 1
}
},
tooltip: {
valueDecimals: 5,
valuePrefix: '$ '
},
series : [{
name : 'LTCCNY Price',
data : data,
dataGrouping : {
units : [
['minute',
[1, 5, 10, 15, 30]
], ['hour', // unit name
[1]
]
]
}
}]
});
});
});
</script>
</head>
<body>
<script src="../Highstock/js/highstock.js"></script>
<script src="../Highstock/js/modules/exporting.js"></script>
<div id="container" style="height: 500px; min-width: 500px"></div>
</body>
</html>
So far no problems, I get a chart from the json file. But of course it doesn't update if new data becomes available (only if I reload the page) .
What I want to do is after loading this chart, add live data to it as it becomes available.
something like this example, but instead of random data the chart will be updated with data from a (second) live updating json file on my webserver. The json file will be created by php (this part is working just fine) But I can't figure out how to add the data from the json file to the my existing highstock chart.
I also found
this this example on highcharts.com and that more or less does what I try to do, but I can't integrate the 'requestData' function into my existing chart.
So what I want to do is use the 'requestData' function from the second example with the high stock chart I already have. My second json file (with the live data) looks the same as in the second example (timestamp, price):
[1389022968000,173.3]
Can anyone help me a bit?

nevermind, I figured it out myself...
here's my solution:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OKCoin LTCCNY Price</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
var chart; // global
function requestData() {
$.ajax({
url: 'tickOkCoinLTCCNY.json',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 2; // shift if the series is longer than 20
// add the point
chart.series[0].addPoint(eval(point), true, shift);
// call it again after one second
setTimeout(requestData, 10000);
},
cache: false
});
}
$(function() {
$.getJSON('../okcoin/json/lastTradesOkcoinLTCCNY.json', function(data) {
// set the allowed units for data grouping
var groupingUnits = [[
'minute', // unit name
[1,5,15,30] // allowed multiples
], [
'hour',
[1, 2, 3, 4, 6]
]];
// create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
events: {
load: requestData
}
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'hour',
count: 6,
text: '6h'
}, {
type: 'hour',
count: 12,
text: '12h'
}, {
type: 'hour',
count: 24,
text: '24h'
}, {
type: 'day',
count: 3,
text: '3d'
}, {
type: 'day',
count: 7,
text: '7d'
}, {
type: 'all',
text: 'All'
}],
selected: 2
},
title: {
text: 'OKCoin LTCCNY Price'
},
xAxis: {
type: 'datetime',
gridLineWidth: 1,
title: {
enabled: true,
text: 'Time',
style: {
fontWeight: 'normal'
}
}
},
yAxis: [{
title: {
text: 'LTCCNY'
},
lineWidth: 2
}],
series: [{
name: 'LTCCNY',
data: data,
dataGrouping: {
units: groupingUnits
}
}]
});
});
});
</script>
</head>
<body>
<script src="../Highstock/js/highstock.js"></script>
<script src="../Highstock/js/modules/exporting.js"></script>
<div id="container" style="height: 500px; min-width: 500px"></div>
</body>
</html>

how to bring Symbol-outline in pie chart using extjs

when i runs the index.html i'm getting only a pie chart but with no color description .
can anyone please tell me how bring the color Symbol-outline like as shown below
my code is as given below
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Ext.chart.series.Pie Example</title>
<link rel="stylesheet" href="http://cdn.sencha.io/try/extjs/4.1.0/resources/css/ext-all-gray.css"/>
<script src="http://cdn.sencha.io/try/extjs/4.1.0/ext-all-debug.js"></script>
<script src="app.js"></script>
</head>
<body>
<div id="myExample"></div>
</body>
</html>
app.js
Ext.onReady(function() {
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [{
'name': 'metric one',
'data': 10
}, {
'name': 'metric two',
'data': 7
}, {
'name': 'metric three',
'data': 5
}, {
'name': 'metric four',
'data': 2
}, {
'name': 'metric five',
'data': 27
}]
});
Ext.create('Ext.chart.Chart', {
renderTo: 'myExample',
width: 500,
height: 350,
animate: true,
store: store,
theme: 'Base:gradients',
series: [{
type: 'pie',
angleField: 'data',
showInLegend: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
// calculate and display percentage on hover
var total = 0;
store.each(function(rec) {
total += rec.get('data');
});
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
});
});

You forgot to add legend config
...
height: 350,
legend: {
position: 'right'
},
...
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.Store
UPD:
Ext.define('myStore', {
extend: 'Ext.data.Store',
model: 'myModel',
proxy: {
type: 'ajax',
api: {
read: '/urlhere'
},
reader: {
type: 'json',
root: 'data',
successProperty: 'success',
totalProperty: 'total'
}
}
});
expected data: {data: json array here, success: true/false, total: 123}

JqGrid free display not working in chrome as it does nicely in IE 11

I tried to figure out what's wrong with current test code I've played with jqGrid free. I have evaluated a few and I have to pick jqGrid as it is so flexible to use it.
However, I have this issue, so I'm not sure whether or not it comes from the js set I'm using or something else since I'm doing it a little bit differently. I'm using inline editing. And weird as it is, it displays nicely in IE 11 and horribly in Chrome Version 61.0.3163.100 (Official Build) (32-bit).
Here is my code
<html>
<head>
<title>Test jqGrid free</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.min.css ">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.min.js"></script>
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/plugins/css/ui.multiselect.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/plugins/min/ui.multiselect.js"></script>
<script type="text/javascript">
var URL = 'group.json';
$.extend(true, $.jgrid.inlineEdit, {
});
$.extend($.jgrid.defaults, {
datatype: 'json',
jsonReader : {
repeatitems:false
},
height: 'auto',
viewrecords: true,
rowList: [10, 20, 30],
altRows: true,
loadError: function(xhr, status, error) {
alert(error);
}
});
jQuery.extend(
jQuery.jgrid.edit, {
closeAfterEdit: true,
closeAfterAdd: true,
ajaxEditOptions: { contentType: "application/json" },
mtype: 'PUT',
EditData: function(postData) {
return JSON.stringify(postData);
}
}
);
$(document)
.ready(
function() {
$("#list")
.jqGrid(
{
url : URL,
datatype : 'json',
mtype : 'GET'
,
serializeRowData: function (postdata) {
var json = JSON.stringify(postdata);
return json;
},
colNames : ['Code', 'Name','Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
colModel : [
{
name : 'projectCode',
index : 'projectCode',
width : 70,
editable : false
}, {
name : 'projectName',
index : 'projectName',
width : 120,
editable : false
}, {
name : 'january',
index : 'january',
width : 60,
editable : true,
editoptions: {
defaultValue: '0'
}
}, {
name : 'february',
index : 'february',
width : 60,
editable : true,
editoptions: {
defaultValue: '0'
}
}, {
name : 'march',
index : 'march',
width : 60,
editable : true,
editoptions: {
defaultValue: '0'
}
}, {
name : 'april',
index : 'april',
width : 60,
editable : true,
editoptions: {
defaultValue: '0'
}
}, {
name : 'may',
index : 'may',
width : 60,
editable : true,
editoptions: {
defaultValue: '0'
}
}, {
name : 'june',
index : 'june',
width : 60,
editable : true,
editoptions: {
defaultValue: '0'
}
}, {
name : 'july',
index : 'july',
width : 60,
editable : true,
editoptions: {
defaultValue: '0'
}
}, {
name : 'august',
index : 'july',
width : 60,
editable : true,
editoptions: {
defaultValue: '0'
}
}, {
name : 'september',
index : 'september',
width : 60,
editable : true,
editoptions: {
defaultValue: '0'
}
}, {
name : 'october',
index : 'october',
width : 60,
editable : true,
editoptions: {
defaultValue: '0'
}
}, {
name : 'november',
index : 'november',
width : 60,
editable : true,
editoptions: {
defaultValue: '0'
}
}, {
name : 'december',
index : 'december',
width : 60,
editable : true,
editoptions: {
defaultValue: '0'
}
} ],
iconSet: "fontAwesome",
rownumbers: true,
pager : '#pager',
rowNum : 25,
rowList : [ 10, 20, 30 ],
grouping: true,
groupingView: {
groupField: ["projectName"],
groupColumnShow: [true],
groupText: ["<b>{0}</b>"],
groupOrder: ["asc"],
groupSummary: [true],
groupCollapse: false
},
viewrecords : true,
caption : 'Test',
editurl: URL,
editable: true,
datatype : 'json',
}
)
.jqGrid('navGrid', '#pager',
{
edit : false,
add : false,
del : false,
search : false
}
)
;
function reload(rowid, result) {
console.log('inside reload');
$("#list").trigger("reloadGrid");
};
var reloadGridFunc = function () {
var $self = $(this);
setTimeout(function () {
$self.setGridParam({ datatype: 'json' });
$self.trigger("reloadGrid");
}, 500);
};
var editoptions = {
keys: true,
mtype: "PUT",
url: URL + '/1',
successfunc: reloadGridFunc
};
jQuery("#list").jqGrid('setGroupHeaders', {
useColSpanStyle: false,
groupHeaders:[
{startColumnName: 'projectCode', numberOfColumns: 2, titleText: '<em>Project</em>'},
{startColumnName: 'january', numberOfColumns: 12, titleText: 'Calendar'}
]
}),
jQuery("#list").jqGrid("inlineNav", "#pager", {
add:true,
edit:true,
save:true,
addParams: {
position: "last",
addRowParams: editoptions
},
editParams: editoptions
});
})
;
// Avoid `console` errors in browsers that lack a console.
(function() {
var method;
var noop = function () {};
var methods = [
'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
'timeStamp', 'trace', 'warn'
];
var length = methods.length;
var console = (window.console = window.console || {});
while (length--) {
method = methods[length];
// Only stub undefined methods.
if (!console[method]) {
console[method] = noop;
}
}
}());
</script>
</head>
<body>
<br/> <br/>
<div id="pager"></div>
<table id="list"></table>
<br>
</body>
</html>
Below are the images for IE and Chrome
IE: Good diplay
Chrome : Not quite expected display as for IE
As for json data , I use it like below:
{
"rows":
[
{"projectCode":"A","projectName":"Project A","january":1.0,"february":0.0,"march":0.0,"april":0.0,"may":0.0,"june":0.0,"july":0.0,"august":0.0,"september":0.0,"october":0.0,"november":0.0,"december":1.0}
]
}
Did I overlook something?

You need to add always the line
<!DOCTYPE html>
before
<html>
in all HTML5 documents.