jQWidgets Forums

jQuery UI Widgets Forums Grid Height and Width parameter values

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 11 years, 6 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Height and Width parameter values #47590

    rcm01
    Participant

    Based on some of the posts it looks like that height and width parameters can be specified in various ways from integer, percentage, px, etc. The API specifies that the type is “Number/String” without examples of the acceptable types or how they should be specified. In my test page the only way that it appears to work is if it’s defined as integers without quotes (i.e. height:100, width: 100). When using a string in either parameter, the browser displays the grid as if the parameters were set to zero. My desire is to define both parameters as one hundred percent to adapt to different monitor sizes and ratios (i.e. height: “100%”, width: “100%”) using the refresh method to re-layout the grid (note: guessing this is behavior of function, grid API does not say). Also, the issue with these parameters is occurring with jqxsplitter and other widgets that support the height and width properties.

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>This demo illustrates the basic functionality of the Grid plugin. The jQWidgets Grid plugin offers rich support for interacting with data, including paging, grouping and sorting. 
        </title>
        <link rel="stylesheet" href="Scripts/jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="Scripts/jquery-2.0.3.js"></script> 
        <script type="text/javascript" src="Scripts/jquery-ui-1.10.3.js"></script> 
        <script type="text/javascript" src="Scripts/jquery-ui-1.10.3.min.js"></script> 
    
        <script type="text/javascript" src="Scripts/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="Scripts/jqwidgets/jqxdata.js"></script> 
        <script type="text/javascript" src="Scripts/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="Scripts/jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="Scripts/jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="Scripts/jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="Scripts/jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="Scripts/jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="Scripts/jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="Scripts/jqwidgets/jqxgrid.sort.js"></script> 
        <script type="text/javascript" src="Scripts/jqwidgets/jqxgrid.pager.js"></script> 
        <script type="text/javascript" src="Scripts/jqwidgets/jqxgrid.selection.js"></script> 
        <script type="text/javascript" src="Scripts/jqwidgets/jqxgrid.edit.js"></script> 
        <script type="text/javascript" src="Scripts/scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                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, 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: 500,
                    height: 100,
                    source: dataAdapter,
                    pageable: true,
                    autoheight: true,
                    autorowheight: true,
                    sortable: true,
                    altrows: true,
                    enabletooltips: true,
                    editable: true,
                    selectionmode: 'multiplecellsadvanced',
                    columns: [
                      { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },
                      { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 120 },
                      { text: 'Unit Price', columngroup: 'ProductDetails', 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' }
                    ],
                    columngroups: [
                        { text: 'Product Details', align: 'center', name: 'ProductDetails' }
                    ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxgrid">
            </div>
        </div>
    </body>
    </html>
    Height and Width parameter values #47598

    Peter Stoev
    Keymaster

    Hi rcm01,

    On the Mobile Demos page, all samples of the jqxGrid display a Grid with width and height set to “100%”. The Height and Width properties can be either Integer or Percentage. The Integer is without quotes, the Percentage as far as I know can be set only as String. That is valid for All Widgets.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.