jQWidgets Forums

Tagged: grid, height, iframe, jqxgrid, resize

This topic contains 1 reply, has 2 voices, and was last updated by Nadezhda 10 years, 8 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

How to set iFrame height depending on pagesize Posts

September 12, 2014 at 7:41 am How to set iFrame height depending on pagesize #59457

Participant

Hi,

I am using jqxgrid for my application. However,I need to use jqxgrid within iframe as per our requirement.
I have to set height for iframe on change of pagesize (5,10,20). Now, iframe takes height depending upon initial pagesize at the time of pageload. However, this should also happen on click of pagesize option present in grid footer.
Can you please suggest any solution for the same?

Thanks,
Vardhman

September 12, 2014 at 11:49 am How to set iFrame height depending on pagesize #59463

Nadezhda

Participant

Hello Vardhman,

Here is an example which has two web pages – the first contains a grid and the second contains the iframe that points to the first page:

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.export.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.grouping.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>  
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> 
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <style>
        html, body {
            padding: 0; margin: 0;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "../demos/sampledata/products.xml";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ProductName', type: 'string' },
                    { name: 'QuantityPerUnit', type: 'int' },
                    { name: 'UnitPrice', type: 'float' },
                    { name: 'UnitsInStock', type: 'float' },
                    { name: 'Discontinued', type: 'bool' } 
                ],
                root: "Products",
                record: "Product",
                id: 'ProductID',
                url: url
            };
            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                if (value < 20) {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                }
                else {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                }
            }
            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,                
                enabletooltips: true,
                editable: true,
                selectionmode: 'singlecell', 
                columns: [
                  { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200 },
                  { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' }
                ],
                columngroups: [
                    { text: 'Product Details', align: 'center', name: 'ProductDetails' }
                ]
            });
            
            $('#jqxgrid').on('pagesizechanged', function (event) {               
                  var args = event.args;
                var pagenum = args.pagenum;
                var pagesize = args.pagesize; 
                var iframe = $(window.top.document).find("#myIFRame");
             
                if (pagesize == "5") {
                    iframe.height(225);
                }
                else if (pagesize == "10") {
                    iframe.height(350);
                }
                else iframe.height(600);

            });           
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' >
        <div id="jqxgrid">
        </div>
     </div>
    <div id="log"></div>
</body>
</html>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <iframe style="border: none; width: 870px; height: 350px;" src="gridResizeIframe.html" id="myIFRame"></iframe>
</body>
</html>

I hope it would be helpful.

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.