Develop Reference

Paging is not working in jqgrid, loadonce : false

I want to display json data in jqgrid. I have given loadonce as false, the total records is showing properly in grid pager but the page index is always 1 of 1. any help is appreciated.
Code:
var LoadCDHDetailsGrid = function (backstageViewByVal, bossStoreDate, filterflag, getBackStageDataFromCache, inboundViewType, carrierViewBy, featured) {
BackstageInboundbuildSearchFilters();
var mygridwidth = $('.tablegriddiv').width();
var defaultSort = "expectedDeliveryDate";
var url = featured ? '/Inbound/RetrieveFeaturedInboundData/' : '/Inbound/RetrieveCDHInboundDetailsData/';
jQuery("#BackStageGrid").jqGrid({
url: url,
postData: { searchfilters: JSON.stringify(BackstageAdvfilters), advf: advf, customsortname: customsortname, customsortorder: customsortorder, filterflag: filterflag, storeDt: bossStoreDate, GetFromCache: getBackStageDataFromCache, packageType: inboundViewType, selectedviewTransfers: backstageViewByVal, carrierView: carrierViewBy },
datatype: 'json',
mtype: 'POST',
colNames: ['Tracking #', 'Carton #', 'Delivery Date', 'Status', 'Status Date', 'Status Time'],
colModel: [
{ name: 'bakTrackingNbr', jsonmap: 'trackingLabelNbr', index: 'trackingLabelNbr', width: 170, formatter: commonWorkloadFunctions.trackingHyperlinkFormatter, unformat: commonWorkloadFunctions.trackingnHyperlinkUnFormatter, align: 'center', search: true, classes: "underlineres" },
{ name: 'bakCarton', jsonmap: 'cartonNumber', index: 'cartonNumber', width: 145, align: 'center', search: true, formatter: commonWorkloadFunctions.cdhCartonHyperlinkFormatter, unformat: commonWorkloadFunctions.cartonHyperlinkUnFormatter, classes: "underlineres" },
//Added for SSW2- 292
{ name: 'bakExpectedDelDate', jsonmap: 'expectedDeliveryDateTime', index: 'expectedDeliveryDate', width: 125, align: 'center', sorttype: 'date', formatter: 'date', formatoptions: { srcformat: "ISO8601Long", newformat: "m/d/Y" }, search: true },
{
name: 'bakStatus', jsonmap: 'status', index: 'Status', width: 150, align: 'center', formatter: 'select',
edittype: 'select', editoptions: {
value: workloadGridDropdownColumnsList.statusListBackstage(),
defaultValue: 'ALL',
multiple: true,
width: '200'
},
stype: 'select', searchoptions: {
sopt: ['eq', 'ne'],
value: workloadGridDropdownColumnsList.statusListInBoundBackstage(),
attr: { multiple: 'multiple', size: 5 },
dataInit: dataInitMultiselect
}
},
{ name: 'bakStatusDate', jsonmap: 'statusDate', index: 'StatusDate', width: 100, align: 'center', search: true },
{ name: 'bakStatusTime', jsonmap: 'statusTime', index: 'StatusTime', width: 80, align: 'center', search: false },
],
pager: '#BackStageGridPager',
rowNum: 30,
width: mygridwidth,
gridview: true,
ignoreCase: true,
cmTemplate: { resizable: false },
sortname: 'trackingLabelNbr',
sortname: defaultSort,
viewrecords: true,
sortorder: 'asc',
sortable: false,
scrollable: true,
loadonce: false,
shrinkToFit: true,
onSelectRow: function (rowid, status, e) {
backstageGridBuiltinFunctions.backstageGridOnSelectRow(rowid, status, e);
},
beforeRequest: function () {
if (toolbarBackStatusSel.length == 0) {
$("input:checkbox[name=multiselect_gs_bakStatus]:checked").each(function () {
toolbarBackStatusSel.push($(this).attr('value'));
bakstatusValue += $(this).attr('value') + ",";
});
if (bakstatusValue.length >= 1 && advfilters !== '') {
for (var i = 0; i < advfilters.length; i++) {
if (advfilters[i].SearchingName == 'Status')
advfilters.splice(i, 1);
}
advfilters.push({ SearchingName: "Status", SearchingValue: (bakstatusValue.replace(/,\s*$/, '')) });
}
}
jQuery("#BackStageGrid").jqGrid('setGridParam', { postData: { searchfilters: JSON.stringify(advfilters), advf: advf, customsortname: customsortname, customsortorder: customsortorder, filterflag: filterflag, storeDt: bossStoreDate, GetFromCache: getBackStageDataFromCache, packageType: inboundViewType, selectedviewTransfers: backstageViewByVal, carrierView: carrierViewBy } });
if (typeof $("#gs_bakTrackingNbr").val() !== 'undefined') {
baktrackingNoValue = $("#gs_bakTrackingNbr").val();
}
if (typeof $("#gs_bakCarton").val() !== 'undefined') {
bakcartonNoValue = $("#gs_bakCarton").val();
}
if (typeof $("#gs_bakExpectedDelDate").val() !== 'undefined') {
bakexpectedDelDateValue = $("#gs_bakExpectedDelDate").val();
}
if (typeof $("#gs_bakPackageType").val() !== 'undefined') {
bakpackageTypeValue = $("#gs_bakPackageType").val();
}
if (typeof $("#gs_bakStatusDate").val() !== 'undefined') {
bakstatusDateValue = $("#gs_bakStatusDate").val();
}
if (typeof $("#gs_bakStatusTime").val() !== 'undefined') {
bakstatusTimeValue = $("#gs_bakStatusTime").val();
}
},
onPaging: function () {
filterflag = false;
getBackStageDataFromCache = true;
},
loadComplete: function (data) {
backstageGridBuiltinFunctions.backstageGridViewLoadComplete(data);
},
loadError: function (xhr, status, error) {
filterflag = true;
getBackStageDataFromCache = false;
commonFunctions.spmDialogueAlert("Data service connectivity error.");
commonWorkloadFunctions.hideLoadingMessage();
},
height: "400",
timeout: 600000
}).trigger("reloadGrid");
var theGrid = jQuery("#BackStageGrid");
theGrid.jqGrid('navGrid', '#BackStageGridPager', { refreshstate: 'current', edit: false, refresh: false, search: false, del: false, add: false });
theGrid.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true, defaultSearch: myDefaultSearch, beforeSearch: BackStageInboundBeforeSearchHandler });
};
I have tried using loadonce as true. then the pagination is working, but when searching a value the grid is blank. no records is returning. my data is returning from a web service. the is no issue with the data.

