How to use ondblClickRow event in mobile devices

Question

Free jqgrid contains ondblClickRow event handler which is used to open order details.

If Google Chrome is put to Samsung Galaxy S4 emulation mode, this event does not file.

To reproduce, open

in Chrome in Samsung Galaxy S4 emulation mode and double click in jqgrid row. Alert box does not appear. Single click selects row properly.

How to fix this ?
Should separate open button added to every jqgrid row instead for this or is there better way to allow open details like double click in row in desktop.

Using 4.9.2-post

I found this https://stackoverflow.com/questions/8825144/detect-double-tap-on-ipad-or-iphone-screen-using-javascript ; seems you will need to write your own doubletap detection function with vanilla JS; jquery mobile has other features you could like. — ŽaMan, Nov 08 '15 at 16:12

score 3 · Accepted Answer · answered Nov 08 '15 at 18:51

3

It seems to me that you need to bind touchstart handle to the grid and to detect the touchstart which is triggered in the short time after the previous touchstart event. You can save the lime of the previous touchstart event using jQuery.data for example.

I modified your demo to http://jsfiddle.net/OlegKi/yNw3C/12120/ which uses the following code

$("#grid").bind("touchstart", function (e) {
    var $this = $(this), now = new Date().getTime(),
        lastTouchTime = $this.data("lastTouchTime") || now + 1,
        timeInterval = now - lastTouchTime;
    //console.log(e);
    // the next line use constant 500 as 0.5 sec timeout between taps
    if (timeInterval < 500 && timeInterval > 0) {
        var $tr = $(e.target).closest("tr.jqgrow");
        if ($tr.length > 0) {
            //console.log($tr[0]);
            alert("double touchstart on rowid=" + $tr.attr("id"));
        } else {
            alert("double touchstart");
        }
    }
    $this.data("lastTouchTime", now);
});

The code displays alert at least in Chrome in Samsung Galaxy S4 emulation mode

answered Nov 08 '15 at 18:51

Oleg

217,934
30
386
757

Double tap changes zoom level in touch devices. Not sure is it reasonable to bind also open function to it. I added Open button into actions buttons column. So details can be opened with click in this button and double tap behaviour is not changed. – Andrus Nov 08 '15 at 20:40
@Andrus: I don't use touch devices myself for free jqGrid. I just wanted to show you the main way how to handle double click on mobile devices. It could be another way, but it's just not the area, where I'm an expert. Probably you can ask other people. – Oleg Nov 08 '15 at 21:00
I have no experience on touch devices and try to create my first application for them using jqgrid. This code requires double tap in jqgrid row. Selection and hyperlink is activated by single tap in touch device. So it looks like it is better to use single tap activation and add code for this to beforeSelectRow to provide native user experience for selection using jqgrid. – Andrus Nov 16 '15 at 17:48
@Andrus: I have no experience on touch devices too. Sorry! – Oleg Nov 16 '15 at 18:27
The only problem with this solution is that it detects double tap on any row. I've added lastTouchRowId the same way as lastTouchTime is added to detect if double tap is happening on the same row. – Piotr Pawlik Apr 06 '16 at 13:37

How to use ondblClickRow event in mobile devices

1 Answers1