Checkbox selection with sum

[lsl]

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?

[paramvir]

you could calculate the sum in selectChange event.

http://paramquery.com/pro/api#event-selectChange

[lsl]

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

[lsl]

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?

[paramvir]

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/