ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: kshipra on March 13, 2019, 10:02:09 pm

Title: Issue with nested grids
Post by: kshipra on March 13, 2019, 10:02:09 pm
I have report with hierarchical nested grids.
I have set the nested grid height to 'flex' and scrollModel to autofit.  Sub grid is not expanding to its full length.

Same code was working in v3.3 but with new upgrade now it is not working. I am using pqgrid 5.6.1.

Code: [Select]
<html>

<head>

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>   
<link href="pqgrid.min.css" rel="stylesheet"/>
   
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

    <script src="pqgrid.min.js"></script>
</head>


<script>
    var platforms;
    var $grid;
    $(document)
        .ready(function() {

            $grid = $("#eventcodes_grid");                 
                       


            var nestedData = [{ "Code": "0x08", "Count": 7, "data": [{ "Mask": "0x01", "Count": 6, "data": [{ "Name": "ABC.XYZ", "Place": "XXX" }, { "Name": "ABC.XYZ", "Place": "YYY" }, { "Name": "ABC.XYZ", "Place": "ZZZ" }, { "Name": "ABC.XYZ", "Place": "MMM" }, { "Name": "ABC.XYZ", "Place": "NNN" }, { "Name": "ABC.XYZ", "Place": "DDD" }] }, { "Mask": "0x81", "Count": 1, "data": [{ "Name": "ABC.XYZ", "Place": "RRR" }] }] }];
       


            var subContinentModel = function(data) {
                return {
                    dataModel: { data: data },
                    colModel: [
                        {
                            title: "",
                            minWidth: 27,
                            maxWidth: 27,
                            type: "detail",
                            resizable: false,
                            editable: false,
                            sortable: false
                        },
                        { title: 'Mask', dataIndx: 'Mask' },
                        { title: 'Count', dataIndx: 'Count' }
                    ],
                    height: 'flex',
                    numberCell: { show: true },
                    scrollModel: { autoFit: true },
                    showTop: false,
                    detailModel: {
                        init: function(ui) {
                            var rowData = ui.rowData,
                                rdata = rowData.data,
                                model = (rdata[0] && rdata[0].data) ? subContinentModel(rdata) : countryModel(rdata),
                                $grid = $("<div></div>").pqGrid(model);

                            return $grid;
                        }
                    }

                };
            };

            var countryModel = function(data) {
                return {
                    dataModel: { data: data },
                    colModel: [
                        { title: 'Name', dataIndx: 'Name' },
                        { dataIndx: 'Place', title: 'Place' }
                    ],
                    height: 'flex',
                    maxHeight: 300,
                    numberCell: { show: true },
                    scrollModel: { autoFit: true },
                    showTop: false
                };
            };

            $("#eventcodes_grid")
                .pqGrid({
                    height: 'flex',
                    width: 600,                   
                    dataModel: { data: nestedData },
                    scrollModel: { autoFit: true, flexContent: true },
                    colModel: [
                        {
                            title: "",
                            minWidth: 27,
                            maxWidth: 27,
                            type: "detail",
                            resizable: false,
                            editable: false,
                            sortable: false
                        },
                        { title: 'Code', dataIndx: 'Code' },
                        { title: 'Count', dataIndx: 'Count' }
                    ],
                    numberCell: { show: false },
                    title: "<b>Continent & Countries</b>",
                    resizable: true,
                    detailModel: {
                        init: function(ui) {
                            var rowData = ui.rowData,
                                model = subContinentModel(rowData.data),
                                $grid = $("<div></div>").pqGrid(model);

                            return $grid;
                        }
                    }
                });


           
        });
</script>

<body>
   
    <div class="panel panel-default">
        <div class="panel-heading">

            <div class="row">
               
               
            </div>
        </div>
        <div class="panel-body" style="height: 100%">
            <div id="eventcodes_grid" style="font-family: Intel Clear;"></div>
        </div>
    </div>
</body>
</html>
Title: Re: Issue with nested grids
Post by: paramvir on March 13, 2019, 10:30:22 pm
It's mentioned in upgrade guide of v5 to include javascript-detect-element-resize/jquery.resize.js.

https://paramquery.com/pro/upgrade/Index50#option-detail