[SoftwareIsHappinessParticipant]

Hi Peter,

In this post I explained that pagesizeoptions does not work in Chrome on Linux at all. Please advise or resolve.

Simply visit JSFiddle on Linux in Chrome at: http://jsfiddle.net/jqwidgets/Hz8GS/

Additionally, I shared details above that isolates the issue to the HTML markup (see above).

Michael

[SoftwareIsHappinessParticipant]

Here is the correct HTML markup produced in Windows that isn’t produced in Linux for Chrome web browser:

<div style="outline: none 0px; overflow: hidden; width: 44px; position: relative; height: 162px;"><div role="option" id="listitem0innerListBoxgridpagerlistjqxgrid" class="jqx-listitem-element" style="height: 24px; top: 0px; left: 0px;"><span style="white-space: pre; display: block; visibility: inherit; width: 33px;" class="jqx-listitem-state-normal jqx-item jqx-rc-all">5</span></div><div role="option" id="listitem1innerListBoxgridpagerlistjqxgrid" class="jqx-listitem-element" style="height: 24px; top: 25px; left: 0px;"><span style="white-space: pre; display: block; visibility: inherit; width: 33px;" class="jqx-listitem-state-normal jqx-item jqx-rc-all">10</span></div><div role="option" id="listitem2innerListBoxgridpagerlistjqxgrid" class="jqx-listitem-element" style="height: 24px; top: 50px; left: 0px;" aria-selected="true"><span style="white-space: pre; display: block; visibility: inherit; width: 33px;" class="jqx-listitem-state-normal jqx-item jqx-rc-all jqx-listitem-state-selected jqx-fill-state-pressed">20</span></div></div>

[SoftwareIsHappinessParticipant]

Hi,

I have identified this behavior as a bug and isolated the issue to:

• Ubuntu 16.04
• Version 54.0.2840.100 (64-bit)

The following page implements the pagesizeoptions drop down in Windows/Chrome but not Linux/Chrome:

https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-paging.htm

Note: There are no JavaScript errors sent to console. Please resolve.

Thanks so much!
Michael

[SoftwareIsHappinessParticipant]

Hi,

Here is the HTML code that is produced. Notice that the pagesizeoptions are not present only the pagesize.

<div id="gridpagerlistjqxgrid"
     style="margin-top: 0px; margin-right: 8px; float: right; display: block; width: 32px; height: 20px;"
     role="combobox" aria-autocomplete="both" aria-readonly="false" tabindex="0"
     class="jqx-widget jqx-widget-energyblue jqx-dropdownlist-state-normal jqx-dropdownlist-state-normal-energyblue jqx-rc-all jqx-rc-all-energyblue jqx-fill-state-normal jqx-fill-state-normal-energyblue jqx-default jqx-default-energyblue"
     aria-owns="listBoxgridpagerlistjqxgrid" aria-haspopup="true" aria-disabled="false">
    <div style="background-color: transparent; -webkit-appearance: none; outline: none; width:100%; height: 100%; padding: 0px; margin: 0px; border: 0px; position: relative;">
        <div id="dropdownlistWrappergridpagerlistjqxgrid"
             style="overflow: hidden; outline: none; background-color: transparent; border: none; float: left; width:100%; height: 100%; position: relative;">
            <div id="dropdownlistContentgridpagerlistjqxgrid" unselectable="on"
                 style="outline: none; background-color: transparent; border: none; float: left; position: relative; margin-top: 2px; margin-bottom: 2px; width: auto; height: 20px; left: 0px; top: 0px;"
                 class="jqx-dropdownlist-content jqx-dropdownlist-content-energyblue jqx-disableselect jqx-disableselect-energyblue">

                <!-- HERE IS THE ONLY DROP DOWN OPTION -->
                5
                <!-- HERE IS THE ONLY DROP DOWN OPTION -->

            </div>
            <div id="dropdownlistArrowgridpagerlistjqxgrid" unselectable="on"
                 style="background-color: transparent; border: none; float: right; position: relative; width: 19px; height: 20px;">
                <div unselectable="on"
                     class="jqx-icon-arrow-down jqx-icon-arrow-down-energyblue jqx-icon jqx-icon-energyblue"></div>
            </div>
        </div>
    </div>
    <input type="hidden" value="7">
