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

152
 
1
​
2
​
3
    $(function () {
4
        //columns in data array : Sr No, Company Name, Revenues(domestic), Revenues(export), expenditure
5
        var data = [[1, 'Exxon Mobil', 'Ex', 339938.0, 36130.0, 23333.0],
6
            [2, 'Wal-Mart Stores', 'WS', 315654.0, 11231.0, 24342.0],
7
            [3, 'Royal Dutch Shell', 'RDS', 306731.0, 25311.0, 56231.2],
8
            [4, 'BP', 'B', 267600.0, 22341.0, 71923.4],
9
            [5, 'General Motors', 'GM', 192604.0, -10567.0, 52934.0],
10
            [6, 'Chevron', 'C', 189481.0, 14099.0, 12023.5],
11
            [7, 'DaimlerChrysler', 'DC', 186106.3, 3536.3, 42734.0],
12
            [8, 'Toyota Motor', 'TM', 185805.0, 12119.6, 57023.4],
13
            [9, 'Ford Motor', 'FM', 177210.0, 2024.0, 22896.0],
14
            [10, 'ConocoPhillips', 'CP', 166683.0, 13529.0, 72456.0],
15
            [11, 'General Electric', 'GE', 157153.0, 16353.0, 16912.5],
16
            [12, 'Total', 'T', '152360.7', 15250.0, 74236.5],
17
            [13, 'ING Group', 'IG', 138235.3, 8958.9, 52012.9],
18
            [14, 'Citigroup', 'CG', 131045.0, 24589.0, 90342.0],
19
            [15, 'AXA', 'A', 129839.2, 5186.5, 13043.8],
20
            [16, 'Allianz', 'AZ', 121406.0, 5442.4, 19529.5],
21
            [17, 'Volkswagen', 'VW', 118376.6, 1391.7, 84472.7],
22
            [18, 'Fortis', 'F', 112351.4, 4896.3, 83473.0],
23
            [19, 'Crédit Agricole', 'CA', 110764.6, 7434.3, 14567.4],
24
            [20, 'American Intl. Group', 'AIG', 108905.0, 10477.0, 10533.0]];
25
​
26
        for (var i = 0; i < data.length; i++) {
27
            var rdata = data[i];
28
            //fill rest of the columns with random data.
29
            rdata[8] = Math.random();
30
            rdata[9] = Math.random();
31
            rdata[10] = Math.random();
32
            rdata[11] = Math.random();
33
            rdata[12] = Math.random();
34
            rdata[13] = Math.random();
35
            rdata[14] = Math.random();
36
            rdata[15] = Math.random();
37
            rdata[16] = Math.random();
38
        }
39
​
40
        var obj = { 
41
            height: 450,            
42
            showTitle: false,
43
            freezeCols: 1,                        
44
            resizable: true,
45
            toolbar: {
46
                items: [{
47
                    type: 'checkbox',
48
                    label: 'zip',
49
                    attr: 'id="export_zip"'
50
                },
51
                {
52
                    type: 'textbox',
53
                    label: 'Filename: ',                
54
                    attr: 'id="export_filename" placeholder="Enter filename"'                 
55
                },
56
                {
57
                    type: 'select',
58
                    label: 'Format: ',                
59
                    attr: 'id="export_format"',
60
                    options: [{ xlsx: 'Excel', csv: 'Csv', htm: 'Html', json: 'Json'}]
61
                },
62
                {
63
                    type: 'button',
64
                    label: "Export",
65
                    icon: 'ui-icon-arrowthickstop-1-s',
66
                    listener: function () {
67
                        this.exportData({
68
                            url: "/pro/demos/exportData",
69
                            format: $("#export_format").val(),
70
                            zip: $("#export_zip").prop("checked"),
71
                            filename: $("#export_filename").val(),
72
                            render: true
73
                        });
74
                    }
75
                }]
76
            }
77
        };
78
        obj.columnTemplate = { width: 100, align: 'right' };
79
        obj.colModel = [
80
            { title: "Some No", colModel: [] },
81
            { title: "Company", width: 140, align: "center", colModel: [{ title: "Company A" }, { title: "Company B"}] },
82
            { title: "Balance Sheet", align: "center", colModel: [
83
                { title: "Revenues ($ millions)", dataType: "float", align: "center", colModel: [
84
                    {
85
                        title: "Domestic",
86
                        dataIndx: 3,
87
                        format: '$##,###.00',
88
                        dataType: "float"
89
                    },
90
                    {
91
                        title: "Exports",
92
                        dataIndx: 4,
93
                        format: '$##,###.00',
94
                        dataType: "float"
95
                    },
96
                    {
97
                        title: "Total",
98
                        width: 120,
99
                        editable: false,
100
                        dataIndx: 6,
101
                        dataType: "float",
102
                        format: '$##,###.00',
103
                        formula: function (ui) {                           
104
                            var rd = ui.rowData;
105
                            return rd[3] + rd[4];
106
                        }
107
                    }
108
                ]},
109
                {
110
                    title: "Expenditure ($ millions)",
111
                    dataType: "float",
112
                    format: '$##,###.00',
113
                    dataIndx: 5
114
                },
115
                {
116
                    title: "Profits = Revenues - Expenditure",
117
                    width: 140,
118
                    dataType: "float",
119
                    editable: false,
120
                    dataIndx: 7,
121
                    format: '$##,###.00',
122
                    formula: function (ui) {                        
123
                        var rd = ui.rowData;
124
                        return rd[6] - rd[5];
125
                    }
126
                }
127
            ]},        
128
            { title: "Rank", align: 'center', colModel: [
129
                { title: "Rank1" }, 
130
                { title: "Rank2", colModel: [
131
                    { title: "Rank21" },
132
                    { title: "Rank 22", colModel: [
133
                        { title: "Rank 221" },
134
                        { title: "Rank 222", colModel: [
135
                            { title: "Rank 2221" },
136
                            { title: "Rank 2222" },
137
                            { title: "Rank 2223" }
138
                        ]}
139
                    ]}                    
140
                ]},
141
                { title: "Rank 3" }
142
            ]},
143
            {
144
                title: "Column", colModel: [{ title: "Column1" }, { title: "Column2"}]
145
            }
146
        ];
147
​
148
        obj.dataModel = { data: data };
149
​
150
        var $grid = $("#grid_group").pqGrid(obj);
151
    });
152
​