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.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • Virtual Paging and Grouping #29496

    themoriarty
    Member

    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?

    Virtual Paging and Grouping #29531

    Dimitar
    Participant

    Hello themoriarty,

    Unfortunately, virtual paging and grouping are not supported together currently. This will be fixed in the next version of jQWidgets.

    Best Regards,
    Dimitar

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

    Virtual Paging and Grouping #31170

    Binoy.MK
    Member

    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?

    Virtual Paging and Grouping #31229

    Dimitar
    Participant

    Hello Binoy.MK,

    Yes, grouping with virtual paging are supported in version 3.0.3 of jQWidgets.

    Best Regards,
    Dimitar

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

    Virtual Paging and Grouping #31242

    Binoy.MK
    Member

    Thanks for the update. We will test with new version.

    Virtual Paging and Grouping #61904

    GauthamSubramanian
    Participant

    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??

    Virtual Paging and Grouping #61922

    Dimitar
    Participant

    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,
    Dimitar

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

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

You must be logged in to reply to this topic.