jQWidgets Forums

Tagged: auto size, grid, jqxgrid, jqxwindow, window

This topic contains 6 replies, has 2 voices, and was last updated by Nadezhda 10 years, 4 months ago.

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

Author

Jqxgrid inside jqxwindow Posts

November 26, 2014 at 3:37 am Jqxgrid inside jqxwindow #63322

Participant

Hi,

I created jqxgrid(serverside filtering and sorting) on jqxwindow:
1. When width and height of jqxwindow are set to auto: the jqxwindow is very tiny, the grid is not show all datas.
2. When width and height of jqxwindow are fixed width and height, the jqxgrid change Pagesize will be hidden the expand area.

Is there any way to jqxwindow auto width and height to fit the inside content?

November 26, 2014 at 9:56 am Jqxgrid inside jqxwindow #63371

Nadezhda

Participant

Hello Rong Nguyen,

You can use ‘minHeight’ and ‘minWidth’ properties to set minimum size of jqxWindow in such a way that the entire jqxGrid content will be vissible.

Best Regards,
Nadezhda

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

November 26, 2014 at 10:32 am Jqxgrid inside jqxwindow #63373

Rong Nguyen

Participant

Hi Nadezhda,

if those properties are used, when the grid have some rows, the jqxwindow will have a lot of white space…

November 26, 2014 at 11:53 am Jqxgrid inside jqxwindow #63381

Nadezhda

Participant

Hi Rong Nguyen,

Here is an example which shows how to set ‘minHeight’ and ‘minWidth’ and the window’s content will be visible without a lot of white space. If it does not help you to resolve your issue, please, provide us with a sample code which illustrates this issue.

<!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/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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqxgrid/generatedata.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/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var source = {
                localdata: generatedata(600),
                datafields: [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' }
                ],
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            //Initializing the demo
            $("#jqxwindow").jqxWindow({
                width: "auto",
                height: "auto",
                minWidth: 750,
                minHeight: 560,
                initContent: function () {
                    $("#jqxgrid").jqxGrid(
                    {
                        width: 750,
                        height: 560,
                        source: dataAdapter,
                        pageable: true,
                        pagesize: 20,
                        columns: [
                           { text: 'First Name', dataField: 'firstname', width: 250 },
                           { text: 'Last Name', dataField: 'lastname', width: 250 },
                           { text: 'Product', dataField: 'productname', width: 250 }
                        ]
                    });
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div style="width: 100%; height: 650px; margin-top: 50px;" id="mainDemoContainer">
        <div id="jqxwindow">
            <div id="windowHeader">
                <span>jqxGrid in jqxWindow</span>
            </div>
            <div style="overflow: hidden;">
                <div id="jqxgrid"></div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

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

November 27, 2014 at 9:36 am Jqxgrid inside jqxwindow #63440

Rong Nguyen

Participant

Hi Nadezhda,

Please put “pagesizeoptions: [’10’, ’20’, ’30’]” to the grid and try to change the page size.

Thank for your effort!

November 27, 2014 at 11:20 am Jqxgrid inside jqxwindow #63454

Nadezhda

Participant

Hi Rong Nguyen,

Please, try the following example which shows how to set the size of jqxGrid which is placed 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/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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqxgrid/generatedata.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/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var source = {
                localdata: generatedata(600),
                datafields: [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' }
                ],
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            //Initializing the demo
            $("#jqxwindow").jqxWindow({
                width: "auto",
                height: "auto",         
                initContent: function () {
                    $("#jqxgrid").jqxGrid(
                    {
                        width: 750,
                        height: 560,
                        source: dataAdapter,
                        pageable: true,
                        pagesizeoptions: ['10', '20', '30'],
                        pagesize: 20,
                        columns: [
                           { text: 'First Name', dataField: 'firstname' },
                           { text: 'Last Name', dataField: 'lastname' },
                           { text: 'Product', dataField: 'productname' }
                        ]
                    });
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div style="width: 100%; height: 650px; margin-top: 50px;" id="mainDemoContainer">
        <div id="jqxwindow">
            <div id="windowHeader">
                <span>jqxGrid in jqxWindow</span>
            </div>
            <div style="overflow: hidden;">
                <div id="jqxgrid" style="width:750px; height:560px;"></div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

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

November 28, 2014 at 6:46 am Jqxgrid inside jqxwindow #63500

Nadezhda

Participant

Hi Rong Nguyen,

Here is an example which shows how to dynamically set the height of jqxWindow depending on height of jqxGrid.

<!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/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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../jqxgrid/generatedata.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/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <style>
        .jqx-window-content, .jqx-widget-content {
            padding: 0px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var source = {
                localdata: generatedata(1000),
                datafields: [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' }
                ],
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            //Initializing the demo
            $("#jqxwindow").jqxWindow({
                width: 755,
                height: 335,
                initContent: function () {
                    $("#jqxgrid").jqxGrid(
                    {
                        width: 750,                      
                        autoheight: true,
                        source: dataAdapter,
                        pageable: true,
                        pagesizeoptions: ['10', '20', '30'],
                        columns: [
                           { text: 'First Name', dataField: 'firstname' },
                           { text: 'Last Name', dataField: 'lastname' },
                           { text: 'Product', dataField: 'productname' }
                        ]
                    });
                }
            });

            $('#jqxgrid').on('pagesizechanged', function (event) {
                setTimeout(function () {
                    var windowTitleHeight = $(".jqx-grid-header").outerHeight();
                    // windowTitleHeight = windowTitleHeight*2;
                    if (event.args.pagesize == 10) {
                        var firstGridHeight = $("#jqxgrid").height();
                        var firstResult = windowTitleHeight + firstGridHeight;
                        $("#jqxwindow").jqxWindow({ maxHeight: firstResult });
                        $("#jqxwindow").jqxWindow({ height: firstResult });
                    }
                    else if (event.args.pagesize == 20) {
                        var secondGridHeight = $("#jqxgrid").height();
                        var secondResult = windowTitleHeight + secondGridHeight;
                        $("#jqxwindow").jqxWindow({ maxHeight: secondResult });
                        $("#jqxwindow").jqxWindow({ height: secondResult });
                    }
                    else if (event.args.pagesize == 30) {
                        var thirdGridHeight = $("#jqxgrid").height();
                        var thirdResult = windowTitleHeight + thirdGridHeight;
                        $("#jqxwindow").jqxWindow({ maxHeight: thirdResult });
                        $("#jqxwindow").jqxWindow({ height: thirdResult });
                    }
                }, 50);
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxwindow">
        <div id="windowHeader">
            <span>jqxGrid in jqxWindow</span>
        </div>
        <div style="overflow: hidden;">
            <div id="jqxgrid" style="width: 750px; height: 560px;"></div>
        </div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

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

Author

Posts

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

You must be logged in to reply to this topic.