</div>

Michael

[SoftwareIsHappinessParticipant]

Hi,

I have tried both “pagesizeoptions” and “pageSizeOptions” both do not produce a usable drop down. Please advise as we are unable to complete our proof-of-concept for CRUD/Grid.

Thank you very much,
Michael

[SoftwareIsHappinessParticipant]

Hi,

Although this feature isn’t working on JQWidgets.com and JSFiddle, I have included my source for completeness.

<script type="text/javascript">
    $(document).ready(function () {
        var url = "/admin/user/find";
        var source =
        {
            datatype: "json",
            datafields: [
                { name: 'id', type: 'int' },
                { name: 'name', type: 'string' },
                { name: 'email', type: 'string' },
                { name: 'created_at', type: 'date' },
                { name: 'updated_at', type: 'date' }
            ],
            id: 'id',
            root: 'data',
            beforeprocessing: function (data) {
                source.totalrecords = data.totalrecords;
                console.dir(source);
            },
            url: url,
            pager: function (pagenum, pagesize, oldpagenum) {
                // callback called when a page or page size is changed.
            }
        };
        var dataAdapter = new $.jqx.dataAdapter(source);
        $("#jqxgrid").jqxGrid({
            theme: theme,
            width: '100%',
            source: dataAdapter,
            selectionmode: 'multiplerowsextended',
            sortable: true,
            pageSize: 5,
            autoHeight: true,
            pagesizeoptions:[5, 10, 20],
            pageable: true,
            virtualmode: true,
            rendergridrows: function()
            {
                return dataAdapter.records;
            },
            columnsresize: true,
            columns: [
                { text: 'Id', datafield: 'id', width: '10%' },
                { text: 'Name', datafield: 'name', width: '20%' },
                { text: 'Email', datafield: 'email', width: '30%' },
                { text: 'Created', datafield: 'created_at', width: '20%', cellsformat: 'd' },
                { text: 'Updated', datafield: 'updated_at', width: '20%', cellsformat: 'd' }
            ]
        });
    });
</script>

Michael

[SoftwareIsHappinessParticipant]

Hi,

I have checked other demos and the HTML generated by the widget doesn’t contain the pagesizeoptions and thus no options may be selected. This seems to be a bug.

Also, other forum posts describe the same issue without a reply or resolution.

Michael

[SoftwareIsHappinessParticipant]

Hi,

This post is resolved. I had omitted virtualmode: true and rendergridrows callback— both are necessary in addition to pageable: true.

        $("#jqxgrid").jqxGrid({
            theme: theme,
            width: '100%',
            source: dataAdapter,
            selectionmode: 'multiplerowsextended',
            sortable: true,
            pageable: true,
            virtualmode: true,
            rendergridrows: function()
            {
                return dataAdapter.records;
            },
            autoheight: true,
            columnsresize: true,
            columns: [
                { text: 'Id', datafield: 'id', width: '10%' },
                { text: 'Name', datafield: 'name', width: '20%' },
                { text: 'Email', datafield: 'email', width: '30%' },
                { text: 'Created', datafield: 'created_at', width: '20%', cellsformat: 'd' },
                { text: 'Update', datafield: 'updated_at', width: '20%', cellsformat: 'd' }
            ]
        });

Thanks,
Michael

[SoftwareIsHappinessParticipant]

Hi,

I followed the documentation for “Server-Side Paging with jQuery Grid” at: http://www.jqwidgets.com/server-side-paging-with-jquery-grid/

Why isn’t the grid/adapter recognizing source.totalrecords?

We intend to purchase jQuery Widgets but are attempting to implement CRUD/Grid functionality first. Assistance is so greatly appreciated!

Thanks,
Michael

[SoftwareIsHappinessParticipant]

NOTE: Using jQWidgets v4.3.0 (2016-Oct)

[Author]

Posts