Forum | Appery.io

I have a grid component with several images and labels in it. Is it possible to add a Swipe event to the grid instead of each component individually?

Hi Milton,

You would need some custom JavaScript.
Run this code on page Load event:
pre$(document).off("swipe", '[name="mobilegridName"]').on({
swipe: function() {
debugger;
},
}, '[name="mobilegridName"]');/pre

I am not sure I completely understand. The Javascript you provided, is document the page I am loading..."newScreen".

Where does this Javascript allow me to set different actions for Swipe Left or Swipe Right?

And where do I define what action I want to take once the Swipe is triggered?

Hi Milton.

Please try this code instead of suggested above:
pre

$(document).off("swipe");

//Note: "mobilegrid_56" is component name you need to handle swipe events.
Appery("mobilegrid_56").on({
"swipeleft": function(event) {
//Here is code to handle swiptLeft event.
console.log("swipeLeft");
},

 "swiperight": function(event) { 
     //Here is code to handle swiptRight event. 
     console.log("swipeRight"); 
 },     

});/pre

Do I need to change "$(document)" to the page name?

Hello,

No.

You don't need to change this code:

$(document).off("swipe");

This code seems to work if I add it to an Image component or a label, but not for a grid. I guess the other option is to add it for all components inside the grid. Is there a way to do that easily....something like,

(document).off("swipe");
//Note: "mobilegrid_56" is component name you need to handle swipe events.
Appery("mobilegrid_56", "mobilegrid_57", "mobilegrid_58").on({
"swipeleft": function(event) {
//Here is code to handle swiptLeft event.
console.log("swipeLeft");
},
"swiperight": function(event) {
//Here is code to handle swiptRight event.
console.log("swipeRight");
},
});

Hi Milton,

No, see this comment: https://getsatisfaction.com/apperyio/...

You would only need to change a grid name, nothing more.

Hi Katya,

I changed the grid name, but could not get it to work. It would not detect a swipe command. If I used a different component instead of the grid, it worked, but not with the grid.

Hello,

It should work. Could you show us screenshots with grid properties(where we can see a grid name) and screenshot with code which your are using.