JqGrid unable to drag search modal on tablet

Question

I implemented jqgrid for my data grid, and enabling its search feature. When I use desktop browser, I can drag the search modal like normal. however, I cant do that when I drag it on tablet using touch.

Does anyone know how to enable it so I can drag the search modal on tablet device? This is my grid snippet code

$grid = $('#' + gridId);

var ListOfColName = ['Client PID', 'Date Assessed', 'Date Superseded', 'Client Name','Create From Existing', 'Detailed Care Plan'];

var ListOfColModel = [{ name: 'ClientPID', index: 'ClientPID', editable: true },{ name: 'ConsumerCarePlanId', formatter: ViewDetailLinkFormat, align: 'left', search: false}];

$grid.jqGrid({
        datatype: 'json',
        url: '../../JsGridService/ConsumerCarePlanSearchService.svc/GetCarePlanList',
        jsonReader: { repeatitems: false },
        loadui: "block",
        mtype: 'GET',
        rowNum: 5,
        rowList: [5, 10, 20, 30],
        viewrecords: true,
        colNames: ListOfColName,
        colModel: ListOfColModel,
        pager: '#' + pagerId,
        sortname: 'ClientPID',
        sortorder: 'desc',
        height: "100%",
        width: "100%",
        prmNames: { nd: null, search: null },
        caption: 'Care Plan List',
        autowidth: true,
        rownumbers: true,
        loadonce: true
    });
    $.extend($.jgrid.search, {
        multipleSearch: true,
        multipleGroup: true,
        recreateFilter: false,
        closeOnEscape: true,
        closeAfterSearch: true,
        overlay: 0
    });

Thank You.

Answer 1

Touch events on a mobile device do not trigger the same way that Click Events trigger in the browser. This is something that I have been battling with as well, I have a custom map dragging application that I wrote and it is impossible to drag the map on the touch screen.

EDIT: I used the following to map the touch events:

$('#zoomIn').on('click', function( e ) {
    e.stopPropagation();
    var scale = parseInt(mapscale) - 1;
    rescaleMap( scale );
});

$('#zoomOut').on('click', function( e ){
    e.stopPropagation();
    var scale = parseInt(mapscale) + 1;
    rescaleMap( scale );
});    

$('#zoomIn').on('touchstart', function( e ) {
    var scale = parseInt(mapscale) - 1;
    rescaleMap( scale );
    e.stopPropagation();
});

$('#zoomOut').on('touchstart', function( e ){
    var scale = parseInt(mapscale) + 1;
    rescaleMap( scale );
    e.stopPropagation();
});

I included the on-click handler so you could see I was implementing it twice (This bad practice, code should really be in a function call to avoid duplication and following DRY patterns) once for standard mouse interface, and once for the mobile interface.

Later on in my code I have the following that gets called inside of document ready:

function touchHandler(event) {
    var touches = event.changedTouches,
        first = touches[0],
        type = "";
         switch(event.type)
    {
        case "touchstart": type = "mousedown"; break;
        case "touchmove":  type = "mousemove"; break;        
        case "touchend":   type = "mouseup"; break;
        default: return;
    }

    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1, 
                              first.screenX, first.screenY, 
                              first.clientX, first.clientY, false, 
                              false, false, false, 0/*left*/, null);

    first.target.dispatchEvent(simulatedEvent);

    event.preventDefault();
}

This is treating the touch events as mouse events, and allowing them to function within normal jQuery mouse move events. This code is lifted and adapted directly from this answer here: JavaScript mapping touch events to mouse events

The draggable handle is not usable (at least not on the devices I have tested on) because it is still looking specifically for mouse events.