jQWidgets Forums

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

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

Author

Percentage Grid Sizing & Paging Posts

January 14, 2013 at 5:53 pm Percentage Grid Sizing & Paging #13594

Participant

I’ve got a grid being loaded from XML that uses server-side paging. When the width of the grid is set as a percentage, changing the page size causes all the columns to become hugely wide. In the example below, change the page size from 20 to 50 and see it happen. If you change the main width on the grid from ‘100%’ to ‘500px’ it won’t happen. Please let me know how to fix this bug – we’re counting on the grids being able to resize based on the base page size.

 <html>
 <head>
 	<link rel="stylesheet" href="/javascript/jqwidgets/2.6.0/styles/jqx.base.css" type="text/css" />
	
	<script type="text/javascript" src="/Javascript/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxcore.js"></script>
	<script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxdata.js"></script> 
	<script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxbuttons.js"></script>
	<script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxscrollbar.js"></script>
	<script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxlistbox.js"></script>
	<script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxdropdownlist.js"></script>
	<script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxdropdownbutton.js"></script>
	<script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxmenu.js"></script>
	<script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxgrid.js"></script>
	<script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxgrid.columnsresize.js"></script>
	<script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxgrid.sort.js"></script>
	<script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxgrid.pager.js"></script>
	<script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxgrid.selection.js"></script>
	<script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxgrid.filter.js"></script>
	<script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxgrid.edit.js"></script>
	<script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxcheckbox.js"></script>
	<script type="text/javascript" src="/javascript/jqwidgets/2.6.0/jqxpanel.js"></script>
	<script type="text/javascript" src="/javascript/JQWidgets/2.6.0/jqxdatetimeinput.js"></script>
	<script type="text/javascript" src="/javascript/JQWidgets/2.6.0/jqxnumberinput.js"></script>
	<script type="text/javascript" src="/javascript/JQWidgets/2.6.0/jqxcalendar.js"></script>
	<script type="text/javascript" src="/javascript/JQWidgets/2.6.0/jqxtooltip.js"></script>
	<script type="text/javascript" src="/javascript/JQWidgets/2.6.0/globalization/jquery.global.js"></script>
	
	  <script type="text/javascript">
	        $(document).ready(function () {
	            var theme = '';
	            var url = "/javascript/jqwidgets/2.6.0/demos/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) { }
	            });
				
				var rendergridrows = function (params) { return dataAdapter.records; }
				
	            // initialize jqxGrid
	            $("#jqxgrid").jqxGrid({
	                width: '100%', 
					source: dataAdapter, 
					theme: theme,
					altrows: true, 
					autoheight: true, 
					columnsresize: true,
					selectionmode: 'none', 
					sortable: true, 
					filterable: true,  
					enablebrowserselection: true,
					pageable: true,
					virtualmode: true,	
					rendergridrows: rendergridrows,
					showdefaultloadelement: false,
					pagesize: 20, 
					pagesizeoptions: ['20', '50', '100', '200', '400'],
	                columns: [
	                  { text: 'Product Name', datafield: 'ProductName', width: '54%'},
	                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', width: '12%' },
	                  { text: 'Unit Price', datafield: 'UnitPrice', cellsalign: 'right', cellsformat: 'c2', width: '12%' },
	                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: '12%' },
	                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued', width: '10%' },
	                ]
	            });
	        });
	    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left; width: 100%;">
        <div id="jqxgrid">
        </div>
     </div>
</body>
</html>

January 14, 2013 at 8:07 pm Percentage Grid Sizing & Paging #13598

Peter Stoev

Keymaster

Hi shimmoril,

Here is a working example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to enable the paging feature of the Grid.
    </title>
    <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/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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.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.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            var url = "../sampledata/orders.xml";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
                    { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName' },
                    { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress' },
                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity' },
                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry' }
                ],
                root: "entry",
                record: "content",
                id: 'm\\:properties>d\\:OrderID',
                url: url,
                pager: function (pagenum, pagesize, oldpagenum) {
                    // callback called when a page or page size is changed.
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: '100%',
                source: dataAdapter,
                theme: theme,
                sortable: true,
                pageable: true,
                autoheight: true,
                columnsresize: true,
                columns: [
                  { text: 'Ship Name', datafield: 'ShipName', width: '54%' },
                  { text: 'Shipped Date', datafield: 'ShippedDate', width: '12%', cellsformat: 'D' },
                  { text: 'Freight', datafield: 'Freight', width: '12%', cellsformat: 'F2', cellsalign: 'right' },
                  { text: 'Ship Address', datafield: 'ShipAddress', width: '12%' },
                  { text: 'Ship City', datafield: 'ShipCity', width: '10%' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Columns Widths are working as expected before and after resizing the browser’s window.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 14, 2013 at 8:59 pm Percentage Grid Sizing & Paging #13599

shimmoril

Participant

What exactly did you change? Is it just the addition of the pager callback function? If I add that (and only that) to my posted example it doesn’t fix the problem. It would be helpful if you just modified my example, then I could just compare line-by-line.

January 15, 2013 at 2:57 pm Percentage Grid Sizing & Paging #13644

shimmoril

Participant

I just noticed this: “Columns Widths are working as expected before and after resizing the browser’s window.” That’s not the issue I described. Set up the grid to use % widths. Set it up to do paging. Change the page size (ie. from 20 to 50). Now each column is hugely wide. It has nothing to do w/ changing the browser size.

January 16, 2013 at 12:46 pm Percentage Grid Sizing & Paging #13695

starfruit

Member

The very same bug is happening in our grid, which loads json in ‘virtual mode’ and also has percentage width and percentage column widths. The ‘working example’ posted is one of the demos that comes with the library, but it doesn’t use percentage widths and virtual mode, which I think is related to the issue.

January 16, 2013 at 1:06 pm Percentage Grid Sizing & Paging #13698

Peter Stoev

Keymaster

Hi starfruit and shimmoril,

We have been able to reproduce the reported behavior and created a work item about it. The fix will be available in jQWidgets 2.7 which will be released in the first half of February.

Best Regards,
Peter Stoev

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

January 16, 2013 at 3:03 pm Percentage Grid Sizing & Paging #13708

shimmoril

Participant

Thank you.

January 17, 2013 at 11:21 am Percentage Grid Sizing & Paging #13798

starfruit

Member

Thanks!