Kendo grid binding not working in angularjs - kendo-grid

I am trying to bind list which i am populating after receiving response from API. I can see the objects into the list but i still didn't understand why kendo grid is not binding datasource. i have code as below.
vm.getAccounts = function () {
acctSearchService.searchAccounts(null, vm.AccountSearchModel)
.then(getAccountsSuccess, getAccountsFailure);
}
vm.accountGridData = [];
function getAccountsSuccess(response) {
vm.accountGridData.push(response.model);
return vm.accountGridData;
}
i am getting result into vm.accountGridData after receiving response from API call and i am trying to bind that to datasource of kendo grid as below.
$("#grid").kendoGrid({
dataSource: { data: vm.accountGridData },
height: 550,
filterable: true,
sortable: true,
pageable: true,
columns: vm.mainGridColumns
});
Do i need to do anything else to get the data ?


You need to create a directive like this:
app.directive('myDirective', function () {
return {
restrict: 'EA',
scope: {},
template: [].join(''),
controllerAs: 'vm',
controller: function () {
var vm = this;
vm.getAccounts = function () {
acctSearchService.searchAccounts(null, vm.AccountSearchModel).then(getAccountsSuccess, getAccountsFailure);
}
vm.accountGridData = [];
function getAccountsSuccess(response) {
vm.accountGridData.push(response.model);
return vm.accountGridData;
}
},
link: function () {
$("#grid").kendoGrid({
dataSource: { data: vm.accountGridData },
height: 550,
filterable: true,
sortable: true,
pageable: true,
columns: vm.mainGridColumns
});
}
};
});
And in your html:
<div my-directive></div>
<div id="grid"></div>


You dont need data property in your datasource if you don't implement custom read function for it.
Datasource property should be an array or kendo-datasource object.
Try this:
$("#grid").kendoGrid({
dataSource: vm.accountGridData,
height: 550,
filterable: true,
sortable: true,
pageable: true,
columns: vm.mainGridColumns
});
And checkout grid documentation: http://docs.telerik.com/kendo-ui/api/javascript/ui/grid


Finally i found the way after fighting. it's in simple one step.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/angular">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.bootstrap.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.bootstrap.mobile.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.silver.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/angular.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<kendo-grid k-scope-field="grid" options="mainGridOptions"></kendo-grid>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope, $http){
$scope.data = new kendo.data.ObservableArray([]);
$http({
method: 'GET',
type:"json",
url: '//jsonplaceholder.typicode.com/posts'
}).then(function successCallback(response) {
$scope.grid.dataSource.data(response.data);
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
$scope.mainGridOptions = {
dataSource: {
data: $scope.data,
pageSize: 5
},
sortable: true,
pageable: true,
filterable: {
mode: "row"
},
resizable: true,
columns: [{
field: "userId",
title: "userId",
width: "120px"
},{
field: "id",
title: "ID",
width: "120px"
},{
field: "title",
width: "120px"
},{
field: "body",
width: "120px"
}]
};
})
</script>
</body>
</html>

Related

insert double button in the data grid columns kendo ui

I want to insert two buttons into the columns of the datagrid using Kendo UI.
Each element of the list contain two buttons example: EDIT and DELETE

I assume you using kendo ui and trying to have edit and delete button in each row this is how you can accomplish it by specifying a column like this .
{ command: ["edit", "destroy"], title: " ", width: "250px" }]
Please see the code snippet below taken from telerik sample . Here is the live dojo sample. The example below uses a popup editing. In case you are using inline editing look into this inline Editing Sample
output of code :
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/editing-popup">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
{ field:"ProductName", title: "Product Name" },
{ field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "120px" },
{ field: "UnitsInStock", title:"Units In Stock", width: "120px" },
{ field: "Discontinued", width: "120px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "popup"
});
});
</script>
</div>
</body>
</html>

Highchart graph retrieve data from json url

