I am using your demo at
https://paramquery.com/pro/demos/group_rowsI added a local paging model there:
pageModel: { type: "local", rPP: 5, rPPOptions: [5, 10, 20, 100], strRpp: "{0}", strDisplay: "{0} to {1} of {2}" },
In local paging model, all the records are already available to the grid - only the display is showing 5 records per page. However my customers want to display the Grouped total e.g. for Argentina to be $598.58
The first page shows only the 5 records and the Group total shown is $306.64.
To my customer - this is not the total for Argentina. It should be paged but the totals should reflect the complete total for Argentina - $598.58
Also the grand total when paged is showing the total for that page ($306.64) but not the complete total - $64,942.69
So could there be a boolean flag in PageModel which allows the Group total and Grand total to show the actual Group total and Grand total when in local paging mode.
In the grid I have over a million records and it is too sluggish to show without paging but the customer wants to see actual Group totals and Grand total not the paged Group total and Grand total.
Is this possible?
To switch between the paging and no paging - I comment the PageMode or uncomment the PageModel
So that the whole code becomes:
$(function () {
function fillOptions(grid) {
var column = grid.getColumn({ dataIndx: 'ShipCountry' });
column.filter.options = grid.getData({ dataIndx: ['ShipCountry'] });
column.filter.cache = null;
grid.refreshHeader();
}
var colM = [
{ title: "ShipCountry", width: 120, dataIndx: "ShipCountry",
filter: {
type: 'select',
prepend: { '': 'All Countries' },
valueIndx: 'ShipCountry',
labelIndx: 'ShipCountry',
condition: 'equal',
listeners: ['change']
}
},
{ title: "Customer Name", width: 130, dataIndx: "ContactName" },
{ title: "Freight", width: 120, format: '$##,###.00',
summary: {
type: "sum"
},
dataType: "float", dataIndx: "Freight"
},
{ title: "Shipping Via", width: 130, dataIndx: "ShipVia" },
{ title: "Shipped Date", width: 100, dataIndx: "ShippedDate", dataType: "date" },
{ title: "Shipping Address", width: 220, dataIndx: "ShipAddress" },
{ title: "Shipping City", width: 130, dataIndx: "ShipCity" }
];
var dataModel = {
location: "remote",
dataType: "JSON",
method: "GET",
url: "/Content/orders.json"
//url: "/pro/orders/get",//for ASP.NET
//url: "orders.php",//for PHP
};
var groupModel = {
on: true,
summaryInTitleRow: 'all', //to display summary in the title row.
dataIndx: ['ShipCountry', 'ContactName'],
showSummary: [true], //to display summary at end of every group.
grandSummary: true,
title: [
"{0} ({1})",
"{0} - {1}"
]
};
var obj = {
height: 500,
toolbar: {
items: [{
type: 'button',
label: "Toggle grouping",
listener: function (evt) {
this.groupOption({
on: !grid.option('groupModel.on')
});
}
}]
},
dataModel: dataModel,
scrollModel: { autoFit: true },
colModel: colM,
pageModel: { type: "local", rPP: 5, rPPOptions: [5, 10, 20, 100], strRpp: "{0}", strDisplay: "{0} to {1} of {2}" },
numberCell: { show: false },
filterModel: { on: true, header: true, type: "local" },
selectionModel: { type: 'cell' },
groupModel: groupModel,
load: function (evt, ui) {
//options for ShipCountry filter.
fillOptions(grid);
},
showTitle: false,
resizable: true,
virtualX: true,
virtualY: true,
hwrap: false,
wrap: false
};
var grid = pq.grid("#grid_group_rows", obj);
});