With the latest release of jQWidgets, a new much requested feature has arrived. it is now possible to create a Grid with columns which are not with fixed width. Yes, it was possible to customize the size via the Columns Resizing functionality, but now you can set the column’s width to a percentage value. For example, by setting a column’s width to 30% means that the column will take 30% of the Grid’s width. The column will also automatically update its width, when the Grid’s size is changed. This is very useful when the Grid’s size is dynamically changed or the Grid’s width is set to a percentage value, too. The feature is implemented in such way, that you can have columns with percentage width, fixed width or with auto-width(when the width property is not set).
The following sample code illustrates how to set the Columns widths to percentage values.
<!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.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.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/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript"> $(document).ready(function () { var theme = getTheme(); var url = "../sampledata/beverages.txt"; // prepare the data var source = { datatype: "json", datafields: [ { name: 'name' }, { name: 'type' }, { name: 'calories', type: 'int' }, { name: 'totalfat' }, { name: 'protein' }, ], id: 'id', url: url }; var dataAdapter = new $.jqx.dataAdapter(source); $("#jqxgrid").jqxGrid( { width: '80%', source: dataAdapter, theme: theme, columns: [ { text: 'Name', datafield: 'name', width: '30%' }, { text: 'Beverage Type', datafield: 'type', width: '25%' }, { text: 'Calories', datafield: 'calories', width: '15%' }, { text: 'Total Fat', datafield: 'totalfat', width: '15%' }, { text: 'Protein', datafield: 'protein', width: '15%' } ] }); }); </script></head><body class='default'> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> <div id="jqxgrid"></div> </div></body></html>
Online Sample:
Grid Columns with Percentage Widths
