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.
-
Author
-
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>
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 StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.