Author Topic: Issue with nested grids  (Read 1811 times)

kshipra

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 94
    • View Profile
Issue with nested grids
« 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>

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5785
    • View Profile
Re: Issue with nested grids
« Reply #1 on: March 13, 2019, 10:30:22 pm »
[ Only Pro members may read this post. ]