ParamQuery Grid can be nested within another grid upto any number of levels.
Continent |
---|
Africa | |
Asia |
x1
2
3<div id="grid_md" style="margin:5px auto;"></div>
4
5
1421
2$(function () {
3//nested data.
4var 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({
79height: 'flex',
80width: 600,
81maxHeight: 500,
82dataModel: { data: data },
83scrollModel: {autoFit: true, flexContent: true},
84colModel: [
85{ title: "", minWidth: 27, maxWidth: 27, type: "detail", resizable: false, editable:false, sortable: false },
86{ title: 'Continent', dataIndx: 'name'}
87],
88numberCell: { show: false },
89title: "<b>Continent & Countries</b>",
90resizable: true,
91detailModel: {
92init: function (ui) {
93var rowData = ui.rowData,
94model = subContinentModel( rowData.data ),
95$grid = $("<div/>").pqGrid(model);
96
97return $grid;
98}
99}
100});
101
102var subContinentModel = function( data ){
103return {
104dataModel: { data: data },
105colModel: [
106{ title: "", minWidth: 27, maxWidth: 27, type: "detail", resizable: false, editable:false, sortable: false },
107{ title: 'Sub Continent', dataIndx: 'name'}
108],
109height: 'flex',
110numberCell: { show: false },
111scrollModel: {autoFit: true},
112showTop: false,
113detailModel: {
114init: function (ui) {
115var rowData = ui.rowData,
116rdata = rowData.data,
117model = (rdata[0] && rdata[0].data)? subContinentModel(rdata): countryModel( rdata ),
118$grid = $("<div/>").pqGrid(model);
119
120return $grid;
121}
122}
123
124};
125};
126
127var countryModel = function( data ){
128return {
129dataModel: { data: data },
130colModel: [
131{ title: 'Country', dataIndx: 'name'},
132{ dataIndx: 'literacy', dataType: 'float', title: 'Literacy' }
133],
134height: 'flex',
135maxHeight:300,
136numberCell: { show: false },
137scrollModel: {autoFit: true},
138showTop: false
139};
140};
141});
142