pagesizeoptions not working

[SoftwareIsHappinessParticipant]

Hi,

In the documentation at: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/paging.htm and in the “Try it” at: http://jsfiddle.net/jqwidgets/Hz8GS/ as well as in my own code. The drop down doesn’t display any pagesizeoptions.

Please advise or resolve.

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

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

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

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>

[Peter StoevKeymaster]

Hi Michael,

The pagesizeoptions on http://jsfiddle.net/jqwidgets/Hz8GS/ are correct as far as I see. They are set to pagesizeoptions:[’15’, ’30’, ’50’], which is exactly what is displayed on the pager’s dropdown.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[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]

Hi Peter,

I have visited the Drop Down List demo at: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdropdownlist/jquery-dropdownlist-getting-started.htm?search= and the click handler doesn’t display the list at. It would seem that the issue is with this component.

Please advise or resolve. This is fundamental JQWidget functionality. Moreover, we are a Linux software development team and develop on Ubuntu!

Thank you,
Michael

[Peter StoevKeymaster]

Hi Michael,

If it works on windows chrome and does not on linux chrome then the issue is in the linux chrome, not in us and they will resolve it in future version of chrome.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[SoftwareIsHappinessParticipant]

Hi Peter,

Please elaborate. JQWidgets is a cross-platform and cross-browser JQuery user interface library. In other words, since there are differences between browsers as well as browsers on different operating systems your reply is extremely dismissive!

I am very disappointed with the lack of effort in your reply and your technical support! In your first reply you did not take time to read my posts. In this post you do not provide enough information and assign ownership of this issue to Google.

As a software engineer of over 25 yrs I could share numerous examples where I resolved JavaScript issues that existed on one operating or another! How can you make such a generalized statement? If you have identified the issue to be within Chrome then please elaborate– what is the issue? Or have you not established support boundries and dimissed my post? Really?

We intended to purchase a enterprise license and technical support package. Is this what we might expect? Dismissive support?

Michael

[SoftwareIsHappinessParticipant]

Hi Peter,

I am able to call the open() method from the JavaScript console and the drop down list opens. However, when I click on the drop down with the mouse it does not open. Apparently, the click isn’t being captured. This type of issue typically is a z-index issue and not a core browser issue. So, again. Please elaborate. Investing some effort will go a long way to earning a customers trust and loyalty.

$('#dropdownlistContentgridpagerlistjqxgrid').jqxDropDownList('open');

Michael

[SoftwareIsHappinessParticipant]

Hi Peter,

Perhaps you might consider the following to help put your statement into perspective. Out of respect, I will not mention the several competing JavaScript user interface libraries whose grid implementation had no problem in both Firefox and Chrome on Linux in my evaluation this evening. I selected JQWidget because it is based on JQuery which has excellent and proven cross platform & cross browser support. JQWidget leverages JQuery a “de facto standard”. So why isn’t JQWidgets able to extend JQuery’s unarguably dependable cross platform & cross browser support? Please identify and describe the issue that you believe can only be resolved by Google Chrome and that it is not a cross platform & cross browser issue?

Michael

[SoftwareIsHappinessParticipant]

NOTE: The jQuery selector above that opens the drop down list in the grid is incorrect. Below is the correct method call:

$('#gridpagerlistjqxgrid').jqxDropDownList('open');

Do you understand Peter? If I am able to open the widget programmatically it is extremely unlikely it is core browser issue owned by Google?

[Author]

Posts