I an new to jqgrid with json. I have reviewed the various questions and answers; however, I am still not able to get the data to display in the grid. Below are my results from the PERL script, the HTML page, and a screen shot of the results. Any help will be very much appreciated.
PERL Results
{"addressInfo": { "page": "1", "total": "5","records": "61","rows:"[ { "Id": 1, "lname": "Adams", "fname": "Mr and Mrs David ", "address": "3800 Maplewood Dr", "address2": "", "city": "Lafayette","state": "IN", "zip": "47905", "got-card": "2015", "status": "Active"}, { "Id": 2, "lname": "Baker", "fname": "Mrs Ellen ", "address": "1857 North Colebrook Rd", "address2": "", "city": "MANHIEM","state": "PA ", "zip": "17545", "got-card": "2015", "status": "Active"}, { "Id": 3, "lname": "Banzhof", "fname": "Mr and Mrs Don ", "address": "107 Wellington Rd", "address2": "", "city": "Lancaster","state": "PA ", "zip": "17603", "got-card": "2015", "status": "Active"}] }}
HTML code
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui-lightness/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui.jqgrid.css" />
<script src="jqgrid/js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script>
//<![CDATA[
jQuery(document).ready(function () {
jQuery("#list2").jqGrid({
url:'/perl/addrlist2x.pl',
datatype: "json",
mtype: 'GET',
colNames:['Id','Last Name', 'Name','Address','Address 2','City','State','Zip','Got-Card','Status'], //define column names
colModel:[
{name:'id', index:'id', width:25},
{name:'lname', index:'lname', width:100, formatter:'showlink', formatoptions:{baseLinkUrl:'http://localhost/html/addr-update2.html', idName:'Id'}},
{name:'fname', index:'lname', width:200},
{name:'address', index:'lname', width:250},
{name:'address2', index:'lname', width:250},
{name:'city', index:'lname', width:100},
{name:'state', index:'lname', width:45},
{name:'zip', index:'lname', width:40},
{name:'got-card', index:'lname', width:40},
{name:'status', index:'lname', width:50}
], //define column models
jsonReader: {
repeatitems: false,
id: "Id",
root: 'addressInfo.rows',
page: function (obj) { return 1; },
total: function (obj) { return 1; },
rows: function (obj) { return obj.addressInfo.rows.length; }
},
width: 900, //specify width; optional
rowNum:10,
loadonce: true,
rowList:[15,30,45, 60],
pager: '#pager2',
sortname: 'lname',
viewrecords: true,
sortorder: "asc",
caption:"Christmas Address List"
});
});
//]]>
</script>
</head>
<body>
<table id="list2"></table>
<div id="pager2"></div>
</body>
</html>
Screen Shot of Resultsenter image description here
The JSON data is wrong. You should fix "rows:" [{ to "rows": [{. I'd recommend you to validate JSON data in http://jsonlint.com/.
Related
Hello I would like to know how I can use a for loop in a template to add on a number 1 onward
as this is what I would get in the picture below
the rest are being call by the backend but however this S/N is just a number incensement from 1 onward
enter image description here
// Call the table to the kendogrid where we use our datasource
$("#customer-list").kendoGrid({
dataSource: dataSource,
height: $(window).height()-$("#customer-list").position()["top"]-180,
selectable: "single, row",
change: function(e) {
console.log("change", this.dataItem(this.select()[0]));
},
scrollable: {
endless: true,
},
columns: [{
field: "",
title: "S/N",
headerAttributes: { "class": "k-text-center" },
width: 60,
template: `1`
}, {
field: "",
title: "Profile",
headerAttributes: { "class": "k-text-center" },
width: 150,
template:`
<img class="imageinside" src='#=data.Picture#' width="100px" height="100px" onError="this.onerror=null;this.src='../../assets/images/avatar.png';" style="border-radius:50px"/>
`
}, {
field: "",
title: "Customer Name",
template:`
<div id="customernameid">#=data.Name#</div>
`
}],
});
There's a solution for this in the knowledge base here, using the page() and pageSize() methods of the Data Source, as well as a counter variable.
See the code snippet for the proposed solution.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.1.412/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
var record = 0;
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
sortable: true,
columns: [
{
title: "#",
template: "#= ++record #",
width: 50
}, {
field: "ContactName", title: "Contact Name"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}
],
pageable: true,
dataBinding: function() {
record = (this.dataSource.page() -1) * this.dataSource.pageSize();
}
});
</script>
</body>
</html>
I'm am trying to create a chart using AmCharts by loading JSON output from a webservice using the dataloader plugin from this URL http://portal.eyeo.se/datapump_amchart.ashx. For some reason, only a few items from my data are visible as you can see here: http://portal.eyeo.se/historychart
What am I doing wrong?
Code below:
<script src="amcharts/amcharts.js"></script>
<script src="amcharts//serial.js"></script>
<script src="amcharts/plugins/export/export.min.js"></script>
<script src="amcharts/plugins/dataloader/dataloader.min.js"></script>
<link rel="stylesheet" href="amcharts/plugins/export/export.css" type="text/css" media="all" />
<script src="amcharts/themes/light.js"></script>
<!-- Chart code -->
<script>
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataLoader": {
"url": "datapump_amchart.ashx",
"format": "json",
"async": "True"
},
"categoryField": "timestamp",
"dataDateFormat": "YYYY-MM-DD HH:NN:SS",
"rotate": false,
"valueAxes": [{
"position": "left",
"title": "SensorVärde"
}],
"categoryAxis": {
"parseDates": true,
"minPeriod": "ss",dateformat that is wron
},
"graphs": [{
"valueField": "value1",
"id": "g1",
"bullets": "round",
"balloon": {
"drop": false,
"adjustBorderColor": false,
"color": "#ffffff",
"type": "smoothedLine"
},
"fillAlphas": 0.2,
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 10,
"hideBulletsCount": 50,
"lineThickness": 5,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value1",
"fillAlphas": 0.4,
"balloonText": "<div style='margin:5px; font-size:10px;'>Sensorvärde:<b>[[value1]]</b></div>"
}],
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 0,
"zoomable": false,
"valueZoomable": true,
"valueLineAlpha": 0.5,
"categoryBalloonDateFormat": "HH:NN:SS, DD MMMM",
"cursorPosition": "mouse"
},
"chartScrollbar": {
"graph": "g1",
"scrollbarHeight": 80,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount": true,
"color": "#AAAAAA"
},
"export": {
"enabled": true
},
});
</script>
<!-- HTML -->
<div id="chartdiv"></div>
The issue is that your date-based data is in the wrong order. It must be in ascending order when you're using parseDates as mentioned in the documentation.
Important: If this is set to true, the data points needs to come pre-ordered in ascending order. Data with incorrect order might result in visual and functional glitches on the chart.
Fixing the order of your data should solve your problem.
I have a chart that refuses to render properly if I include the categoryAxis property in the chart options. By "render properly", I mean that the plot area shows up, the title is displayed, but none of the columns are rendered.
I am using an AmCharts serial chart with GrantMStevens amChartsDirective because my project is built in Angularjs.
Here is a plunk with the categoryAxis commented out. If you enable that line of code, the chart will immediately exhibit this behavior.
This chart uses text values for the categoryField and numeric vlaues for the valueField. I have another chart that uses date values for the categoryField and numeric values for the valueField and it works just fine.
I am assuming that there some interaction between the fact that this a not a categoryField is not a date value that causes this but I cannot find any combination of properties that lets me set properties on the categoryField.
This is what I WANT to do:
categoryAxis: {
gridAlpha: 0.3,
gridColor: "GRAY"
},
Does anyone know why this doesn't work?
Here is the HTML:
<html ng-app="amChartsDirectiveExample">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<div ng-controller="amChartsController2" style="height: 400px; width: 600px;">
<am-chart id="mySecondChart" options="amChartOptions2"></am-chart>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.0/amcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.0/serial.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.0/themes/light.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.0/themes/chalk.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.0/themes/black.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.13.0/themes/dark.js"></script>
<script src="https://rawgit.com/ThumbsAlmighty/amCharts-Angular/master/dist/amChartsDirective.js"></script>
<script src="script.js"></script>
<script src="theme.js"></script>
</body>
And here is the JavaScript:
angular.module('amChartsDirectiveExample', ['amChartsDirective'])
.controller('amChartsController2', function($scope) {
$scope.chartData = [
{
"EscalationCount": "2",
"Area": "One"
},
{
"EscalationCount": "9",
"Area": "Two"
},
{
"EscalationCount": "5",
"Area": "Three"
},
{
"EscalationCount": "4",
"Area": "Four"
},
{
"EscalationCount": "3",
"Area": "Five"
}];
$scope.amChartOptions2 = {
type: "serial",
categoryField: "Area",
startDuration: 1,
rotate: true,
theme: "light",
trendLines: [],
//categoryAxis: {}, // Uncomment this line to break the chart.
graphs: [{
balloonText: "[[title]] for [[category]]: [[value]]",
fillAlphas: 1,
id: "AmGraph-1",
title: "Escalation Volume",
type: "column",
valueField: "EscalationCount"
}],
guides: [],
valueAxes: [{
id: "ValueAxis-1",
title: "EscalationCount",
}],
allLabels: [],
balloon: [],
legend: {
enabled: false
},
titles: [{
id: "Title-1",
size: 15,
text: "Lookit me! I rendered the Chart title!"
}],
data: $scope.chartData
};
});
For some reason the angular directive sets parseDates to true by default if you have a categoryAxis defined, which breaks if your chart isn't date-based. If you set parseDates: false in your categoryAxis, it will work.
categoryAxis: {
parseDates: false,
gridAlpha: 0.3,
gridColor: "#d3d3d3"
},
Here's your updated plunk: http://plnkr.co/edit/TYZdR0KEOAKcbHnGdTfP?p=preview
Note, I changed your gridColor to the hex equivalent. While named colors will work, if you plan on using the export plugin, you'll need to set your colors as a hex string.
I'm now trying to add an additional row to the top of the table with 3 side by side buttons. Do I need to add any HTML or is it somehow dynamically added via js? Sort of like the url below but it's just a button (possibly an image) and not a dropdown (these will be controls like edit, delete and add columns buttons):
http://demos.kendoui.com/web/grid/toolbar-template.html
<!doctype html>
<head>
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.blueopal.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.web.min.js" type="text/javascript"></script>
</head>
<body>
<div id="grid"></div>
<script>
$(function(){
var people = [{patientName: "John Doe", MRN: "464684778", account: "56765765224768", dateOfBirth: "01/06/2013", room: 403, bed: 22, admitDate: "01/15/2013" },
{patientName: "John Doe", MRN: "464684778", account: "56765765224768", dateOfBirth: "01/06/2013", room: 403, bed: 22, admitDate: "01/15/2013" },
{patientName: "Jane Doe", MRN: "464684778", account: "56765765224768", dateOfBirth: "01/06/2013", room: 403, bed: 22, admitDate: "01/15/2013" },
{patientName: "Bert Jones", MRN: "464684778", account: "56765765224768", dateOfBirth: "01/06/2013", room: 403, bed: 22, admitDate: "01/15/2013" },
];
$("#grid").kendoGrid({
columns: [{field: "patientName", title: "Patient Name"},
{field: "MRN", title: "MRN"},
{field: "account", title: "Account#"},
{field: "dateOfBirth", title: "Date of Birth"},
{field: "room", title: "Room"},
{field: "bed", title: "Bed"},
{field: "admitDate", title: "Admit Date" }],
dataSource: {
data:people
},
height:300,
scrollable:true,
pageable: true,
pageSize: 2,
sortable: true
});
});
</script>
</body>
</html>
You can add a toolbar section to your kendoGrid config, and supply a list of buttons that you want to add:
$("#grid").kendoGrid({
columns: [{field: "patientName", title: "Patient Name"},
{field: "MRN", title: "MRN"},
{field: "account", title: "Account#"},
{field: "dateOfBirth", title: "Date of Birth"},
{field: "room", title: "Room"},
{field: "bed", title: "Bed"},
{field: "admitDate", title: "Admit Date" }],
toolbar: [
{"name": "create"},
{"name": "save"},
{"name": "cancel"}
],
dataSource: {
data:people
},
height:300,
scrollable:true,
pageable: true,
pageSize: 2,
sortable: true
});
If you can't get things to look the way you want with the toolbar, you can supply your own HTML to this option:
toolbar: "<div>stuff here</div>"
There's more info in the docs, here: http://docs.kendoui.com/api/web/grid#toolbar-array
I've tried and I finally give up trying to figure out why my jqGrid doesn't display data.
Let me try and go step-by-step:
The below is what is included for the script...
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<link href="../../Content/themes/redmond/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/redmond/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/base/jquery.ui.button.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script src="../../Scripts/grid.locale-en.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
The JSON returned:
{
"total": 1,
"page": 1,
"records": 1,
"rows": [
{
"id": "0001",
"cell": [
"0001",
"XXXXX",
"XXXX",
"XXX",
"XXX",
"XXXXX",
"XXXX",
"7/27/2012 1:46:22 PM",
"XXXXX",
"7/30/2012 3:48:25 PM"
]
}
]
}
The jqGrid Code is as follows:
jQuery(function ($) {
jQuery('#tblManageApplication').jqGrid({
url: '/AdminView/ManageApplicationsJQGridData',
datatype: 'json',
loadError: function (xhr, status, error) { alert(status + " " + error); },
mtype: 'GET',
colNames: ['Application ID', 'Application Name', 'Application Description', 'Country Code', 'Country Name', 'Source Indicator Code', 'Insert User ID', 'Insert User Timestamp', 'Update User ID', 'Update User Timestamp'],
colModel: [
{ name: 'ApplicationID', jsonmap: 'cell.ApplicationID', width: 150 },
{ name: 'ApplicationName', jsonmap: 'cell.ApplicationName', width: 200 },
{ name: 'ApplicationDescription', jsonmap: 'cell.ApplicationDescription', width: 250 },
{ name: 'CountryCode', jsonmap: 'cell.CountryCode', width: 100 },
{ name: 'CountryName', jsonmap: 'cell.CountryName', width: 100 },
{ name: 'SourceIndicatorCode', jsonmap: 'cell.SourceIndicatorCode', width: 100 },
{ name: 'InsertUserID', jsonmap: 'cell.InsertUserID', width: 100 },
{ name: 'InsertUserTimestamp', jsonmap: 'cell.InsertUserTimestamp', width: 100, formatter: 'date', formatoptions: { newformat: 'd-m-Y' }, datefmt: 'd-m-Y' },
{ name: 'UpdateUserID', jsonmap: 'cell.UpdateUserID', width: 100 },
{ name: 'UpdateUserTimestamp', jsonmap: 'cell.UpdateUserTimestamp', width: 175, formatter: 'date', formatoptions: {newformat: 'd-m-Y'}, datefmt: 'd-m-Y' }
],
pager: jQuery('#pager'),
sortName: 'ApplicationID',
rowNum: 10,
jsonReader: { repeatitems: false },
rowList: [10, 20, 50],
sortorder: 'desc',
height: 300,
width: 1200,
caption: 'Manage Applications',
onCellSelect: function (rowid, index, contents, event) {
alert('onCellSelect: ' + index + ' : ' + contents);
},
success: function (data, textStatus) {
if (textStatus == 'success') {
alert('Successful');
}
},
error: function (data, textStatus) {
alert('An error has occurred');
}
});
});
Wanted to add the corresponding HTML for your reference:
<table id="tblManageApplication"></table>
<div id="pager"></div>
Any help will be greatly appreciated.
first, can you confirm that that data you are sending from controller and colModal names are same alphabetically?
second check your json reader
check this link
http://www.ok-soft-gmbh.com/jqGrid/ipInfo.htm i think you need to specify a couple of things here like id and records.
The main error in your code is the usage of jsonReader: { repeatitems: false } option and jsonmap in the case where you don't need there at all. You produce the data in the standard format. So you have to remove the options to be able to fill the grid.
Additionally I would recommend you to change the data format to ISO 8601 format (you can use "o" format of DateTime on the server code) or at least define correct srcformat:
formatoptions: {srcformat: 'm/d/Y g:i:s A', newformat: 'd-m-Y'}
The demo demonstrate that the changes which I described above working.