ParamQuery Grid can be nested within another grid upto any number of levels.

Continent & Countries
Continent
 
Africa
Asia
Loading...

142
 
1
2
    $(function () {
3
        //nested data.
4
        var data = [
5
            {
6
                "name": "Africa",
7
                "data": [
8
                    {
9
                        "name": "Northern Africa",
10
                        "data":[
11
                            { "name": "Algeria", "literacy": 70},
12
                            { "name": "Egypt", "literacy": 57.7 },
13
                            { "name": "Libya", "literacy": 82.6},
14
                            { "name": "Morocco", "literacy": 51.7},
15
                            { "name": "Tunisia", "literacy": 74.2},
16
                            { "name": "Western Sahara"}
17
                        ]
18
                    },
19
                    {
20
                        "name": "Sub-Saharan Africa",
21
                        "data":[
22
                            {
23
                                "name": "Eastern Africa",
24
                                "data":[
25
                                    { "name": "Burundi", "literacy": 51.6},
26
                                    { "name": "Comoros", "literacy": 56.5 },
27
                                    {"name": "Djibouti", "literacy": 67.9},
28
                                    { "name": "Eritrea", "literacy": 58.6},
29
                                    { "name": "Ethiopia", "literacy": 42.7}
30
                                ]
31
                            },
32
                            {
33
                                "name": "Middle Africa",
34
                                "data":[
35
                                    { "name": "Angola", "literacy": 72.3},
36
                                    { "name": "Cameroon", "literacy": 56.9 },
37
                                    {"name": "Central African Republic", "literacy": 64},
38
                                    { "name": "Chad", "literacy": 76},
39
                                    { "name": "Congo", "literacy": 56}
40
                                ]
41
                            },
42
                            {
43
                                "name": "Southern Africa",
44
                                "data":[
45
                                    { "name": "Botswana", "literacy": 77},
46
                                    { "name": "Lesotho", "literacy": 65 },
47
                                    {"name": "Namibia", "literacy": 84},
48
                                    { "name": "South Africa", "literacy": 86.4},
49
                                    { "name": "Swaziland", "literacy": 81.6}
50
                                ]
51
                            }
52
                        ]
53
                    }
54
                ]
55
            },
56
            {
57
                "name": "Asia",
58
                "data": [
59
                    {
60
                        "name": "Central Asia",
61
                        "data":[
62
                            { "name": "Kazakhstan", "literacy": 98.4},
63
                            { "name": "Kyrgyzstan", "literacy": 97 },
64
                            {"name": "Tajikistan", "literacy": 99.4},
65
                            { "name": "Turkmenistan", "literacy": 98},
66
                            { "name": "Uzbekistan", "literacy": 99.3}
67
                        ]
68
                    },
69
                    {
70
                        "name": "Eastern Asia",
71
                        "data":[]
72
                    }
73
                ]
74
            }
75
        ];
76
77
        //initialize main grid
78
        $("#grid_md").pqGrid({             
79
            height: 'flex', 
80
            width: 600,
81
            maxHeight: 500,
82
            dataModel: { data: data },            
83
            scrollModel: {autoFit: true, flexContent: true},
84
            colModel: [
85
                { title: "", minWidth: 27, maxWidth: 27, type: "detail", resizable: false, editable:false, sortable: false },
86
                { title: 'Continent', dataIndx: 'name'}
87
            ],
88
            numberCell: { show: false },
89
            title: "<b>Continent & Countries</b>",
90
            resizable: true,            
91
            detailModel: {
92
                init: function (ui) {                    
93
                    var rowData = ui.rowData,
94
                        model = subContinentModel( rowData.data ),
95
                        $grid = $("<div/>").pqGrid(model);
96
97
                    return $grid;
98
                }
99
            }
100
        });
101
        
102
        var subContinentModel = function( data ){
103
            return {
104
                dataModel: { data: data },
105
                colModel: [
106
                    { title: "", minWidth: 27, maxWidth: 27, type: "detail", resizable: false, editable:false, sortable: false },
107
                    { title: 'Sub Continent', dataIndx: 'name'}
108
                ],
109
                height: 'flex',                
110
                numberCell: { show: false },
111
                scrollModel: {autoFit: true},
112
                showTop: false,
113
                detailModel: {                    
114
                    init: function (ui) {                        
115
                        var rowData = ui.rowData,
116
                            rdata = rowData.data,
117
                            model = (rdata[0] && rdata[0].data)? subContinentModel(rdata): countryModel( rdata ),
118
                            $grid = $("<div/>").pqGrid(model);
119
120
                        return $grid;
121
                    }
122
                }
123
124
            };
125
        };
126
127
        var countryModel = function( data ){
128
            return {
129
                dataModel: { data: data },
130
                colModel: [                    
131
                    { title: 'Country', dataIndx: 'name'},
132
                    { dataIndx: 'literacy', dataType: 'float', title: 'Literacy' }
133
                ],
134
                height: 'flex',
135
                maxHeight:300,
136
                numberCell: { show: false },
137
                scrollModel: {autoFit: true},
138
                showTop: false
139
            };
140
        };
141
    });
142