Scrolling on touch devices fires rowClick

[carloParticipant]

Hello Peter,

I definded a rowClick event for the DataTable. On touch devices the event fires when scrolling the table, which makes scrolling impossible. Do I have to specify something special (like touchMode:true) to the DataTable or use another event ?

Best Regards
Carlo

[Peter StoevKeymaster]

Hi Carlo,

If you scroll, without using the ScrollBar, you will have to click to start scrolling, which means that the event would and should be raised, because it is called “rowClick”. May be you should use the “rowSelect”, instead?

Best Regards,
Peter Stoev

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

[carloParticipant]

Hi Peter,

rowSeleceted the same problem. Here the demo page: http://85.214.238.149/table-scroll.html . Try scolling on a touch device. The event is fired and scrolling is stopped.

Best Regards,
Carlo

[carloParticipant]

Hi Peter,

your mobile demo page http://www.jqwidgets.com/jquery-widgets-demo/mobiledemos/index.htm does scrolling and selecting on touch devices. Would be nice if DataTable had the same behaviour.

Best Regards
Carlo

[Peter StoevKeymaster]

Hi Carlo,

It has the same behavior as on the Mobile Demo page. Look at the jqxDataTable’s demos. I also do not know whether you use or not the current version. Btw. your demo does not use the jqxDataTable’s Scrolling. You use the Web Browser’s Scrolling instead.

Best Regards,
Peter Stoev

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

[carloParticipant]

Hi Peter,

my demo http://85.214.238.149/table-scroll.html is using the latest 3.2.1. We are developping a mobile only application and really need to be able to scroll by swiping through the table. Please tell me whats wrong with my simple demo page. Your mobile demo has the same effect on an iPad in landscape mode (landscape, because there are too few entries for scrolling). If you try to scroll by swiping, another row is selected.

Best Regards
Carlo

[Peter StoevKeymaster]

Hi Carlo,

I think that I already wrote what the problem is. In your code, you do not use the jqxDataTable’s Scrolling. You use the Web Browser’s Scrolling. No, our demo’s Scrolling does not have the same effect, because jqxDataTable automatically displays its scrollbars, when it is necessary and it will not select a row when you scroll up/down. In general, there are no rows for scrolling when our Demo is displayed on Landscape using 10 inch IPAD. The demo on your web site which you pointed out, may have such effect, because the scrolling there is native and each tap makes a selection. To use the jqxDataTable’s built-in scrolling, make sure to set its “height” property as it is done in our demo.

Best Regards,
Peter Stoev

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

[carloParticipant]

Hi Peter,

according to your advise I set the height to 100% (as in your demo). Now nothing is displayed at all.

$(“#dgMeldungen”).jqxDataTable(
{
theme: ‘mobile’,
width: ‘100%’,
height: ‘100%’,
source: dataAdapter,
columns: [
{ text: ‘Alarme’, dataField: ‘sigbez’, width: ‘100%’ }
]
});

Best Regards,
Carlo

[Peter StoevKeymaster]

Hi Carlo,

That is because your container’s height is not set. For example: 100 * 0 = 0 and that happens here.

Best Regards,
Peter Stoev

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

[carloParticipant]

Hi Peter,

I changed the container to 100% height. Now scrolling by swiping is possible. But if I do the following:
1. Scroll by swiping
2. Select a row. The alert popup is shown.
3. I click OK in the alert box.
3. If I now try to swipe again, the select event is immediately fired and no scrolling possible.

Another point is the scrollbar shown on the right. Can the scrollbar be hidden ?

Best Ragards,
Carlo

[Peter StoevKeymaster]

Hi Carlo,

The scrollbar can’t be hidden.

Best Regards,
Peter Stoev

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

[carloParticipant]

Hi Peter,

what about 3. ?

Best Regards,
Carlo

[Peter StoevKeymaster]

Hi Carlo,

Alert Box gains the Focus so your widget is no longer on focus when you display Alert.

Best Regards,
Peter Stoev

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

[carloParticipant]

Hi Peter,

I have replaced the alert() with a jqxWindow and scrolling and selecting is working as expected. Thank you very much for your explanations. jqxWindow popup is not lookong very mobile like. I would like to have a sliding panel like in jquery mobile. Do you have an tipp how this can be done in jqw with bootstrap ?

Best Regards,
Carlo

[Author]

Posts