I am attempting to set up my jqGrid to get data from a function on document.ready. Somehow I am running into several small exceptions when I do this... I thought originally that maybe my json data was malformated...
{"total": 2,
"page": 1,
"records": 15,
"rows": [{
"id": 2148,
"cell": {
"MRN": "840134833",
"Hospital_Fin": "987141516",
"First_Name": "YELLOW",
"Last_Name": "CRAYON",
"Date_of_birth": "\/Date(1253160000000)\/"
}
},
{
"id": 1898,
"cell": {
"MRN": "785528039",
"Hospital_Fin": "6669511596226",
"First_Name": "RAYFIELD",
"Last_Name": "BOYD",
"Date_of_birth": "\/Date(-720298800000)\/"
}
}]}
But it appears to look right.
I get this exception, for instance:
0x800a138f - Microsoft JScript runtime error: Unable to get value of the property 'integer': object is null or undefined
I get that exception at the following line in the code...
fmt = $.jgrid.formatter.integer || {};
I set up my grid as follows
$(document).ready(function () {
jQuery("#frTable").jqGrid ({
cmTemplate: { sortable: false },
caption: '#TempData["POPNAME"]' + ' Population',
datatype: 'json',
mtype: 'GET',
url: '#Url.Action("GetAjaxPagedGridData", "Encounters", new { popId = TempData["POPULATIONID"] })',//'/Encounters/GetAjaxPagedGridData/'+ '',
pager: '#pager',
loadonce: true,
height: 450,
gridview: true,
viewrecords: true,
rowNum: 15,
shrinkToFit: false,
autowidth: true,
colNames: [...],
colModel: [
{ name: 'MRN', width: 125, align: 'left' },
{ name: 'Hospital_Fin', width: 145, align: 'left' },
{ name: 'First_Name', width: 115, align: 'left' },
{ name: 'Last_Name', width: 115, align: 'left' },
{ name: 'Date_of_birth', width: 145, align: 'left' },]
Where colNames and colModel are unimportant.
Im at my wits end here. This should be working. What am I missing?
You may be missing the required locale file, where the $.jqgrid.formatter is defined:
jqGrid docs
You need to include jQuery, the jqGrid plugin and one of the jqGrid locale files for it to work, for example:
<script src="js/jquery-1.4.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>
That error sounds to me like you have a problem with an object in your view not having been set. Try setting a static value rather then something like TempData["POPULATIONID"] and I would think you might move forward.
Related
I'm trying to make an area chart using apexcharts with nuxt (vue2), but the area is not getting filled, and the options i set in chartOptions for fill are getting used by the line itself instead of the area, as below:
this is my apexchart component:
<client-only>
<apexcharts
type="area"
width="70%"
ref="realtimeChart"
:options="chartOptions"
:series="series">
</apexcharts>
</client-only>
this is my chartOptions:
chartOptions: {
chart: {
toolbar: {
show: true,
tools: {
download: true,
selection: false,
zoom: true,
zoomin: false,
zoomout: false,
pan: false,
reset: false,
},
},
id: "basic-bar",
colors: ["#FFA07A"],
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.7,
opacityTo: 0.9,
stops: [0, 100],
},
},
forecastDataPoints: {
count: 28,
strokeWidth: 4,
dashArray: 5,
},
title: {
text: "doesnt matter",
align: "center",
},
grid: {
borderColor: "#e7e7e7",
row: {
colors: ["#f3f3f3", "transparent"],
opacity: 0.5,
},
},
xaxis: {
type: "date",
tickAmount: 40,
},
yaxis: [
{
title: {
text: "Mt CO2eq/we",
},
forceNiceScale: true,
},
]
},
Can anyone help ?
I was declaring type: "line" in my series. thats all.
I have a web app written with ASP .NET Core, on one of the pages there is a bar chart created using chartJS (it gets data from database). I'm trying to display data values over each bar in the chart. I tried using this plugin, but then my chart doesn't show on the page and I'm getting the following errors: Uncaught ReferenceError: ChartDataLabels is not defined and Uncaught TypeError: Cannot set property 'datalabels' of undefined:
Here is my code for the chart:
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.3.0/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#1.0.0"></script>
<div>
<canvas id="workTSChart_MTK"></canvas>
</div>
<script>
$(document).ready(function () {
$.ajax({
type: "Get",
url: '#Url.Action("OnGetWorkTSData_MTK","home")',
contentType: "application/json",
dataType: "json",
success: function (response) {
var data = response.hrPlan;
var data2 = response.hrReestr;
var data3 = response.hrFact;
console.log("hrPlan=" + response.hrPlan);
console.log("hrSub=" + response.hrReestr);
console.log("hrFact=" + response.hrFact);
var ctx = document.getElementById("workTSChart_MTK");
var workTSChart = new Chart(ctx, {
plugins: [ChartDataLabels],
type: 'bar',
data: {
labels: [
'ООО "МТК"',
],
datasets: [{
label: 'Plan',
data: [response.hrPlan],
backgroundColor: 'rgb(161, 221, 239)',
borderColor: 'rgb(161, 221, 239)',
},
{
label: 'Sub',
data: [data2],
backgroundColor: 'rgb(254, 171, 133)',
borderColor: 'rgb(254, 171, 133)',
},
{
label: 'Fact',
data: [data3],
backgroundColor: 'rgb(127, 137, 138)',
borderColor: 'rgb(127, 137, 138)',
}]
},
options: {
responsive: true,
scales: {
y: {
max: 600000,
min: 500000,
ticks: {
stepSize: 10000,
}
}
},
plugins: {
datalabels: {
color: '#000000',
display: true,
},
legend: {
position: 'top',
},
title: {
display: true,
text: 'Sample title'
}
}
},
});
},
error: function (response) {
alert(response.responseText);
console.log("This is ERROR line");
}
});
});
</script>
What am I missing?
UPDATE:
I've updated my code thanks to #LeeLenalee's advice, but now I'm getting another error message: Uncaught TypeError: Cannot read property 'skip' of undefined
Updated code:
<div>
<canvas id="workTSChart_MTK"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#1.0.0"></script>
<script>
$(document).ready(function () {
$.ajax({
type: "Get",
url: '#Url.Action("OnGetWorkTSData_MTK","home")',
contentType: "application/json",
dataType: "json",
success: function (response) {
var data = response.hrPlan;
var data2 = response.hrReestr;
var data3 = response.hrFact;
console.log("hrPlan=" + response.hrPlan);
console.log("hrSub=" + response.hrReestr);
console.log("hrFact=" + response.hrFact);
var ctx = document.getElementById("workTSChart_MTK");
var workTSChart = new Chart(ctx, {
plugins: [ChartDataLabels],
type: 'bar',
data: {
labels: [
'ООО "МТК"',
],
datasets: [{
label: 'Plan',
data: [response.hrPlan],
backgroundColor: 'rgb(161, 221, 239)',
borderColor: 'rgb(161, 221, 239)',
},
{
label: 'Sub',
data: [data2],
backgroundColor: 'rgb(254, 171, 133)',
borderColor: 'rgb(254, 171, 133)',
},
{
label: 'Hour',
data: [data3],
backgroundColor: 'rgb(127, 137, 138)',
borderColor: 'rgb(127, 137, 138)',
}]
},
options: {
responsive: true,
scales: {
y: {
max: 600000,
min: 500000,
ticks: {
stepSize: 10000,
}
}
},
plugins: {
datalabels: {
color: '#000000',
display: true,
},
legend: {
position: 'top',
},
title: {
display: true,
text: 'Sample title'
}
}
},
});
},
error: function (response) {
alert(response.responseText);
console.log("This is ERROR line");
}
});
});
</script>
UPDATE 2:
As it turns out, there is an updated version of chartjs-plugin-datalabels that is working with ChartJS 3.0, so the solution was to implement latest versions of both as shown below:
<body>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.5.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.0.0/dist/chartjs-plugin-datalabels.min.js"></script>
</body>
As stated in the documentation you will need to have at least Chart.js version 2.7.0 installed, you are currently using 2.3.0.
After that you either have to register the plugin globally by calling Chart.plugins.register(ChartDataLabels); so all the charts have the datalabels or register it locally to the chart you want the labels for as shown in the example below:
const options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
},
plugins: [ChartDataLabels]
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#1.0.0"></script>
</body>
I have two tables that joined. I get data from this query and show in jqgrid.
In normality my grid like this:
I want to show first column (C02/ C01 /C01/ C02 /C01) like header(colNames) and second column (2.2.2.2 / 1.1.1 /1.1.1 / 8.8.8.8. / 6.6.6.6) for value of first column and for other column like second column and sit below header. Indeed i'm gonna change horizontal grid to vertical(I think). My jqGrid code is below:
<script type="text/javascript">
var searchOptions = ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'bw', 'bn', 'in', 'ni', 'ew', 'en', 'cn', 'nc'];
$(document).ready(function () {
$('#list').jqGrid({
caption: "ObisData",
//url from wich data should be requested
url: '#Url.Action("GetObisData", "DataGrid")',
//EditData
editurl: '#Url.Action("EditData", "DataGrid")',
//type of data
datatype: 'json',
jsonReader: {
root: "Rows",
page: "Page",
total: "Total",
records: "Records",
repeatitems: true,
id: "ObisDataID",
cell: "RowCells"
},
//url access method type
mtype: 'POST',
//columns names
colNames: [ '', '', '', ''],
//columns model
colModel: [
{
name: 'ObisDataID', index: 'ObisDataID', align: 'right', width: 100,
editable: false, hidden: true, key: true
},
{
name: 'ObisInfoTitle', index: 'ObisInfoTitle', align: 'center', width: 100,
editable: false, hidden: false
}
,
{
name: 'ObisData', index: 'ObisData', align: 'center', width: 100,
editable: false, hidden: false
}
,
{
name: 'ObisInfoTranslateT', index: 'ObisInfoTranslateT', align: 'center', width: 170,
editable: false, hidden: false
}
],
//pager for grid
pager: $('#pager'),
//number of rows per page
rowNum: 10,
rowList: [10, 20, 50, 100],
//initial sorting column
sortname: 'ObisDataID',
//initial sorting direction
sortorder: 'desc',
//we want to display total records count
viewrecords: true,
altRows: true,
shrinkToFit: false,
width: '1100',
height: 'auto',
hidegrid: false,
direction: "rtl",
gridview: true,
rownumbers: true,
footerrow: true,
//userDataOnFooter: true,
loadComplete: function () {
//change alternate rows color
$("tr.jqgrow:odd").css("background", "#E0E0E0");
},
loadError: function (xhr, st, err) {
jQuery("#rsperror").html("Type: " + st + "; Response: " + xhr.status + " " + xhr.statusText);
}
//, loadonce: true
})
Change the direction code. then your grid will align left to right
direction : "ltr"
You don't want row numbers to
rownumbers: false
Header names From DB
First assign DB value in js variable after you will add colNames in jqgrid code.
var firstColName={insert DBvalue data};
var secondColName={insert DBvalue data};
var thirdColName={insert DBvalue data};
colNames: [ firstColName, secondColName,thirdColName, ......],
The problem im facing is I can't populate a Jqgrid from database, it just show me the data in Json format.
View (ListarDistritos)
#model IEnumerable<Entidades.Base.ENDistrito>
<script src="#Url.Content("~/Scripts/Base/modGrid.js")"></script>
<script src="#Url.Content("~/Content/JqueryGrid/jquery-1.9.0.min.js")"></script>
<link href="#Url.Content("~/Content/JqueryGrid/jquery-ui-1.9.2.custom.css")" rel="stylesheet" />
<script src="#Url.Content("~/Content/JqueryGrid/jquery.jqGrid.js")"></script>
<link href="#Url.Content("~/Content/JqueryGrid/ui.jqgrid.css")" rel="stylesheet" />
<script src="#Url.Content("~/Content/JqueryGrid/grid.locale-en.js")"></script>
<link href="#Url.Content("~/Content/estilo.css")" rel="stylesheet" />
<h2>#ViewBag.Message</h2>
<table id="grid">
</table>
<div id="pager"></div>
ModGrid.JS
var lastsel;
$(document).ready(function() {
$("#grid").jqGrid({
url: '/MantDistritos/ListarDistritos',
datatype: "json",
mtype: 'GET',
colNames: ['Id', 'Descripcion'],
colModel: [
{
name: 'IdDistrito', index: 'IdDistrito', sortable: false, align: 'left', width: '200',
editable: true, edittype: 'text'
},
{
name: 'DescripcionDistrito', index: 'DescripcionDistrito', sortable: false, align: 'left', width: '200',
editable: true, edittype: 'text'
}
],
jsonReader: {
repeatitems: false,
id: "0"
},
pager: jQuery('#pager'),
sortname: 'DescripcionDistrito',
rowNum: 10,
rowList: [10, 20, 25],
sortorder: "",
height: 125,
viewrecords: true,
rownumbers: true,
caption: 'Distritos',
width: 750,
editurl: "/Home/PerformCRUDAction",
onCellSelect: function (rowid, iCol, aData) {
if (rowid && rowid !== lastsel) {
if (lastsel)
jQuery('#grid').jqGrid('restoreRow', lastsel);
jQuery('#grid').jqGrid('editRow', rowid, true);
lastsel = rowid;
}
}
})
jQuery("#grid").jqGrid('navGrid', '#pager', { edit: false, add: true, del: true, search: false, refresh: true },
{ closeOnEscape: true, reloadAfterSubmit: true, closeAfterEdit: true, left: 400, top: 300 },
{ closeOnEscape: true, reloadAfterSubmit: true, closeAfterAdd: true, left: 450, top: 300, width: 520 },
{ closeOnEscape: true, reloadAfterSubmit: true, left: 450, top: 300 });
});
controller(MantDistritos)
public class MantDistritosController : Controller
{
public JsonResult ListarDistritos()
{
ViewBag.Message = Resources.Language.Title_Page_MTD_L;
var distrito = new LNClientes().DistritoListar();
return Json(distrito,JsonRequestBehavior.AllowGet);
}
}
When i execute the application it shows me this
[{"IdDistrito":1,"DescripcionDistrito":"MAGDALENA DEL MAR"},{"IdDistrito":2,"DescripcionDistrito":"JESUS MARIA"},{"IdDistrito":3,"DescripcionDistrito":"PUEBLO LIBRE"},{"IdDistrito":4,"DescripcionDistrito":"LIMA 36"},{"IdDistrito":5,"DescripcionDistrito":"BARRANCO"},{"IdDistrito":6,"DescripcionDistrito":"MIRAFLORES"},{"IdDistrito":7,"DescripcionDistrito":"SAN ISIDRO"},{"IdDistrito":8,"DescripcionDistrito":"SAN JUAN DE LURIGANCHO"},{"IdDistrito":9,"DescripcionDistrito":"SAN JUAN DE MIRAFLORES"},{"IdDistrito":10,"DescripcionDistrito":"LOS OLIVOS"},{"IdDistrito":11,"DescripcionDistrito":"COMAS"},{"IdDistrito":12,"DescripcionDistrito":"SURCO"}]
But it didn't show me any data inside the Jquery grid.
If i use ActionResult instead of JsonResult it shows me the Jquery grid but with no data.
Any clue to solve my issue would be appreciate
Thanks.
your json data seems to be fine. i find no error. Seems there is an error in your jsonReader. ID is the name of the Column. it should be of the form
jsonReader : {
root:"data", // Here your posted json data
page: "currpage", // shows current page
total: "totalpages", // total pages
records: "totalrecords" // total records
},
this url may help you to understand better. JsonReader wiki
And if you dont want to be bother about pages and total you can simply
jsonReader : {
root:"data",
page: function(obj) { return 1; }, // page as 1
total: function(obj) { return 1; }, // total as 1
records: function(obj) { return reponse.length;},
},
I am using the inlineNav edit options for Adding and Editing rows. The data is being updated to the database correctly, but I can't find a way to refresh the grid after a successful save without posting back to the server.
All of the Questions & Answers that I find recommend doing
$.('grid').trigger('reloadGrid');
But that seems unnecessary if the response from the server already contains the required data. It is primarily an issue when adding a new record and the ID value is displayed as jqg1.
I am using ASP.NET MVC4, with jqGrid 4.4.4.
Here is my view
$(document).ready(function () {
var emptyMsgDiv = $('<div>No school codes to display.</div>');
var grid = $('#tblSchools');
grid.jqGrid({
datatype: 'json',
viewrecords: true,
url: '#Url.Action("SchoolsGridData")',
editurl: '#Url.Action("EditSchoolsGridData")',
colNames: ['School ID', 'Name', 'SACE Number', 'School Code', 'LEA Code', 'DFEE Code', 'Active'],
colModel: [
{ name: 'SchoolId', index: 'SchoolId', width: 80, key: true },
{ name: 'Name', index: 'Name', width: 190, editable: true },
{ name: 'SaceSchoolNumber', index: 'SaceSchoolNumber', width: 105, editable: true, sortable: false },
{ name: 'Code', index: 'Code', width: 105, editable: true, sortable: false },
{ name: 'LeaCode', index: 'LeaCode', width: 80, editable: true, sortable: false },
{ name: 'DfeeCode', index: 'DfeeCode', width: 80, editable: true, sortable: false },
{ name: 'Active', index: 'Active', width: 80, editable: true, sortable: false }
],
shrinkToFit: true,
height: "100%",
caption: 'School list',
rowNum: 10,
rowList: [10, 15, 20],
emptyrecords: 'No school codes to display.',
pager: '#schoolsPager',
loadComplete: function () {
var count = grid.getGridParam();
var ts = grid[0];
if (ts.p.reccount === 0) {
grid.hide();
emptyMsgDiv.show();
} else {
grid.show();
emptyMsgDiv.hide();
}
}
}).trigger('reloadGrid', [{ page: 1 }]);
emptyMsgDiv.insertAfter(grid.parent());
grid.jqGrid('navGrid', "#schoolsPager", { edit: false, add: false, del: true });
grid.jqGrid('inlineNav', '#schoolsPager', {
addParams: {
position: "last",
addRowParams: {
"keys": true,
"aftersavefunc": function (rowid, response) {
alert('row: ' + rowid + ', response: ' + $.param(response));
}
}
},
editParams: {
"aftersavefunc": function (rowid, response) {
alert('row: '+rowid+', response: '+response);
}
}
});
});
</script>
<h3>Maintain Schools</h3>
<table id="tblSchools"></table>
<div id="schoolsPager" class="gridPager"></div>
and my Controller
public JsonResult EditSchoolsGridData(string oper, string SchoolId, string Name, string SaceSchoolNumber, string Code, string LeaCode, string DfeeCode, string Active)
{
[Update Logic]
return SchoolsGridData(string.Empty, "asc", 1, 10);
}
[HttpGet]
public JsonResult SchoolsGridData(string sidx, string sord, int? page, int? rows)
{
[Get data logic]
}
I can see the response json being displayed in the aftersavefunc, but can't find a way to bind it to the grid.
Is what I'm trying to do even possible?
You can use the addRowData method which will set the data to grid with our reloading the grid
jQuery("#tblSchools").jqGrid('addRowData', response.SchoolId, response, "first");
See the jqgrid methods wiki for more details