jQWidgets Forums

Tagged: dynamically resize, grid, initContent, jqxgrid, jqxwindow, window

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

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

Author

dynamically resize a window containing grid Posts

October 14, 2014 at 8:41 pm dynamically resize a window containing grid #61123

ARC2014

Participant

I am editing a grid via pop-up by a grid inside an jqxWindow. I need to dynamically resize the window to the size of the grid. When adding rows I use this:
var gridheight = $ctrl.height() + 36; //grid height – 36 is for the status bar
$(‘#editorWindow’).jqxWindow({ height: gridheight });

This issue is people can cancel, save or edit the popup and it can be opened and reopened or other columns using the same code can popup up the editor window and it keeps the size from the previous. What is the best way to dynamically size the window based on the size of the grid that the window contains?

October 15, 2014 at 11:54 am dynamically resize a window containing grid #61170

Nadezhda

Participant

Hello ARC2014,

Please, find below an example which shows how to change dynamically size of the jqxWindow (jqxGrid is initialized in jqxWindow).

<!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.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.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="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = new Array();
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi"
            ];
            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase"
            ];
            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte"
            ];
           
            for (var i = 0; i < 9; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                datatype: "array",
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' }                
                ]
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            $('#window').jqxWindow({
                height: 320, width: 500, maxWidth: 1000, draggable: false, resizable: false,
                initContent: function () {
                    $('#windowContent').jqxGrid({
                        width: 485,
                        height: 280,
                        source: dataAdapter,
                        editable: true,
                        columns: [
                          { text: 'Name', datafield: 'firstname' },
                          { text: 'Last Name', datafield: 'lastname' },
                          { text: 'Product', datafield: 'productname' }                          
                        ]
                    });
                }
            });

            $("#button").jqxButton({                
                width: 100,
                height: 25
            });

            $('#button').click(function () {
                $("#windowContent").jqxGrid({ width: 660, height: 280 });
                var width = $("#windowContent").jqxGrid('width');              
                var height = $("#windowContent").jqxGrid('height');
                $('#window').jqxWindow({ width: width+18, height: height+35 });   
            });
            
        });
    </script>
</head>
<body class='default'>
    <div id="jqxWidget">
        <div style="width: 100%; height: 650px; margin-top: 50px;" id="mainDemoContainer">
            <div id="window">
                <div id="windowHeader">
                    <span>Window contains Grid</span>
                </div>
                <div>
                <div style="overflow: hidden;" id="windowContent"></div>                    
                </div>                          
            </div> 
            <input type="button" style="top: 5px;" id="button" value="Resize window" />       
        </div>  
    </div>
</body>
</html>

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.