Bug with Grid PageSize + Grouping + Server Side Filtering + Server Side Paging

[MetricMember]

Hi there,

While we have been trying out jqWidgets, we noticed a peculiar bug when we combine a custom page size + grouping + server side filtering + server side paging.

So for instance, when you first create the grid with something like:

var source =
				{
					datatype: "json",
					datafields: [
						{ name: 'country' },
						{ name: 'status' },
						{ name: 'publication_number'},
						{ name: 'filed_on', type: 'date' },
						{ name: 'family' },
						{ name: 'title' },
						{ name: 'inventors' },
						{ name: 'assignee' },
						{ name: 'normalized_assignee' },
						{ name: 'ultimate_parent_assignee' },
						{ name: 'claims_count' },
						{ name: 'inventors' },
						{ name: 'id', type: 'int' },
						{ name: 'filing_year' }
					],
					id: 'id',
					url: '/objects/grid/publication?group=' + encodeURIComponent(marker._id),
					root: 'records',
					beforeprocessing: function (data) {
                        source.totalrecords = parseInt(data.total);
					},
					sort: function () {
						// update the grid and send a request to the server.
						content.find('.op-grid').jqxGrid('updatebounddata', 'sort');
					},
					filter: function () {
						// update the grid and send a request to the server.
						content.find('.op-grid').jqxGrid('updatebounddata', 'filter');
					}
				};
				var dataAdapter = new $.jqx.dataAdapter(source, {
					formatData: function (data) {
									$.extend(data, {
										page: data.pagenum,
										pageSize: data.pageSize
									});
								}
				});
				
				content.find('.op-grid').jqxGrid({
					width: '99%',
					source: dataAdapter,
					height: content.find('.op-grid-wrapper').height() - 10,
					pageable: true,
					pagesize: 3000,
					sortable: true,
					sorttogglestates: 1,
					altrows: true,
					groupable: true,
					virtualmode: true,
					columnsresize: true,
					rowsheight: 30,
					groupsexpandedbydefault: true,
					rendergridrows: function(params) {
						return params.data
					},
					pagesizeoptions: ['100','500','3000','5000'],
					columns: [
						{text: '', datafield: 'id', width: '5%', cellsrenderer: idRenderer},
						{text: zimoko.culture.get('flyout.gridHeader.country'), datafield: 'country', width: '12%'},
                        {text: zimoko.culture.get('flyout.gridHeader.status'), datafield: 'status', width: '10%'},
                        {text: zimoko.culture.get('flyout.gridHeader.publicationNumber'), datafield: 'publication_number', width: '12%'},
                        {text: zimoko.culture.get('flyout.gridHeader.title'), dataField: 'title', width: '25%'},
                        {text: zimoko.culture.get('flyout.gridHeader.filedDate'), datafield: 'filed_on', width: '12%', cellsformat: 'MM/dd/yyyy'},
                        {text: zimoko.culture.get('flyout.gridHeader.family'), datafield: 'family', width: '10%'},
                        {text: zimoko.culture.get('flyout.gridHeader.inventors'), datafield: 'inventors', width: '100%', cellsrenderer: inventorsRenderer, sortable: false, filterable: false},
                        {text: 'Filing Year', datafield: 'filing_year', hidden: true}
					]
				});

You will notice we set the initial pagesize in the settings to 3000. However, when the server returns the data it only returns 2406 rows, which is perfectly fine. But, when you go to group, the grouping system of the grid messes up and inserts an extra 500 blank rows in one blank group. Then if you change the page size to something lower like 30 or 500. The grouping system is still messed up when you group. It seems as if the grouping is using the pagesize for the total number of rows to group, rather than the source.totalrecords. This is a repeatable bug, and we are using the latest version of jqWdiget 3.0.4.

Now, if you set the pagesize < the total records on the initial grid settings, then grouping works just fine. I just thought you would like to know, in order to correct it, because right now we are having to do a setTimeout work around to capture the total rows in the beforeprocessing of the source and then change the pagesize to the totalrecords. The grid pagesize is set to 1 in the inital settings.

Also one more thing, when you set the pagesize to 0 in the initial settings, with server paging and server filtering, the grid gets stuck in an infinite loading loop. You might want to check for that, just in case someone does accidentally set it to 0 when they are first initializing the grid.

Thanks

[Peter StoevKeymaster]

Hi Metric,

We will check whether the bug report for that scenario is valid and we will add a work item if we confirm it. In general the Grouping in Virtual Mode depends mostly on your “totalrecords” setting so if it adds extra 500 rows it is very possible the “totalrecords” to be something more than “2406”.

Best Regards,
Peter Stoev

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

[Peter StoevKeymaster]

Hi Metric,

We are unable to reproduce the reported behavior with jQWidgets 3.0.4.

<!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.10.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/jqxmenu.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.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.grouping.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {            
            // prepare the data
            var data = new Array();
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];
            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];
            // generate sample data.
            var generatedata = function (startindex, endindex) {
                var data = {};
                for (var i = startindex; i < endindex; i++) {
                    var row = {};
                    var productindex = Math.floor(Math.random() * productNames.length);
                    var price = parseFloat(priceValues[productindex]);
                    var quantity = 1 + Math.round(Math.random() * 10);
                    row["id"] = i;
                    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                    row["productname"] = productNames[productindex];
                    row["price"] = price;
                    row["quantity"] = quantity;
                    row["total"] = price * quantity;
                    data[i] = row;
                }
                return data;
            }
            var source =
            {
                datatype: "array",
                localdata: {},
                totalrecords: 2406
            };
            // load virtual data.
            var rendergridrows = function (params) {
                var data = generatedata(params.startindex, params.endindex);
                return data;
            }
            var totalcolumnrenderer = function (row, column, cellvalue) {
                var cellvalue = $.jqx.dataFormat.formatnumber(cellvalue, 'c2');
                return '<span style="margin: 6px 3px; font-size: 12px; float: right; font-weight: bold;">' + cellvalue + '</span>';
            }
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: '99%',
                source: dataAdapter,                
                rowsheight: 30,
                groupsexpandedbydefault: true,
                virtualmode: true,
                pagesize: 3000,
                groupable: true,
                pagesizeoptions: ['100', '500', '3000', '5000'],
                pageable: true,
                rendergridrows: rendergridrows,
                columns: [
                    { text: 'Id', datafield: 'id', width: 50 },
                    { text: 'First Name', datafield: 'firstname', width: 100 },
                    { text: 'Last Name', datafield: 'lastname', width: 100 },
                    { text: 'Product', datafield: 'productname', width: 180 },
                    { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right' },
                    { text: 'Unit Price', datafield: 'price', width: 70, cellsalign: 'right', cellsformat: 'c2' },
                    { text: 'Total', datafield: 'total', cellsrenderer: totalcolumnrenderer, width: 100, cellsalign: 'right' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

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

[Author]

Posts