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

108
 
1
​
2
    $(function () {
3
        //define colModel
4
        var colM = [
5
            { title: "ShipCountry", width: 100, dataIndx: "ShipCountry",
6
                filter: { type: 'textbox', condition: 'begin', listeners: ['keyup'] }
7
            },
8
            { title: "Customer Name", width: 120, dataIndx: "ContactName",
9
                filter: { type: "textbox", condition: 'begin', listeners: ['keyup'] }
10
            },
11
            { title: "Order ID", minWidth: 130, dataIndx: "OrderID", dataType: "integer",
12
                filter: { type: 'textbox', condition: "between", listeners: ['keyup'] }
13
            },
14
            { title: "Order Date", minWidth: "190", dataIndx: "OrderDate", dataType: "date" },
15
            { title: "Shipping Region", width: 140, dataIndx: "ShipRegion",
16
                filter: { type: 'select',
17
                    condition: 'equal',
18
                    valueIndx: "ShipRegion",
19
                    labelIndx: "ShipRegion",
20
                    groupIndx: "ShipCountry",
21
                    prepend: { '': '' },
22
                    listeners: ['change']
23
                }
24
            },
25
            { title: "Paid", width: 100, dataIndx: "paid", dataType: "bool", align: "center",
26
                filter: { type: "checkbox", subtype: 'triple', condition: "equal", listeners: ['click'] }
27
            },
28
            { title: "Shipping Via", width: 130, dataIndx: "ShipVia",
29
                filter: { type: "select",
30
                    condition: 'equal',
31
                    prepend: { '': '--Select--' },
32
                    valueIndx: "ShipVia",
33
                    labelIndx: "ShipVia",
34
                    listeners: ['change']
35
                }
36
            },
37
            { title: "Required Date", width: 100, dataIndx: "RequiredDate", dataType: "date" },
38
            { title: "Shipped Date", width: 100, dataIndx: "ShippedDate", dataType: "date" },
39
            { title: "Freight", width: 120, align: "right", dataIndx: "Freight", dataType: "float" },
40
            { title: "Shipping Name", width: 150, dataIndx: "ShipName" },
41
            { title: "Shipping Address", width: 270, dataIndx: "ShipAddress" },
42
            { title: "Shipping City", width: 100, dataIndx: "ShipCity" },
43
            { title: "Shipping Postal Code", width: 150, dataIndx: "ShipPostalCode" }
44
        ];
45
​
46
        var loadStateSuccess;
47
        //define ctr object
48
        var obj = {
49
            height: 500,
50
            //flex: { one: true },
51
            colModel: colM,
52
            groupModel: {on: true},
53
            virtualX: true, virtualY: true,
54
            pageModel: { type: "local", rPP: 50, rPPOptions: [10, 50, 100, 500, 1000] },
55
            filterModel: { on: true, mode: "AND", header: true },
56
            title: "Shipping Orders",
57
            toolbar: {
58
                items: [{
59
                    type: 'button',
60
                    label: 'Save State',
61
                    listener: function () {
62
                        this.saveState();
63
                    }
64
                },
65
                {
66
                    type: 'button',
67
                    label: 'Restore State',
68
                    listener: function () {
69
                        //debugger;
70
                        this.loadState();
71
                    }
72
                }]
73
            },
74
            resizable: true,
75
            numberCell: { show: true },
76
            columnBorders: true,
77
            freezeCols: 2,
78
            create: function () {
79
                //restore state of grid.                                
80
                loadStateSuccess = this.loadState({ refresh: false });
81
            },
82
            load: function () {
83
                var column = grid.getColumn({ dataIndx: "ShipRegion" });
84
                var filter = column.filter;
85
                filter.cache = null;
86
                filter.options = grid.getData({ dataIndx: ["ShipCountry", "ShipRegion"] });
87
​
88
                column = grid.getColumn({ dataIndx: "ShipVia" });
89
                filter = column.filter;
90
                filter.cache = null;
91
                filter.options = grid.getData({ dataIndx: ["ShipVia"] });
92
            },
93
            dataModel: {
94
                location: 'remote',
95
                url: '/Content/orders.json'
96
            }
97
        };
98
​
99
        var grid = pq.grid("#grid_state_3_3", obj);
100
​
101
        $(window).on('unload', function () {
102
            grid.saveState();
103
        });
104
        grid.on("destroy", function () {
105
            this.saveState();
106
        })
107
    });
108
​