KnockoutJS pagesizeoptions bug - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: grid, jqxgrid, Knockout, knockoutjs, page, pageable, pagesize, pagesizeoptions, paging, size

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 10 years, 5 months ago.

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

Author

KnockoutJS pagesizeoptions bug Posts

October 2, 2014 at 8:33 pm KnockoutJS pagesizeoptions bug #60549

Windmill

Participant

I’ve found a bug when using jqxGrid with a custom pagesizeoptions and pagesize.

For example, when I have this set:

pagesize: 100,
pagesizeoptions: [10, 25, 50, 100]

pagesize: 100,
pagesizeoptions: ['10', '25', '50', '100']

The actual row amount is 10 instead of 100.

October 3, 2014 at 5:12 am KnockoutJS pagesizeoptions bug #60575

Dimitar

Participant

Hello Windmill,

In both cases, we do not experience such issue. Here is a working example, based on the Knockout demo Paged Grid.

<!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="../../scripts/json2.js"></script>
    <script type="text/javascript" src="../../scripts/knockout-3.0.0.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.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxknockout.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        function Person(data) {
            this.Title = ko.observable(data.Title);
            this.Company = ko.observable(data.Company);
            this.Name = ko.observable(data.Name);
        };

        var viewModel = {
            items: ko.observableArray([
                new Person({ Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio" }),
                new Person({ Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller" }),
                new Person({ Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock" }),
                new Person({ Title: "Vice President", Company: "Berglunds snabbkop", Name: "Robert King" }),
                new Person({ Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio" }),
                new Person({ Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller" }),
                new Person({ Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock" }),
                new Person({ Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio" }),
                new Person({ Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller" }),
                new Person({ Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock" }),
                new Person({ Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio" }),
                new Person({ Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller" }),
                new Person({ Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock" }),
                new Person({ Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio" }),
                new Person({ Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller" }),
                new Person({ Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock" }),
                new Person({ Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio" }),
                new Person({ Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller" }),
                new Person({ Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock" }),
                new Person({ Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio" }),
                new Person({ Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller" }),
                new Person({ Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock" }),
                new Person({ Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio" }),
                new Person({ Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller" }),
                new Person({ Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock" }),
                new Person({ Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio" }),
                new Person({ Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller" }),
                new Person({ Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock" }),
                new Person({ Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio" }),
                new Person({ Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller" }),
                new Person({ Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio" }),
                new Person({ Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller" }),
                new Person({ Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio" }),
                new Person({ Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller" }),
                new Person({ Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock" }),
                new Person({ Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio" }),
                new Person({ Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller" }),
                new Person({ Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock" }),
                new Person({ Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio" }),
                new Person({ Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller" }),
                new Person({ Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock" }),
                new Person({ Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio" }),
                new Person({ Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller" }),
                new Person({ Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock" }),
                new Person({ Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio" }),
                new Person({ Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller" }),
                new Person({ Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock" }),
                new Person({ Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio" }),
                new Person({ Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller" }),
                new Person({ Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock" }),
                new Person({ Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio" }),
                new Person({ Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller" }),
                new Person({ Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock" }),
                new Person({ Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio" }),
                new Person({ Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller" }),
                new Person({ Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio" }),
                new Person({ Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller" }),
                new Person({ Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock" }),
                new Person({ Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio" }),
                new Person({ Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller" }),
                new Person({ Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock" }),
                new Person({ Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock" }),
                new Person({ Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock" }),
                new Person({ Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock" }),
                new Person({ Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio" }),
                new Person({ Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller" }),
                new Person({ Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock" }),
                new Person({ Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio" }),
                new Person({ Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller" }),
                new Person({ Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock" }),
                new Person({ Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio" }),
                new Person({ Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller" }),
                new Person({ Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio" }),
                new Person({ Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller" }),
                new Person({ Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio" }),
                new Person({ Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller" }),
                new Person({ Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock" }),
                new Person({ Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio" }),
                new Person({ Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller" }),
                new Person({ Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock" }),
                new Person({ Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio" }),
                new Person({ Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller" }),
                new Person({ Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock" }),
                new Person({ Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio" }),
                new Person({ Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller" }),
                new Person({ Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock" }),
                new Person({ Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio" }),
                new Person({ Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller" }),
                new Person({ Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock" }),
                new Person({ Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio" }),
                new Person({ Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller" }),
                new Person({ Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock" }),
                new Person({ Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio" }),
                new Person({ Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller" }),
                new Person({ Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock" }),
                new Person({ Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio" }),
                new Person({ Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller" }),
                new Person({ Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio" }),
                new Person({ Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller" }),
                new Person({ Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock" }),
                new Person({ Title: "Sales Representative", Company: "Ana Trujillo Emparedados y helados", Name: "Nancy Davolio" }),
                new Person({ Title: "Sales Manager", Company: "Antonio Moreno Taqueria", Name: "Andrew Fuller" }),
                new Person({ Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock" }),
                new Person({ Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock" }),
                new Person({ Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock" }),
                new Person({ Title: "Sales Representative", Company: "Around the Horn", Name: "Margaret Peacock" })
            ])
        };

        $(document).ready(function () {
            ko.applyBindings(viewModel);
        });

        function addRow() {
            var count = viewModel.items().length;
            viewModel.items.push(new Person({ Title: "Title" + count, Company: "Company" + count, Name: "Name" + count }));
        };
    </script>
</head>
<body>
    <div>
        <div id="jqxgrid" data-bind="jqxGrid: { source: items,  columns: [
                 { text: 'Title', dataField: 'Title', width: 200 },
                 { text: 'Company', dataField: 'Company', width: 200},
                 { text: 'Name', dataField: 'Name', width: 200 }
             ], pageable: true, pagesize: 5, pagesizeoptions: [10, 25, 50, 100], autoheight: true}">
        </div>
        <table style="margin-top: 20px;">
            <tbody data-bind="foreach: items">
                <tr>
                    <td data-bind="text: Title">
                    </td>
                    <td data-bind="text: Company">
                    </td>
                    <td data-bind="text: Name">
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            <input data-bind="jqxButton: {}" type="button" id="addRowButton" onclick="addRow()"
                value="Add row" />
        </div>
    </div>
</body>

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.