I was able to resolve the issue by sending record count, page index along with data. which I was not sending previously.

How To Refresh Google Chart When updating jqGrid

I have a jqGrid in a user control which is placed on an .aspx page. I also have a Google Graph to display the grid data on the same page. Both the grid and chart use Handler1.aspx as the url. Handler1.ashx makes a call to a SQL server and returns JSON.
When initially loading the page, I can see both the graph and the chart go into Handler1.ashx to get the data - so I get a grid and a nice line chart.
The issue is when I update data in the grid, the chart is not updated.
I have tried the SO solution Here without success. I have also tried a button on the page that calls drawChart(). Here is my grid:
$(function () {
$('#dataGrid').jqGrid({
url: 'Handler1.ashx',
datatype: 'json',
mtype: 'POST',
colNames: ["Days", "Origin IB Loads", "Origin OB Loads", "Dest IB Loads", "Dest IB Loads", "ID"],
colModel: [
{ name: 'Days', index: 'Days', width: 100, editable: true, editrules: { required: true }, },
{ name: 'OrigIB', index: 'OrigIB', width: 100, editable: true, editrules: { required: true }, },
{ name: 'OrigOB', index: 'OrigOB', width: 100, editable: true, editrules: { required: true }, },
{ name: 'DestIB', index: 'DestIB', width: 100, editable: true, editrules: { required: true }, },
{ name: 'DestOB', index: 'DestOB', width: 100, editable: true, editrules: { required: true }, },
{ name: 'ID', index: 'ID', width: 80, Key: true, hidden: true }
],
loadonce: false,
pager: '#pagingGrid',
rowNum: 10,
rowList: [10, 20, 30, 'All'],
viewrecords: true,
gridview: true,
autoencode: true,
loadComplete: function (data) {
$(".ui-pg-selbox option[value='All']").val(10000);
},
caption: 'Graph Data',
editurl: 'Handler2.ashx'
});
jQuery("#dataGrid").navGrid("#pagingGrid", {
edit: true,
add: true,
del: true,
search: false,
//searchtext: "Search",
refresh: true
},
{
closeAfterEdit: true,
reloadAfterSubmit: true
},
{
closeAfterAdd: true,
reloadAfterSubmit: true
},
{
reloadAfterSubmit: true
});
})
And here is my Chart - including the grid user control and chart div:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
$.ajax({
url: "handler1.ashx",
dataType: "json",
async: "false",
success: function (jsonData) {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Days');
data.addColumn('number', 'Origin IB Loads');
data.addColumn('number', 'Origin OB Loads');
data.addColumn('number', 'Dest IB Loads');
data.addColumn('number', 'Dest OB Loads');
for (var i = 0; i < jsonData.length; i++) {
data.addRow([jsonData[i].Days, jsonData[i].OrigIB, jsonData[i].OrigOB, jsonData[i].DestIB, jsonData[i].DestOB]);
}
var options = {
title: 'Single Lane Route Quote',
is3D: true,
curveType: 'function',
legend: { position: 'bottom' },
vAxis: { title: "Days" },
hAxis: { title: "Loads" }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
});
}
<My:GridControl ID ="gridControl" runat="server" />
<div id="curve_chart" style="width: 1000px; height: 500px"></div>
How can I get the chart to refresh after making an update in the grid?

what if you tried something like this...
Load Google
Load jqGrid
Load Chart when loadComplete fires on jqGrid
this will allow google to kick things off, then when the grid updates, so will the chart...
google.charts.load('current', {
callback: loadDataGrid,
packages: ['controls', 'table']
});
function loadDataGrid() {
$('#dataGrid').jqGrid({
url: 'Handler1.ashx',
datatype: 'json',
mtype: 'POST',
colNames: ["Days", "Origin IB Loads", "Origin OB Loads", "Dest IB Loads", "Dest IB Loads", "ID"],
colModel: [
{ name: 'Days', index: 'Days', width: 100, editable: true, editrules: { required: true }, },
{ name: 'OrigIB', index: 'OrigIB', width: 100, editable: true, editrules: { required: true }, },
{ name: 'OrigOB', index: 'OrigOB', width: 100, editable: true, editrules: { required: true }, },
{ name: 'DestIB', index: 'DestIB', width: 100, editable: true, editrules: { required: true }, },
{ name: 'DestOB', index: 'DestOB', width: 100, editable: true, editrules: { required: true }, },
{ name: 'ID', index: 'ID', width: 80, Key: true, hidden: true }
],
loadonce: false,
pager: '#pagingGrid',
rowNum: 10,
rowList: [10, 20, 30, 'All'],
viewrecords: true,
gridview: true,
autoencode: true,
loadComplete: function (data) {
$(".ui-pg-selbox option[value='All']").val(10000);
var chartData = new google.visualization.DataTable();
chartData.addColumn('number', 'Days');
chartData.addColumn('number', 'Origin IB Loads');
chartData.addColumn('number', 'Origin OB Loads');
chartData.addColumn('number', 'Dest IB Loads');
chartData.addColumn('number', 'Dest OB Loads');
for (var i = 0; i < data.length; i++) {
chartData.addRow([data[i].Days, data[i].OrigIB, data[i].OrigOB, data[i].DestIB, data[i].DestOB]);
}
var options = {
title: 'Single Lane Route Quote',
is3D: true,
curveType: 'function',
legend: { position: 'bottom' },
vAxis: { title: "Days" },
hAxis: { title: "Loads" }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(chartData, options);
}
},
caption: 'Graph Data',
editurl: 'Handler2.ashx'
});
jQuery("#dataGrid").navGrid("#pagingGrid", {
edit: true,
add: true,
del: true,
search: false,
//searchtext: "Search",
refresh: true
},
{
closeAfterEdit: true,
reloadAfterSubmit: true
},
{
closeAfterAdd: true,
reloadAfterSubmit: true
},
{
reloadAfterSubmit: true
});
}

jqxGrid: conditionally add edit button per row

i have jqxGrid and display data fine using ajax request and everything is workig fine .
My problem : in grid coulmns i added edit button but i want to add this button conditionally depended on values of another field
My Code :
$(document).ready(function () {
$("#btnsearchHistory").click(function () {
var txtfrom = $('#txtfrom').val();
var txtto = $('#txtto').val();
var terminalId = $('#txtMerchantAccounthistory').val();
var SOFAccount = $('#txtsalesNumber').val();
var statMsg = $('#drpStatMsg').val();
var formatedData = '';
var totalrecords = 0;
if (txtfrom == "") {
alert("Select Valid From Date");
event.returnValue = false;
return false;
}
if (txtto == "") {
alert("Select Valid To Date");
event.returnValue = false;
return false;
}
var source = {
datatype: "json",
datafields: [
{ name: 'Id' },
{ name: 'TerminalId' },
{ name: 'UserName' },
{ name: 'Error' },
{ name: 'Date' },
{ name: 'SalesAccount' },
{ name: 'BillTypeCode' },
{ name: 'Amount' },
{ name: 'BillerCode' },
{ name: 'BankID' },
{ name: 'ReqId' }
],
sort: function () {
$("#grid").jqxGrid('updatebounddata', 'sort');
},
filter: function () {
$("#grid").jqxGrid('updatebounddata', 'filter');
},
beforeprocessing: function (data) {
var returnData = {};
data = data.d;
totalrecords = data.count;
returnData.totalrecords = data.count;
returnData.records = data.data;
if (data.data != null) {
return returnData;
}
return data;
},
type: 'Get',
sortcolumn: 'Id',
sortdirection: 'desc',
formatdata: function (data) {
data.pagenum = data.pagenum || 0;
data.pagesize = data.pagesize || 10;
data.sortdatafield = data.sortdatafield;
data.sortorder = data.sortorder || 'asc';
data.filterscount = data.filterscount || 0;
formatedData = buildQueryString(data);
return formatedData;
},
url: '/WS/WS.asmx/SearchTransferLog',
data: { fromDate: JSON.stringify(txtfrom), toDate: JSON.stringify(txtto), terminalId: JSON.stringify(terminalId), SOFAccount: JSON.stringify(SOFAccount), statMsg: JSON.stringify(statMsg) },
};
var dataAdapter = new $.jqx.dataAdapter(source, {
contentType: 'application/json; charset=utf-8',
loadError: function (xhr, status, error) {
alert(error);
}
});
var cols = [
{ text: 'Id', dataField: 'Id', hidden: true },
{ text: 'رقم حساب التاجر', dataField: 'TerminalId', width: '28%', align: "right", cellsalign: "right", hidden: true },
{ text: '', dataField: 'UserName', width: '28%', align: "right", cellsalign: "right", hidden: true },
{ text: 'الحالة', dataField: 'Error', width: '28%', align: "right", cellsalign: "right" },
{ text: 'تاريخ الدفع', dataField: 'Date', width: '18%', align: "right", cellsalign: "right" },
{ text: 'حساب الدفع', dataField: 'SalesAccount', width: '15%', align: "right", cellsalign: "right" },
{ text: 'توقعات الاغلاق على', dataField: 'BillTypeCode', width: '15%', align: "right", cellsalign: "right", hidden: true },
{ text: 'القيمة المحولة', dataField: 'Amount', width: '15%', align: "right", cellsalign: "right" },
{ text: 'توقعات الاغلاق على', dataField: 'BillerCode', width: '15%', align: "right", cellsalign: "right", hidden: true },
{ text: 'توقعات الاغلاق على', dataField: 'BankID', width: '15%', align: "right", cellsalign: "right", hidden: true },
{ text: 'توقعات الاغلاق على', dataField: 'ReqId', width: '15%', align: "right", cellsalign: "right", hidden: true },
{
text: '', datafield: 'Edit', columntype: 'button', width: '100px', cellsrenderer: function () {
return "استعلام عن الحالة";
}, buttonclick: function (row) {
var id = $("#detail_grid").jqxGrid('getcellvalue', row, "Id");
alert(id);
//RefreshTransferStatus();
}
}
];
$("#detail_grid").jqxGrid({
source: dataAdapter,
pageable: true,
autoheight: true,
virtualmode: true,
sorttogglestates: 1,
filterable: true,
sortable: true,
rtl: true,
altrows: true,
width: '100%',
rendergridrows: function (args) {
return args.data;
},
columns: cols
});
});
});

Loading json data to highcharts with multiple series

Please help. Been banging my head against the wall on this for a week, trying every option I can find on line but no luck...
Am using HighCharts with a C#/Razor/WebMatrix site. Trying to create a Stacked column chart - have my Categories loading dynamically but can't get the series loaded.
I am new to Javascript and web programming in general so please be kind!
The JSON return data is:
["Clubs","1850","2600","5600","4950","8535","6050","8640",
"Fesitvals","0","0","1000","750","0","1500","3250",
"Private","650","2300","1600","2500","0","400","900",
"Weddings","0","1400","3600","0","0","0","0",
"Other Income","0","0","70","540","50","0","0"]
I am trying to load the series data prior to rendering the chart...
The following is the entire script with formatting, etc.
script bombs out on the function to process and load the Json Data set (see Bold/Italic).
Chart looks great if hard code the series data, but since the site is database driven and the data changes regularly....
Here is the script:
$(function () {
var ChartType = document.getElementById("CType").value;
var SelectMember = document.getElementById("SMbmr").value;
Highcharts.theme = {
chart: {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, 'rgb(0, 0, 0'],
[1, 'rgb(0, 0, 0)']
]
},
borderWidth: 0,
borderRadius: 15,
plotBackgroundColor: null,
plotShadow: false,
plotBorderWidth: 0
},
title: {
style: {
color: '#FFF',
font: '16px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
}
},
subtitle: {
style: {
color: '#DDD',
font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
}
},
xAxis: {
gridLineWidth: 0,
lineColor: '#999',
tickColor: '#999',
labels: {
style: {
color: '#999',
fontWeight: 'bold'
}
},
title: {
style: {
color: '#AAA',
font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
}
}
},
yAxis: {
alternateGridColor: null,
minorTickInterval: null,
gridLineColor: 'rgba(255, 255, 255, .1)',
minorGridLineColor: 'rgba(255,255,255,0.07)',
lineWidth: 0,
tickWidth: 0,
labels: {
style: {
color: '#999',
fontWeight: 'bold'
}
},
title: {
style: {
color: '#AAA',
font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
}
}
},
legend: {
itemStyle: {
color: '#CCC'
},
itemHoverStyle: {
color: '#FFF'
},
itemHiddenStyle: {
color: '#333'
}
},
labels: {
style: {
color: '#CCC'
}
},
tooltip: {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, 'rgba(96, 96, 96, .8)'],
[1, 'rgba(16, 16, 16, .8)']
]
},
borderWidth: 0,
style: {
color: '#FFF'
}
},
plotOptions: {
series: {
shadow: true
},
line: {
dataLabels: {
color: '#CCC'
},
marker: {
lineColor: '#333'
}
},
spline: {
marker: {
lineColor: '#333'
}
},
scatter: {
marker: {
lineColor: '#333'
}
},
candlestick: {
lineColor: 'white'
}
},
toolbar: {
itemStyle: {
color: '#CCC'
}
},
navigation: {
buttonOptions: {
symbolStroke: '#DDDDDD',
hoverSymbolStroke: '#FFFFFF',
theme: {
fill: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0.4, '#606060'],
[0.6, '#333333']
]
},
stroke: '#000000'
}
}
},
// scroll charts
rangeSelector: {
buttonTheme: {
fill: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0.4, '#888'],
[0.6, '#555']
]
},
stroke: '#000000',
style: {
color: '#CCC',
fontWeight: 'bold'
},
states: {
hover: {
fill: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0.4, '#BBB'],
[0.6, '#888']
]
},
stroke: '#000000',
style: {
color: 'white'
}
},
select: {
fill: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0.1, '#000'],
[0.3, '#333']
]
},
stroke: '#000000',
style: {
color: 'yellow'
}
}
}
},
inputStyle: {
backgroundColor: '#333',
color: 'silver'
},
labelStyle: {
color: 'silver'
}
},
navigator: {
handles: {
backgroundColor: '#666',
borderColor: '#AAA'
},
outlineColor: '#CCC',
maskFill: 'rgba(16, 16, 16, 0.5)',
series: {
color: '#7798BF',
lineColor: '#A6C7ED'
}
},
scrollbar: {
barBackgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0.4, '#888'],
[0.6, '#555']
]
},
barBorderColor: '#CCC',
buttonArrowColor: '#CCC',
buttonBackgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0.4, '#888'],
[0.6, '#555']
]
},
buttonBorderColor: '#CCC',
rifleColor: '#FFF',
trackBackgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#000'],
[1, '#333']
]
},
trackBorderColor: '#666'
},
// special colors for some of the demo examples
legendBackgroundColor: 'rgba(48, 48, 48, 0.8)',
legendBackgroundColorSolid: 'rgb(70, 70, 70)',
dataLabelsColor: '#444',
textColor: '#E0E0E0',
maskColor: 'rgba(255,255,255,0.3)'
};
// Apply the theme
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
var CatName = new Array();
var DataSeries = new Array();
var currentDate = new Date();
var currentYear = currentDate.getFullYear();
for (var i = 2007; i <= currentYear; i++) {
CatName.push(i.toString());
}
***$.getJSON('/Admin/Accounting/ChartJSon/' + ChartType + '/0', function (DataSet) {
options.series = DataSet;
});***
$('#container').highcharts(
{
chart:
{
renderTo: 'container',
defaultSeriesType: 'column',
plotBorderWidth: 1,
plotBorderColor: '#3F4044'
},
credits: { enabled: false },
title:
{
text: 'Sales by Type and Year'
},
xAxis:
{
categories: CatName
},
yAxis:
{
allowDecimals: false,
min: 0,
title:
{
text: 'Sales'
}
},
tooltip:
{
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions:
{
column:
{
stacking: 'normal'
}
},
series: []
});
});

