jQWidgets Forums

Tagged: 100%, grid, height, jqxgrid, width

This topic contains 5 replies, has 3 voices, and was last updated by Shailaja 11 years, 7 months ago.

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

Author

Resizing and refreshing Posts

May 10, 2013 at 7:53 am Resizing and refreshing #20917

Participant

We have a grid that has both height and width set to 100%. On browser resize the grid does not expand automatically to fit the new viewport. Is this expected behaviour?

We are currently having to call the ‘refresh’ method to force the grid to expand or contract correctly so that vertical and horizontal scrollbars reappear.

The problem with ‘refresh’ is that nested grids in expanded rows are removed.

We are currently having to use some complex code to maintain the state of each row (we have multiple nesting).

Do you have any suggestions on how we can resize the grid without the destructive ‘refresh’?

Thank you,
Michael

May 10, 2013 at 8:46 am Resizing and refreshing #20927

Dimitar

Participant

Hello Michael,

The grid supports 100% width and height. Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.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.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/gettheme.js"></script>
    <style type="text/css">
        html, body
        {
            width: 100%;
            height: 100%;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var url = "../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) {
                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: "100%",
                height: "100%",
                source: dataAdapter,
                theme: theme,
                pageable: true,
                autoheight: false,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 120 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 100 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued' },
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Remember to update to the latest version of jQWidgets (2.8.3) if you haven’t done so yet.

Best Regards,
Dimitar

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

May 10, 2013 at 10:07 am Resizing and refreshing #20942

Michael Arrastia

Participant

Thank you Dimitar. I tried your example and the grid resizes smoothly. We must be doing something that is causing a ‘refresh’.

By the way, do you know if in your example any open nested grids would remain open?

Thank you,
Michael

May 10, 2013 at 10:44 am Resizing and refreshing #20943

Michael Arrastia

Participant

Hi Dimitar,

I’ve added nested grids to the example you sent me. Sometimes the expanded rows don’t remain open on browser resize, occasionally they close up. It seems to happen more on height increase… Is this a known issue?

By the way, I am running your example with 2.8.3.

Thank you,
Michael

May 13, 2013 at 7:06 am Resizing and refreshing #21004

Dimitar

Participant

Hi Michael,

The reported behaviour is expected and is not a bug. This is to keep the grid at 100% height.

Best Regards,
Dimitar

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

August 2, 2013 at 7:45 am Resizing and refreshing #26149

Shailaja

Member

Thanks Dimitar

Author

Posts

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

You must be logged in to reply to this topic.