jQuery UI Widgets Forums Grid Pager problem

This topic contains 3 replies, has 2 voices, and was last updated by  Dimitar 9 years, 3 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Pager problem #70052

    aser
    Participant

    Hi, I have a problem with showing page size on pager. After switching page size it works fine.
    Grid load with parameters:

    pageable: true,
    pagesize: 14,

    pager

    Thanks.

    • This topic was modified 9 years, 3 months ago by  aser.
    Pager problem #70056

    Dimitar
    Participant

    Hi aser,

    Could you, please, share your entire grid initialization code so that we may determine what causes this issue? Make sure you are using the latest version of jQWidgets (3.7.1).

    Best Regards,
    Dimitar

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

    Pager problem #70059

    aser
    Participant

    Yes, I’m using the latest version of jQWidgets (3.7.1).

    grid initialization parameters:

    width: ‘100%’,
    theme: ‘bootstrap’,
    enablehover: false,
    rowsheight:28,
    editable: true,
    editmode: ‘dblclick’,
    autorowheight: true,
    autoheight: true,
    source: dataAdapter,
    columnsresize: true,
    filterable: true,
    showfilterrow: true,
    filterrowheight: 29,
    autoshowfiltericon: true,
    columnsheight:40,
    sortable: false,
    showsortmenuitems: true,
    columnsreorder: true,
    groupable: false,
    pageable: true,
    pagesize: 5,
    pagesizeoptions: [5, 10, 15],
    virtualmode: true,

    Pager problem #70093

    Dimitar
    Participant

    Hi aser,

    We could not reproduce the issue with the following 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.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="../../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: '100%',
                    autoheight: true,
                    source: dataAdapter,
                    virtualmode: true,
                    pageable: true,
                    pagesize: 5,
                    pagesizeoptions: [5, 10, 15],
                    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="jqxgrid">
        </div>
    </body>
    </html>

    Make sure you have implemented the rendergridrows callback function, which is necessary when virtualmode is enabled.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.