jQuery UI Widgets › Forums › Grid › Virtual Paging and Grouping
This topic contains 6 replies, has 4 voices, and was last updated by Dimitar 10 years, 3 months ago.
-
Author
-
I am looking to set up a new project with large quantities of data, and for that i would like to implement your grid virtually with paging and grouping (along with other functionalities). However, i am having some trouble setting this up correctly.
Now, i have seen this is possible as shown by ‘morgar’ in this topic (http://www.jqwidgets.com/community/topic/problem-with-grouping-on-last-page/), and for now i’m not worried about the last rows issue.
Could you please provide an example where these 2 are correctly implemented?
Hello themoriarty,
Unfortunately, virtual paging and grouping are not supported together currently. This will be fixed in the next version of jQWidgets.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hello Dimitar,
I am using version 3.0.2 and have a similar requirement. When I enable grouping with virtual pagination only the first page is grouping properly. In all other pages when I drag a column for grouping, I’m getting empty records.
Is this issue fixed in version 3.0.3? If not, when are you planning to include this?
Hello Binoy.MK,
Yes, grouping with virtual paging are supported in version 3.0.3 of jQWidgets.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thanks for the update. We will test with new version.
Hi I am Using jQWidgets v3.4.0 (2014-June-23) version but i still have the same issue that only records group at first page and not at second page.
I have another question as well,If we have 1000 records and 10 per page the grouping will be happen for entire 1000 records and display in pages or it will happen only page by page??Hello GauthamSubramanian,
Grouping works fine with virtual paging in version 3.4.0. Here is an example:
<!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.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.grouping.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: 1000000 }; // 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: 850, autoheight: true, source: dataAdapter, virtualmode: true, pageable: true, groupable: true, rendergridrows: rendergridrows, columns: [ { text: 'Id', datafield: 'id', width: 50 }, { text: 'First Name', datafield: 'firstname', width: 120 }, { text: 'Last Name', datafield: 'lastname', width: 120 }, { text: 'Product', datafield: 'productname', width: 180 }, { text: 'Quantity', datafield: 'quantity', width: 100, cellsalign: 'right' }, { text: 'Unit Price', datafield: 'price', width: 100, cellsalign: 'right', cellsformat: 'c2' }, { text: 'Total', datafield: 'total', cellsrenderer: totalcolumnrenderer, 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>
The expected behaviour is grouping the rows in the current page only.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.