Well I see some problems here. First try to replace the highchart code with the below mentioned code. As you need to specify data for each series in the series option. and provide with the unique name.
$('#container').highcharts(
{
chart:
{
renderTo: 'container',
defaultSeriesType: 'column',
plotBorderWidth: 1,
plotBorderColor: '#3F4044'
},
credits: { enabled: false },
title:
{
text: 'Sales by Type and Year'
},
xAxis:
{
categories: CatName
},
yAxis:
{
allowDecimals: false,
min: 0,
title:
{
text: 'Sales'
}
},
tooltip:
{
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions:
{
column:
{
stacking: 'normal'
}
},
series: [{
name: 'Clubs',
data: []
}, {
name: 'Festivals',
data: []
}, {
name: 'Private',
data: [],
}, {
name: 'Weddings',
data: [],
}, {
name: 'OtherIncome',
data: [],
}]
});
});
And your JSON should be an array consisting only numbers.

Chart initialization should in insie getJSON body, because you try to initialize chart, earlier then data is get from URL
In JSON you need to use numbers, not strings. If it is not possbile, you need to parse values in javascript by parseFloat on each data value.
Your series data object, should contian only numbers, not names like "Fesitvals". If you wuld like to have a few series, and each of them has own name, you need to parse your json and praaper correct array structure.

