​x
 
1
​
2
    <div id="grid_summary" style="margin:auto;"></div>
3
​

86
 
1
​
2
    $(function () {        
3
        var arrayData = [
4
            [1, 'Exxon Mobil', 339938.0, 36130.0],
5
            [2, 'Wal-Mart Stores', 315654.0, 11231.0],
6
            [3, 'Royal Dutch Shell', 306731.0, 25311.0],
7
            [4, 'BP', 267600.0, 22341.0],
8
            [5, 'General Motors', 192604.0, -10567.0],
9
            [6, 'Chevron', 189481.0, 14099.0],
10
            [7, 'DaimlerChrysler', 186106.3, 3536.3],
11
            [8, 'Toyota Motor', 185805.0, 12119.6],
12
            [9, 'Ford Motor', 177210.0, 2024.0],
13
            [10, 'ConocoPhillips', 166683.0, 13529.0],
14
            [11, 'General Electric', 157153.0, 16353.0],
15
            [12, 'Total', 152360.7, 15250.0],
16
            [13, 'ING Group', 138235.3, 8958.9],
17
            [14, 'Citigroup', 131045.0, 24589.0],
18
            [15, 'AXA', 129839.2, 5186.5],
19
            [16, 'Allianz', 121406.0, 5442.4],
20
            [17, 'Volkswagen', 118376.6, 1391.7],
21
            [18, 'Fortis', 112351.4, 4896.3],
22
            [19, 'Crédit Agricole', 110764.6, 7434.3],
23
            [20, 'American Intl. Group', 108905.0, 10477.0]
24
        ];
25
        //calculate sum of 3rd and 4th column.
26
        function calculateSummary() {
27
            var revenueTotal = 0,
28
                profitTotal = 0,
29
                data = grid? grid.option('dataModel.data'): arrayData; 
30
​
31
            for (var i = 0; i < data.length; i++) {
32
                var row = data[i];
33
                revenueTotal += (row[2] * 1);
34
                profitTotal += (row[3] * 1);
35
            }
36
​
37
            var revenueAverage = (revenueTotal / data.length),
38
                profitAverage = (profitTotal / data.length),
39
                totalData = ["<b>Total: </b>", "", revenueTotal, profitTotal],
40
                averageData = ["<b>Average: </b>", "", revenueAverage, profitAverage];
41
​
42
            return [totalData, averageData]; //2 dimensional array.
43
        }
44
        var obj = {
45
            width: 'flex',
46
            flex: { one: true },
47
            height: 400,
48
            numberCell: { show: false },
49
            title: "Summary of rows",
50
            filterModel: { on: true, header: true },
51
            colModel: [
52
                { title: "Rank", dataType: "integer" },
53
                { title: "Company",
54
                    filter: { type: 'textbox', condition: 'contain', listeners: ['keyup'] }
55
                },
56
                { title: "Revenues", dataType: "float", format: '$##,###.00',
57
                    validations: [{ type: 'nonEmpty', msg: 'Required'}]
58
                },
59
                { title: "Profits", dataType: "float", format: '$##,###.00',
60
                    validations: [{ type: 'nonEmpty'}]
61
                },
62
                {//formula field.
63
                    title: "Expenditure = Revenues - Profits",
64
                    dataType: "float", 
65
                    format: '$##,###.00',
66
                    editable: false,
67
                    formula: function (ui) {
68
                        var rd = ui.rowData;
69
                        return rd[2] - rd[3];
70
                    }
71
                }
72
            ],
73
            dataModel: { data: arrayData },
74
            summaryData: calculateSummary(),
75
            cellSave: function () {
76
                this.refresh();
77
            }
78
        };
79
        var grid = pq.grid("#grid_summary", obj);
80
​
81
        //refresh summary upon change in data and filtering.
82
        grid.on('change filter', function () {
83
            this.option('summaryData', calculateSummary());
84
        });
85
    });
86
​