I try to create a high chart graph from a url("http://avare.pe.hu/veri2.json") containing json data. But althrough the datas are retrieved (I tested it as writing it to console) The graph is not displayed. May you please help me?
My datas are
[{"names":["ADANA","ADIYAMAN","AFYONKARAHİSAR","ANKARA","BALIKESİR","BİLECİK","BURSA","ÇANAKKALE","EDİRNE","İSTANBUL","KIRKLARELİ","KOCAELİ","SAKARYA","TEKİRDAĞ","YALOVA"],"count":[3,1,1,4,162,5,532,79,33,714,50,435,66,81,2]}]
..................
The web page
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Pasta HighChart Grafiği</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var jsonurl = "http://avare.pe.hu/veri2.json";
var chart;
$.getJSON(jsonurl, function (json) {
var options = {
chart: {
renderTo: 'container',
type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories:[],
//type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer', size: 160,
dataLabels: {
enabled: false
},
showInLegend: true,
dataLabels: {
enabled: true, connectorWidth: 2, connectorPadding: 1,
format: '<span style="font-size:14px; font-weight:bold">{point.percentage:.1f} %</span>',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
tooltip: {
pointFormat: 'Miktar, <b>{point.y:.1f} kton</b>'
},
series: [{
type:'pie',
data: []
}]
}
// options.series[0] = {};
// options.series[0].name = json[0]['names'];
// options.series[0].data = json[0]['count'];
var names = json[0]['names'];
var count = json[0]['count'];
var arr=new Array(names.length);
console.log(names[0]);
for (i = 0 ; i < name.length; i++) {
arr[i] = [names[i],count[i]];
}
options.series.data = arr;
chart = new Highcharts.Chart(options);
});
});
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="canvasjs.min.js"></script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>

I have made an example with fixed data, and found one mistake in your code.
You wanted to add data to your series, but you forgot that your series object is an array, so you should add it with this code:
options.series[0].data = arr;
Here you can find an example how your chart will work with this correction: http://jsfiddle.net/worg6jLz/30/

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!

Kendo UI grid is not populated with JSON data

I can't get my Kendo UI grid to populate with my JSON data.
I suspect that it has to do with 'the double' data part in front of my relevant json data.
I'm not sure how I can add a double data mark in my schema. Any help would be much appreciated.
JSON:
{"dsProduct":
{"ttProduct":
[{"ProductId":"Truck","ProductType":5,"Tradeable":true},{"ProductId":"Tractor","ProductType":5,"Tradeable":false}]
}
}
JavaScript/HTML code:
<!doctype html>
<html>
<head>
<title>Kendo Grid with json</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<link href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.rtl.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.silver.min.css" rel="stylesheet" />
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "http://localhost:8810/Kendo/rest/KendoRest",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
type: "GET",
dataType: "json",
contentType: "application/json; charset=utf-8"
},
},
batch: true,
pageSize: 20,
schema: {
data:
"dsProduct",
model: {
id: "ProductId",
fields: {
ProductId: { type: "string" },
ProductType: { type: "number" },
Tradeable: { type: "boolean" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
{ field: "ProductId", title: "Product Name" },
{ field: "ProductType", title:"Product Type", width: "120px" },
{ field: "Tradeable", title:"Can product be traded?", width: "120px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "popup"
});
});
</script>
</div>
</body>
</html>

Your definition for the shema.data isn't quite right. Looking at your json, there is a child object under the dsProduct that contains the array. Change your data to dsProduct.ttProduct and it should work.
schema: {
data:
"dsProduct.ttProduct",
model: {
See working sample http://jsbin.com/vevixa/1/edit?html,js,console,output

ExtJs autoLoad scripts not executed

I have three files: form.html, report.html, console.html. I am facing two problems with console.html page.
I am trying to load 'report.html' but only static content is loaded,
extJs components are not loaded or say script is not executed.
I am trying to load 'form.html'. In this code, i am able to load form.html along with extJs components successfully. But the problem is that once tab2 is loaded, i am not able to activate/see tab1.
Appreciate any help. Any example of autoLoad without any error will do.
Console.html is as below:
<head>
<title>Sample Console</title>
<link rel="stylesheet" type="text/css" href="../ExtJs/resources/css/ext-all.css" />
<script type="text/javascript" src="../ExtJs/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
renderTo: 'frmSampleConsole',
split: true,
height : '100%',
width : '100%',
layout:'border',
defaults: {
collapsible: true,
split: true
//bodyStyle: 'padding:15px'
},
items:
[
{
title: 'Report',
region : 'west',
width : 280,
autoLoad : 'report.html',
contentType: 'html',
scripts : true
}
,
{
id :'tabpanel',
xtype:'tabpanel',
title: 'Main Content',
collapsible: false,
region:'center',
items : [
{
id : 'tab1',
title: 'Tab1',
collapsible: false,
margins: '5 0 0 0',
activeTab:0,
items: [
{
html : 'Sample html content'
}
]
},
{
id :'tab2',
title : 'Tab2',
layout : 'fit',
closable: true,
loader: {
url: 'form.html',
contentType: 'html',
autoload: true,
loadMask: true,
scripts: true
},
listeners: {
render: function(tab) {
tab.loader.load();
}
}
}
]
}
]
});
});
</script>
</head>
<body>
<div id = 'frmSampleConsole'></div>
</body>
</html>

your need to set "scripts: true," then your extjs script are work.