Using taphold on jqxGrid?

[KevinSParticipant]

I am currently using a jqxGrid to display some results returned from a Sql Server DB. I have it set up right now where if a user double clicks on a row, it takes them to a new page with the relevant information from that row. This functionality works fine in IE, but it does not work in Chrome…not quite sure why yet.

My question though, is in regards to mobile. Double tapping does not work on the rows, because in the mobile world, that makes the browser want to zoom into my content. Is there a way to use the taphold functionality from jqxTouch to select a row on a datatable in the grid?

Thanks,
Kevin

[VladimirParticipant]

Hello KevinS,

You can try to attach the jqxTouch to your grid.

$('#jqxGrid').jqxTouch();

and then bind to the tapHold event

$('#jqxGrid').on('tabhold', tabHoldHandler);

I believe that this will select the row before the event is fired if you have the proper selection mode, and using this you can actually use the selected row in your tabHoldHandler function to redirect the user. Though this may be triggered on tapHold outside of the cells area but inside the grid. Maybe you can play around with it and find a better solution.

Also jquery mobile has a taphold event, so you may want to give that a try as well.

I hope this helps.

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[VladimirParticipant]

Hello KevinS,

Another approach could be the following.
Have a variable holding coordinates for x and y, that you get on touchstart (since taphold doesn’t properly display position coordinates).
var x=0,y=0;

$('#jqxgrid').on('touchstart', function (event) {
                var data = event.originalEvent.touches[0];
                x = data.pageX;
                y = data.pageY;
            });

And then in the taphold you can use these coordinates to get the current rowselection using getcellatposition function

$('#jqxgrid').on('taphold', function (event) {
var cell = $('#jqxgrid').jqxGrid('getcellatposition', x, y);
                alert(cell.row);
});

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[KevinSParticipant]

Thanks! I’d imagine I can get at least one of those to work! I thought about binding to the touch control, but I wasn’t sure what would happen if I did that. Was afraid that my grid might start murdering kittens or somehow start the zombie apocalypse!

Thanks again,
Kevin

[KevinSParticipant]

The first option works…mostly! When I try to do a taphold on my iPhone it just wants to select the row and allow me to copy it!

HOWEVER, if I click and hold on a desktop browser (which is basically what the taphold is doing in the background anyway) I can navigate to my page.

I did this.

$(“#jqxGrid”).jqxTouch();
$(“#jqxGrid”).on(‘taphold’, function (event) {
var selectedIndex = $(“#jqxGrid”).jqxGrid(‘getselectedrowindex’);
var data = $(“#jqxGrid”).jqxGrid(‘getrowdata’, selectedIndex);
navigate(“newPage?Id=” + data.Id);
});

The row is selected before the taphold event fires (on the PC) On the iPhone, it seems I have to select the line first. well, more playing around needs to be done! Thanks for the help Vladimir!

[VladimirParticipant]

Hello KevinS,

I think that the second one would work better actually, you should try it

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[KevinSParticipant]

The taphold seems to not want to work on the iPhone…all it wants to do is select the row in the table to copy it!

[Author]

Posts