ParamQuery grid support forum
General Category => Help for ParamQuery Pro => Topic started by: lsl on September 19, 2014, 07:10:59 am
-
There is a grid having fields Invoice# and Invoice Amount. I want to add the "Checkbox selection" in the grid and add a textbox outside the grid for summing the total.
If user click some invoices, the textbox is showing the total for the clicked invoices.
How can I do that?
-
you could calculate the sum in selectChange event.
http://paramquery.com/pro/api#event-selectChange
-
I has just tried to use the demo,
<script>
$(function () {
//state of the checkbox and row selection is being saved in state field.
var data = [
{rank:1, company:'Exxon Mobil',revenues: '339,938.0',profits: '36,130.0', state: true},
{rank:2, company:'Wal-Mart Stores',revenues: '315,654.0', profits:'11,231.0', state: false},
{rank:3, company:'Royal Dutch Shell', revenues:'306,731.0', profits:'25,311.0', state: false},
{rank:4, company:'BP', revenues:'267,600.0',profits: '22,341.0', state: false},
{rank:5, company: 'General Motors',revenues: '192,604.0', profits:'-10,567.0', state: true},
{rank:6, company: 'Chevron', revenues:'189,481.0', profits:'14,099.0', state: false},
{rank:7, company: 'DaimlerChrysler',revenues: '186,106.3',profits: '3,536.3', state: false},
{rank:8, company: 'Toyota Motor', revenues:'185,805.0',profits: '12,119.6', state: false},
{rank:9, company: 'Ford Motor', revenues:'177,210.0',profits: '2,024.0', state: false},
{rank:10, company: 'ConocoPhillips', revenues:'166,683.0', profits:'13,529.0', state: true},
{rank:11, company: 'General Electric',revenues: '157,153.0', profits:'16,353.0', state: false},
{rank:12, company: 'Total', revenues:'152,360.7', profits:'15,250.0', state: false},
{rank:13, company: 'ING Group', revenues:'138,235.3', profits:'8,958.9', state: false},
{rank:14, company: 'Citigroup', revenues:'131,045.0', profits:'24,589.0', state: false},
{rank:15, company: 'AXA', revenues:'129,839.2', profits:'5,186.5', state: false},
{rank:16, company: 'Allianz',revenues: '121,406.0', profits:'5,442.4', state: false},
{rank:17, company: 'Volkswagen', revenues:'118,376.6',profits: '1,391.7', state: true},
{rank:18, company: 'Fortis', revenues:'112,351.4', profits:'4,896.3', state: false},
{rank:19, company: 'Crédit Agricole', revenues:'110,764.6', profits:'7,434.3', state: false},
{rank:20, company: 'American Intl. Group', revenues:'108,905.0',profits: '10,477.0', state: false}
];
var obj = {
width:700,
height:200,
editable: false,
title:"Checkbox selections",
selectionModel: { type: 'none', subtype:'incr', cbHeader:true, cbAll:true},
flexHeight:true,
flexWidth: true,
pageModel: {type:"local", rPP:10 },
colModel:
[
{ title: "Rank", width: 100, dataType: "integer",dataIndx:"rank"},
{ title: "Company", width: 220, dataType: "string", dataIndx:"company"},
{ title: "Revenues ($ millions)", width: 180, dataType: "float", align: "right", dataIndx:"revenues" },
{ title: "Profits ($ millions)", width: 170, dataType: "float", align: "right", dataIndx:"profits" },
{ title: "", dataIndx: "state", width: 30, minWidth:30, align: "center", type:'checkBoxSelection', cls: 'ui-state-default', resizable: false, sortable:false }
],
dataModel: {
data: data,
location: "local",
sorting: "local",
sortIndx: "profits",
sortDir: "down"
}
};
var $grid = $("#grid_selection_checkbox").pqGrid(obj);
$grid.pqGrid({
selectChange : function (event,ui)
{alert('x');}
});
});
</script>
It did not work, please advice
-
I use the rowSelect and rowUnSelect, it works fine.
obj.rowSelect= function (evt, ui) {
xtot=xtot+ui.rowData["net"];
$("#xselect")[0].value=xtot;
};
obj.rowUnSelect= function (evt, ui) {
xtot=xtot-ui.rowData["net"];
$("#xselect")[0].value=xtot;
};
However, if I click the top "select all", it does not be triggered.
Is there any solution about that?
-
Please note selectChange event is introduced in version 2.2.0
selectChange works even when the header checkbox is checked/ unchecked.
http://jsfiddle.net/paramquery/9hzbsoe3/