Nesting of grids

ParamQuery Grid can be nested within another grid upto any number of levels. There is an icon in each row of detail column to expand / collapse the detail view of corresponding row. There is also an icon in the header cell to expand / collapse the detail view of all the rows.

Note that nesting of grids and row details use the same API.

Hide expand / collapse icons

It may be required to hide the expand icons if there is no nested grid or row detail or due to some other use case corresponding to that row. It's done by implementing detailModel.hasChild callback.

In this example, "Eastern Asia" sub continent doesn't have any children data so we implement detailModel.hasChild callback for sub continents as follow:

//conditionally hide expand icon for rows who have no children.
hasChild: function (rowData) {
    return (rowData.data || []).length > 0;
},
Continent & Countries
Continent
 
Africa
Asia
Sub Continent
 
Central Asia
Eastern Asia
Loading...
Loading...

154
 
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
                //we want this row in expanded state initially.
59
                pq_detail: {show: true},
60
                "data": [
61
                    {
62
                        "name": "Central Asia",
63
                        "data":[
64
                            { "name": "Kazakhstan", "literacy": 98.4},
65
                            { "name": "Kyrgyzstan", "literacy": 97 },
66
                            {"name": "Tajikistan", "literacy": 99.4},
67
                            { "name": "Turkmenistan", "literacy": 98},
68
                            { "name": "Uzbekistan", "literacy": 99.3}
69
                        ]
70
                    },
71
                    {
72
                        "name": "Eastern Asia",
73
                        "data":[]
74
                    }
75
                ]
76
            }
77
        ];
78
​
79
        //common options used in all grids.
80
        var options = {
81
            fillHandle: '',
82
            blur: function () {
83
                this.Selection().removeAll();
84
            },
85
            scrollModel: { autoFit: true },
86
            height: 'flex',
87
            numberCell: { show: false }
88
        };
89
        
90
        //initialize main grid
91
        $("#grid_md").pqGrid(Object.assign({}, options, {
92
            width: 500,
93
            //maxHeight: 500,
94
            freezeCols: 1,
95
            dataModel: { data: data },            
96
            colModel: [
97
                { title: "", minWidth: 30, maxWidth: 30, type: "detail", resizable: false, editable:false, sortable: false },
98
                { title: 'Continent', dataIndx: 'name'}
99
            ],            
100
            title: "<b>Continent & Countries</b>",
101
            resizable: true,            
102
            detailModel: {
103
                header: true,                
104
                init: function (ui) {                    
105
                    var rowData = ui.rowData,
106
                        model = subContinentModel( rowData.data ),
107
                        $grid = $("<div/>").pqGrid(model);
108
​
109
                    return $grid;
110
                }
111
            }
112
        }));
113
        
114
        function subContinentModel(data) {
115
            return Object.assign({}, options, {
116
                dataModel: { data: data },
117
                colModel: [
118
                    { title: "", minWidth: 32, maxWidth: 32, type: "detail", resizable: false, editable: false, sortable: false },
119
                    { title: 'Sub Continent', dataIndx: 'name' }
120
                ],                                
121
                freezeCols: 1,                
122
                showTop: false,
123
                detailModel: {
124
                    header: true,
125
​
126
                    //conditionally hide expand icon for rows who have no children.
127
                    hasChild: function (rowData) {
128
                        return (rowData.data || []).length > 0;
129
                    },
130
                    init: function (ui) {
131
                        var rowData = ui.rowData,
132
                            rdata = rowData.data,
133
                            model = (rdata[0] && rdata[0].data) ? subContinentModel(rdata) : countryModel(rdata),
134
                            $grid = $("<div/>").pqGrid(model);
135
​
136
                        return $grid;
137
                    }
138
                }
139
​
140
            });
141
        };
142
​
143
        function countryModel(data) {
144
            return Object.assign({}, options, {
145
                dataModel: { data: data },
146
                colModel: [                    
147
                    { title: 'Country', dataIndx: 'name'},
148
                    { dataIndx: 'literacy', dataType: 'float', title: 'Literacy' }
149
                ],
150
                showTop: false
151
            });
152
        };
153
    });
154
​
ParamQuery Pro Eval