Button click not working on first click in jqxWindow when scrollbars are present

[SiddharthParticipant]

Hi,

I am facing a strange issue with the jqxWindow widget.
I have created a jsfiddle to replicate the issue at:
Please find the description below:
I have a Data table inside a popup Window. I have added a custom checkbox column to enable users to select one or more rows.
Below the data table I have an ok and a cancel button. When I click the ok button the window is supposed to close. It works ok as long as there are no scrollbars. When I select a page size of 20 scrollbars appear then if I select row(s) in the table and click ok nothing happens. If I switch back to smaller page size and make selections and press ok it works. Somehow the scrollbars are interfering with the click of the button.

Please let me know if more information is required. I tried to do my best with the jsfiddle example but it is my first attempt to demonstrate and recreate the issue.

Thanks & Regards,
Siddharth Seth

[SiddharthParticipant]

[SiddharthParticipant]

https://jsfiddle.net/0qw6pc4v/

[DimitarParticipant]

Hi Siddharth,

There are no “OK” and “close” buttons in your fiddle. Please also note that widgets (i.e. jqxDataTable) are not supposed to be positioned inside the jqxWindow’s header, but its content. Please refer to the jqxWindow Getting Started guide for more information. We suggest you also check the API Documentation and the available demos.

Best Regards,
Dimitar

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

[SiddharthParticipant]

Hi Dimitar,

Sorry, kind of made a mess in the fiddle there, but now its all fixed up and updated.
Placed the jqxDataTable in the content of the window as opposed to the header. I intended to from the start.

I have been using JQWidgets in my projects for over an year (recently renewed the license 🙂 ) now and am familiar with the API.
What I am trying to do is have a checkbox column and allow the user to edit the value with a single click.
Hope that explains the extra bit of code in the fiddle. Everything works well till I change the page size and scrollbars appear.

To recreate click ‘Open Window’ at the top next change the page size so to say 15 or 20, scrollbars should appear. Click a checkbox in the DataTable.
Click the button that says ‘Ok’. This should cause an alert window to show followed by the window being closed. This happens on the second click rather than the first.

Please let me know if more information is required.

Thanks & Regards,
Siddharth Seth

[SiddharthParticipant]

https://jsfiddle.net/Siddharth_Seth/mLcu0o91/2/

[DimitarParticipant]

Hi Siddharth,

Here is what we suggest: http://jsfiddle.net/Dimitar_jQWidgets/3Lprrh9m/.

Best Regards,
Dimitar

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

[SiddharthParticipant]

Hi Dimitar,

Thanks for the solution provided but I have run into another issue with it. In the fiddle you provided the Ok button works the first time around and resolves the original issue. But now I cannot check uncheck rows which have to be navigated after scrolling.
The steps to recreate the issue in your fiddle:

1. Click on “Open Window”.
2. Change page size to 20.
3. Scroll to the bottom of the Window.
4. Try to check the bottom most rows.

Please have a look and let me know if you need more information.

Thanks & Regards,
Siddharth Seth

[DimitarParticipant]

Hi Siddharth,

Maybe your jqxDataTable custom checkbox column implementation is not optimal. We suggest you make use of jqxGrid, which has the same functionality built-in (along with a checkbox selection mode).

Best Regards,
Dimitar

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

[SiddharthParticipant]

Hi Dimitar,

I finally figured it out and got it working. If you set the saveOnBlur to false, it solves the issue with the row selection as well.
I made the following changes to your fiddle:

1. Set the saveOnBlur in the editSettings of the DataTable to false.
2. Uncommented the call to beginCellEdit in the rowClick event handler.

and now I am able to check uncheck all rows with any page size and the ok button works on first click.
Solution fiddle at:

http://jsfiddle.net/Siddharth_Seth/812j1wct/

Thanks & Regards,
Siddharth Seth

[Author]

Posts