Pager problem - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: grid, jqxgrid, pageable, pager, pagesize, paging

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

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

Author

Pager problem Posts

April 20, 2015 at 9:14 am 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.

April 20, 2015 at 9:33 am 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/

April 20, 2015 at 10:01 am 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,

April 21, 2015 at 5:47 am 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/

Author

Posts

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

You must be logged in to reply to this topic.