Kim
Reputation: 3
JQGrid loadonce: true sort not working
I'm relatively new to javascript, jqgrid and JSON data. I've been searching here and have managed to figure out quite a bit that way (Thanks!). But after looking at all the similar questions out there already, I'm afraid I still can't figure out what I don't have quite right yet with the grid I'm currently working on.
I can get the grid to populate using JSON data generated by a query in an ASP program, but if I set my grid to loadonce: true because I want to sort/re-sort the grid data locally after the initial retrieval, I "lose" all my grid data when clicking a column heading to re-sort the grid data.
I have a program called getsalesdata.asp that generates text in the format:
{
"total": "1",
"page": "1",
"records": "2",
"rows": [
{
"RowID": "1",
"ParentCustName": "ABCCompany",
"YTDSales": "11173.76",
"YTDBudget": "11789.84",
"YTDDiff": "-616.08",
"YTDDiffPct": "95",
"Sales3": "11173.76",
"Budget3": "11789.84",
"Diff3": "-616.08",
"Diff3Pct": "95",
"FYearSales": "11173.76",
"FYearBudget": "11789.84",
"FYearDiff": "-616.08",
"FYearDiffPct": "95"
},
{
"RowID": "2",
"ParentCustName": "XYZ Company",
"YTDSales": "51395.46",
"YTDBudget": "35147.52",
"YTDDiff": "16247.94",
"YTDDiffPct": "146",
"Sales3": "51395.46",
"Budget3": "43934.4",
"Diff3": "7461.06",
"Diff3Pct": "117",
"FYearSales": "51395.46",
"FYearBudget": "57114.72",
"FYearDiff": "-5719.26000000001",
"FYearDiffPct": "90"
}
]
}
I've used the online tools to ensure that the data is a valid JSON string and I'm not just missing some quotes or something, so that doesn't appear to be the problem.
Can anybody point me in the right direction on how to resolve my problem?
My JQGrid code looks like:
$(document).ready(function () {
jQuery("#customer_grid").jqGrid({
datatype: "json",
url: "getsalesdata.asp",
colNames: ["", "<b>Customer</b>", "<b>Sales</b>", "<b>Budget</b>", "<b>Difference</b>", "<b>% of Goal</b>", "<b>Sales + Forecast</b>", "<b>Budget</b>", "<b>Difference</b>", "<b>% of Goal</b>", "<b>Sales + Forecast</b>", "<b>Budget</b>", "<b>Difference</b>", "<b>% of Goal</b>", ""],
colModel: [
{ name: "ID", hidden: true, frozen: true, index: "ID" },
{ name: "ParentCustName", width: 225, sorttype: "text", sortable: true, frozen: true },
{ name: "YTDSales", formatter:'currency', sorttype: "number", width: 140, align: "right", sortable: true },
{ name: "YTDBudget", formatter:'currency', width: 140, sorttype: "number", align: "right", sortable: true },
{ name: "YTDDiff", formatter: 'currency', width: 140, sorttype: "number", align: "right", sortable: true,
cellattr: function (rowId, val, rawObject) {
if (parseFloat(val) < 0) {
return " class='myAlertRowClass'";
}
if (parseFloat(val) > 0) {
return " class='myGoalRowClass'";
}
}
},
{ name: "YTDDiffPct", width: 70, sorttype: "int", align: "right",
cellattr: function (rowId, val, rawObject) {
if (parseFloat(val) < 85) {
return " class='myAlertRowClass'";
}
if (parseFloat(val) > 85) {
return " class='myGoalRowClass'";
}
}
},
{ name: "Sales3", formatter:'currency', width: 140, sorttype: "number", align: "right" },
{ name: "Budget3", formatter:'currency', width: 140, sorttype: "number", align: "right" },
{ name: "Diff3", formatter: 'currency', width: 140, sorttype: "number", align: "right", sortable: true,
cellattr: function (rowId, val, rawObject) {
if (parseFloat(val) < 0) {
return " class='myAlertRowClass'";
}
if (parseFloat(val) > 0) {
return " class='myGoalRowClass'";
}
}
},
{ name: "Diff3Pct", width: 70, sorttype: "int", align: "right",
cellattr: function (rowId, val, rawObject) {
if (parseFloat(val) < 85) {
return " class='myAlertRowClass'";
}
if (parseFloat(val) > 85) {
return " class='myGoalRowClass'";
}
}
},
{ name: "FYearSales", formatter:'currency', width: 140, sorttype: "number", align: "right" },
{ name: "FYearBudget", formatter:'currency', width: 140, sorttype: "number", align: "right" },
{ name: "FYearDiff", formatter: 'currency', width: 140, sorttype: "number", align: "right", sortable: true,
cellattr: function (rowId, val, rawObject) {
if (parseFloat(val) < 0) {
return " class='myAlertRowClass'";
}
if (parseFloat(val) > 0) {
return " class='myGoalRowClass'";
}
}
},
{ name: "FYearDiffPct", width: 70, sortype: "int", align: "right",
cellattr: function (rowId, val, rawObject) {
if (parseFloat(val) < 85) {
return " class='myAlertRowClass'";
}
if (parseFloat(val) > 85) {
return " class='myGoalRowClass'";
}
}
},
{ name: "Ghost", width: 20}
],
rowNum: "records",
jsonReader: {
repeatitems: false,
id: "RowID"
},
gridview: true,
footerrow: true,
loadComplete: function(){
var $self = $(this);
sumSales = $self.jqGrid("getCol", "YTDSales", true, "sum");
sumBudget = $self.jqGrid("getCol", "YTDBudget", false, "sum");
sumDiff = $self.jqGrid("getCol", "YTDDiff", false, "sum");
sumSales3 = $self.jqGrid("getCol", "Sales3", false, "sum");
sumBudget3 = $self.jqGrid("getCol", "Budget3", false, "sum");
sumDiff3 = $self.jqGrid("getCol", "Diff3", false, "sum");
sumFYearSales = $self.jqGrid("getCol", "FYearSales", false, "sum");
sumFYearBudget = $self.jqGrid("getCol", "FYearBudget", false, "sum");
sumFYearDiff = $self.jqGrid("getCol", "FYearDiff", false, "sum");
$self.jqGrid("footerData", "set", { ParentCustName: "Grand Totals:", YTDSales: sumSales, YTDBudget: sumBudget, YTDDiff: sumDiff, Sales3: sumSales3, Budget3: sumBudget3, Diff3: sumDiff3, FYearSales: sumFYearSales, FYearBudget: sumFYearBudget, FYearDiff: sumFYearDiff });
},
altRows: true,
altclass: "myAltRowClass",
autoencode: true,
loadonce: true,
sortorder: "asc",
sortable: true,
sortname: "ParentCustName",
viewrecords: true,
emptyrecords: "No records to view...",
caption: "Customer Sales Performance Summary",
loadtext: "Loading data, please wait...",
height: "auto",
onSelectRow: function (RowID) {
var rowId = $('#customer_grid').jqGrid('getGridParam', 'selrow');
var colData = $('#customer_grid').jqGrid('getCell', rowId, 'ParentCustName');
var ParentName = colData.replace("(Tooling)", "");
var ParentStr = "SalesPerformance2New.asp?Parent=" + (ParentName);
window.location.href = ParentStr;
}
});
Any help would be greatly appreciated!
Upvotes: 0
Views: 2016
Answers (1)
Oleg
Reputation: 221997
I debugged your code and have found very simple, but a little funny reason: you use rowNum: "records", but rowNum have to have integer value. Because the grid has no pager or toppager: true parameter I would recommend to use any large enough value for rowNum like rowNum: 10000.
Replacing of rowNum: "records" to rowNum: 10000 should solve your main problem.
Additionally you should change some ; to , in the code to loadComplete do declare the variables sumSales, sumBudget and other which you use. The code will be like below:
loadComplete: function(){
var $self = $(this),
sumSales = $self.jqGrid("getCol", "YTDSales", true, "sum"),
sumBudget = $self.jqGrid("getCol", "YTDBudget", false, "sum"),
sumDiff = $self.jqGrid("getCol", "YTDDiff", false, "sum"),
sumSales3 = $self.jqGrid("getCol", "Sales3", false, "sum"),
sumBudget3 = $self.jqGrid("getCol", "Budget3", false, "sum"),
sumDiff3 = $self.jqGrid("getCol", "Diff3", false, "sum"),
sumFYearSales = $self.jqGrid("getCol", "FYearSales", false, "sum"),
sumFYearBudget = $self.jqGrid("getCol", "FYearBudget", false, "sum"),
sumFYearDiff = $self.jqGrid("getCol", "FYearDiff", false, "sum");
$self.jqGrid("footerData", "set", { ParentCustName: "Grand Totals:", YTDSales: sumSales, YTDBudget: sumBudget, YTDDiff: sumDiff, Sales3: sumSales3, Budget3: sumBudget3, Diff3: sumDiff3, FYearSales: sumFYearSales, FYearBudget: sumFYearBudget, FYearDiff: sumFYearDiff });
}
Upvotes: 1
Related Questions
- JQuery jqgrid not sorting on client side
- jqGrid - sort not working
- jqGrid sorting on client side
- Sort not working with jqGrid
- Sorting issue in latest JQ Grid
- Server Side Sort JQGrid Sort Button Not Working
- JQGrid is not Showing "Loading" Message on Column Sort
- JQGrid loses records on column sort
- JQGrid Client Side Sorting
- json from a server wont sort in jqgrid using "sorttype:'int'"