Grouping is not working when virtual mode = true - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: group, grouping, jqxgrid grid, page, paging, virtual mode, virtualmode

This topic contains 6 replies, has 4 voices, and was last updated by Centerbase 9 years, 1 month ago.

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

Author

Grouping is not working when virtual mode = true Posts

January 30, 2015 at 7:56 am Grouping is not working when virtual mode = true #66205

Participant

My application Grid enable paging with virtual mode is true property, when doing grouping on first page (page 1) all numeric and alpha numeric columns are grouping fine, when grouping on second page on words(page 2, 3,4 etc..) if grouping numeric columns it shows grouped records fine but if grouping alpha numeric columns it shows empty rows. let me know the issue

January 30, 2015 at 8:27 am Grouping is not working when virtual mode = true #66206

Dimitar

Participant

Hello senthilkumar,

Please make sure you are using the latest version of jQWidgets (3.6.0). Here is an example that shows that this functionality is working: http://www.jqwidgets.com/community/topic/virtual-paging-and-grouping/#post-61922.

Best Regards,
Dimitar

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

February 2, 2015 at 11:32 am Grouping is not working when virtual mode = true #66302

senthilkumar

Participant

one level of grouping is working fine (all numeric and alpha numeric columns) when doing two level of grouping other than first page

Numeric column + Numeric column = working

Numeric column + Alpha numeric column = working

Alpha numeric + Alpha numeric = Not working it shows empty rows
Result grid

February 3, 2015 at 1:06 pm Grouping is not working when virtual mode = true #66421

Dimitar

Participant

Hi senthilkumar,

With the latest version (3.7.0), the example requires a little modification (var data = new Array();):

<!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.11.1.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 = new Array();
                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,
                ready: function () {
                    $('#jqxgrid').jqxGrid('addgroup', 'firstname');
                    $('#jqxgrid').jqxGrid('addgroup', 'lastname');
                },
                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>

As you can see, there are no issues when grouping by two string columns. However, while there are no errors thrown, this configuration (virtual paging + grouping) may not be suitable for real scenarios.

Best Regards,
Dimitar

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

February 5, 2015 at 11:05 am Grouping is not working when virtual mode = true #66604

senthilkumar

Participant

Please kindly test above example, clear all existing grouping then move to page number 2, now start grouping first group ‘First Name’ column then ‘Last Name’ column same bug. Two level of grouping is not working in version 3.7 also, please help us.

February 5, 2015 at 11:11 am Grouping is not working when virtual mode = true #66606

Peter Stoev

Keymaster

Hi senthilkumar,

Sorry, but we never supported Grouping in Virtual Mode. This cannot work because is Invalid approach. Data which is Loaded on Demand and stored Per Page Only cannot be Grouped. This is invalid scenario which should never be tried and we consider throwing an exception for pointing that out in future versions.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

July 23, 2015 at 3:55 pm Grouping is not working when virtual mode = true #74098

Centerbase

Participant

Hi Peter,

Truth be told, I don’t see how Grouping and Paging is ever a viable combination (even if the whole dataset is loaded in memory). However, I am using Virtual Mode without paging (infinite scrolling). It seems to me that the way Virtual Mode and Grouping could be combined is with one main change to the code.

If you add a function, similar to rendergridrows, called rendergroups (or something like that). It would pass the column IDs that the grid is currently grouping by and expect an array returned detailing the groups and their respective row counts. The main change to rendergrid rows would be that it would assume that the rows are sorted by each of the group columns in turn followed by the sort columns.

Example: When rendergroups is called, I return Group A with 3 records, Group B with 4 records, and Group C with 2 records. Then when rendergridrows is called, row 0-2 would be in Group A, 3-6 in Group B, and 7-8 in Group C.

Is this something that you guys have thought of implementing (or already have and I’m just not seeing it)? Does this seem viable to you?

Author

Posts

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

You must be logged in to reply to this topic.