ParamQuery grid support forum

General Category => Help for ParamQuery Grid (free version) => Topic started by: bbieber on November 14, 2018, 08:05:42 pm

Title: swipeModel: { on : true } - works fine on desktop with mouse but not on iOS
Post by: bbieber on November 14, 2018, 08:05:42 pm

The swipeModel works fine for horizontal scrolling on the desktop but when I swipe on an iOS device nothing happens.  I tried the Pro (eval) version and the swiping works as expected on iOS but you lose the swiping functionality in the desktop environment.  Am I missing something simple or isn't the swipe functional with touch devices?  I did try to set up a jsFiddle example but I couldn't seem to get the swipe to work within that framework.
brian

https://paramquery.com/api#option-swipeModel  (https://paramquery.com/api#option-swipeModel)

Title: Re: swipeModel: { on : true } - works fine on desktop with mouse but not on iOS
Post by: paramvir on November 14, 2018, 08:22:04 pm

Please use virtualX: false for horizontal swipe in free version.

https://paramquery.com/api#option-virtualX

Title: Re: swipeModel: { on : true } - works fine on desktop with mouse but not on iOS
Post by: bbieber on November 14, 2018, 11:54:55 pm

The following works fine in the desktop environment but doesn't seem to work on a mobile device.  Are there any options that I have set that might interfere with the scrolling?  I've included a screen shots of the app on the desktop and a mobile device.

The colModel is just a holder for a REST call initiated by the user, so the colModel is dynamically created further on.  When the JSON is received by the app, there are about 40 columns, where only about 3 of them are visible on a mobile device.
Thanks.
brian

Code: [Select]

var obj = {
title: "Road Segments", editable: false, collapsible: false, selectionModel: { type: null },
virtualX: false, height: 'flex', width: 'auto', scrollModel: { autoFit: false }, freezeCols: 1
};
obj.colModel = [
{ title: "", dataIndx: "state", width: 30, align: "center", type: 'checkBoxSelection', cls: 'ui-state-default', resizable: false, sortable: false, cb: {all: true, header: true} },
{ title: "HwyName", width: 100, dataType: "string", dataIndx: "HwyName" }

];
obj.dataModel = {
data: [{ HwyName: "Temp1", state: false }],
location: "local",
sorting: "local"
};
// 11/9/18 bb define the toolbar
obj.toolbar = {
items: [
{ type: 'button', label: 'More/Less', attr: 'title="show more columns"', listeners: [{ click: showColsHandler }] },
],
cls: 'pq-toolbar-right-bb'
};

$("#roads_grid").pqGrid(obj);

Title: Re: swipeModel: { on : true } - works fine on desktop with mouse but not on iOS
Post by: paramvir on November 16, 2018, 07:39:13 am

Have you included touch-punch file.

Also please set swipeModel: { on: true }

Please share a jsfiddle if it still doesn't work.

Title: Re: swipeModel: { on : true } - works fine on desktop with mouse but not on iOS
Post by: bbieber on November 16, 2018, 09:20:27 pm

I was missing the touch-punch file.  I had been on 2.0.4 until this week.  I switched to 2.4.1 but didn't reread the tutorial.

That functionality is pretty sweet!

One last question, since I have the height: 'flex', once I stop scrolling in the y-axis, the only way I can initiate scrolling in the y-axis is to start the swipe off grid.  Is this the expected behavior?

I did try the 'pq-no-capture' class on one of the columns but that didn't seem to work.
Thanks for you help.
brian

Code: [Select]

var obj = {
title: "Road Segments", editable: false, collapsible: false, selectionModel: { type: null },
swipeModel: { on: true }, virtualX: false, virtualY: true, height: 'flex', width: 'auto', scrollModel: { autoFit: false }, freezeCols: 1,  hoverMode:'row'
};