Setting default Value Inline Add Jqgrid

Currently I have a requirement in a system where I need to repeat much of the data from the last row entered.
Actualy this is my Grid:
$('#list').jqGrid({
colNames: ['VendedorId', 'Vendedor', 'Especie', 'Cabezas', 'Kilos', 'Precio', 'Guías Venta', 'Vencimiento'],
colModel: [
{ hidden: true, name: 'VendedorId' },
{ editable: true, width: 160, edittype: 'select', editoptions: { dataUrl: '/Clientes/CmbClientes' }, editrules: { required: true }, name: 'Vendedor' },
{ editable: true, width: 70, edittype: 'select', editoptions: { dataUrl: '/Especies/CmbEspecie' }, editrules: { required: true }, name: 'Especie' },
{ align: 'right', width: 50, editable: true, editoptions: { size: 3, maxlength: 3 }, editrules: { number: true }, formatter: 'number', formatoptions: { decimalPlaces: 0 }, name: 'Cabezas' },
{ align: 'right', width: 50, editable: true, editrules: { number: true }, formatter: 'number', formatoptions: { decimalPlaces: 0 }, name: 'Kilos' },
{ align: 'right', width: 50, editable: true, editrules: { number: true, required: true }, formatter: 'currency', formatoptions: { prefix: '$',decimalPlaces: 2 }, name: 'Precio' },
{ editable: true, width: 50, editoptions: { maxlength: 20 }, name: 'GuiasVenta' },
{ align: 'right', width: 70, editable: true, editoptions: { size: 3, maxlength: 3 }, editrules: { number: true, required: true }, formatter: 'number', formatoptions: { decimalPlaces: 0 }, name: 'Vencimiento' }
],
url: '#Url.Action("ListVendedores")',
datatype: 'json',
editurl: '#Url.Action("SaveVendedor")',
mtype: 'POST',
pager: '#vendedoresPager',
prmNames: { id: 'RemateId' },
rowList: [5, 10, 15, 20],
sortname: 'FeriaId',
viewrecords: true,
width: 850
}).jqGrid('navGrid', '#vendedoresPager', { add: false, edit: false, del:true ), search: false },{},{},{ url: '/Remates/BorrarVendedor' }).
jqGrid('inlineNav', '#vendedoresPager',
{
add : true,
edit : true,
save : true,
addParams: {
addRowParams: {
position: "afterSelected",
keys: true,
extraparam: {
...
}
}
},
editParams: {
keys: true,
extraparam: {
...
}
}
});
When adding the first row no default data, but then fields Vendedor, Especie, Guías Venta and Vencimiento should repeat the last entered.
In this scenario I imagine two possible solutions, one is using the event jqGridInlineEditRow, and the other is using autocomplete.
Have read this Question about qGridInlineEditRow. But in this case as I can get the data from the last row of the grid and how it should load the data into the new row.
And read this Question about autocomplete.
Maybe there other solutions that can read to get a better approximation to the solution.
Can anyone help?
update 15/04/2013
i replace the Add button for a custom button this is the code:
$("#Agregar").click(function () {
var parameters =
{
initdata: {},
position: "first",
useDefValues: true,
useFormatter: false,
addRowParams: {
keys: true,
extraparam: {
...
},
aftersavefunc: function (rowid) {
var grid = jQuery('#vendedores');
lastSavedAddData = grid.jqGrid("getRowData", rowid);
},
oneditfunc: function (rowid) {
var name;
var grid = jQuery('#vendedores');
for (name in lastSavedAddData) {
if (lastSavedAddData.hasOwnProperty(name)) {
$('#' + rowid +"_"+ name).val(lastSavedAddData[name]);
}
}
}
}
};
jQuery("#vendedores").jqGrid('addRow', parameters);
});
But this work only for text box but not for a combo

If I understand correctly your question the usage of jQuery UI Autocomplete is independent from initial filling of the input fields of the last added line during starting the next like to add.
It seems to me that you can save data saved in the last added line inside of aftersavefunc callback defined in addRowParams (or use jqGridInlineAfterSaveRow event alternatively). You can use oneditfunc to set the last entered values in the new like. For example you can use
addRowParams: {
position: "afterSelected",
keys: true,
extraparam: {
...
},
aftersavefunc: function (rowid) {
lastSavedAddData = $(this).jqGrid("getRowData", rowid);
},
oneditfunc: function (rowid) {
var name;
for (name in lastSavedAddData) {
if (lastSavedAddData.hasOwnProperty(name)) {
$("#" + $.jgrid.jqID(rowid + "_" + name)).val(lastSavedAddData[name]);
}
}
}
}
where lastSavedAddData should be defined in some outer scope. It's not tested code. I just wanted to show the main idea. You can extend the code of oneditfunc to support more different controls which you use in editing line.