jQuery UI Widgets Forums Grid dynamically resize a window containing grid

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

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

  • ARC2014

    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?


    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">
        <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",
                        { name: 'firstname', type: 'string' },
                        { name: 'lastname', type: 'string' },
                        { name: 'productname', type: 'string' }                
                var dataAdapter = new $.jqx.dataAdapter(source);
                    height: 320, width: 500, maxWidth: 1000, draggable: false, resizable: false,
                    initContent: function () {
                            width: 485,
                            height: 280,
                            source: dataAdapter,
                            editable: true,
                            columns: [
                              { text: 'Name', datafield: 'firstname' },
                              { text: 'Last Name', datafield: 'lastname' },
                              { text: 'Product', datafield: 'productname' }                          
                    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 });   
    <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 style="overflow: hidden;" id="windowContent"></div>                    
                <input type="button" style="top: 5px;" id="button" value="Resize window" />       

    Best Regards,

    jQWidgets team

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

You must be logged in to reply to this topic.