Jquery Mobile Taphold and Slickgrid Doubleclick

[Drew Mangus]

Hello all,

I've been using Slickgrid with JqueryUI for a while and it works like a charm.  Now however, I've recently moved over to Jquery Mobile and am trying to provide the same functionality I had in JqueryUI.  I've gotten the grids up and running but I noticed that when I'm on a Mobile device and have a grid loaded, what used to be a double click to edit a cell, becomes a zoom in/out via the phones browser (best guess).  I would like to transfer the event that used to be a double click to a taphold event (documented here http://api.jquerymobile.com/taphold/) .  I was curious if anybody had attempted this or whether you guys think it's feasible?  I'm still slightly new to javascript and coding of the internet but I'm used to c and c++ so it hasn't been to big of a jump.

Best Regards, 

Drew

[Steve Fazekas]

I believe there is a branch someone is working on for mobile but not in the mliebman Slickgrid.  I don't believe this version handles it according to discussions I believe I read...  Anyone else know which one?

Steve Fazekas

Sent from my iPhone

--
You received this message because you are subscribed to the Google Groups "SlickGrid" group.
To unsubscribe from this group and stop receiving emails from it, send an email to slickgrid+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Drew Mangus]

I found this earlier, https://github.com/archfirst/mobile-grid-evaluation which is them implementing Slickgrid and comparing it to various other options.  It's the only thing I've seen regarding Slickgrid+jqueryMobile.

[Drew Mangus]

I tried this, without any luck but maybe it will spark an idea.

$( "div.slick-cell" ).bind( "taphold", tapholdHandler );

function tapholdHandler( event ){

     alert("Cell Taphold");

}

I figure if I can find something like this to bind to, I can use the event to gather the information I need to figure out the specific cell I'm in. 

[Steve Fazekas]

You may need to turn off the grid onDblClick and onClick edit functionality and change to onFocus event perhaps after an external button is clicked to turn that on.  It could be used like a cell hover event bc on mobile the blur does not occur naturally like a mouse event, correct?

I have not tried this at all but would be my first attempt.  

Steve Fazekas

Sent from my iPhone

--

[Drew Mangus]

Morning All,

I was doing some reading here, https://github.com/mleibman/SlickGrid/wiki/Handling-selection, as well as poking around in here, slick.cellselectionmodel.js, but still haven't caught the bright light bulb moment.  I think I may be headed in the right direction though.  I think I should be able to write a selection model that handles phone based events using swipe, tap, taphold and a few others from http://api.jquerymobile.com/category/events/.  That way I can put this code somewhere for somebody else to make use of.  I'm still a bit lost on where to start, which is how most things are I suppose.  Any tips or recommendations would be most helpful.

Cheers,

Drew

[Drew Mangus]

Well,

I think the previous post was a lapse in judgement on my part, I'd still be missing the "event" if I wrote the selection model.  So I started digging around in slick.grid.js, and slick.core.js in hopes of figuring out how to add the tap event. I added, 

"onTap": new Slick.Event(),

 to the extend at the bottom of slick.grid.js and also 

    function handleTap(e) {
      var cell = getCellFromEvent(e);
      if (!cell || (currentEditor !== null && activeRow == cell.row && activeCell == cell.cell)) {
        return;
      }
      trigger(self.onTap, {row: cell.row, cell: cell.cell}, e);
      if (e.isImmediatePropagationStopped()) {
        return;
      }
      if (options.editable) {
        gotoCell(cell.row, cell.cell, true);
      }
    }

Which is basically just a copy of the handleDblClick, but I couldn't figure out where his code calls

jQuery( ".selector" ).on( "tap", function( event ) { ... } )

Anybody know how this works? 

I looked into slick.core.js where the new Slick.Event() is called and it was a little over my head.

I usually don't like to edit underlying code but I didn't particularly see a way around this one, if anybody has a better way to do it that would be great.

[Drew Mangus]

I found this section where it binds all the handlers to functions, so I added my taphold.  Still no dice, I'm still missing something.

     

       $canvas

            .bind("keydown", handleKeyDown)

            .bind("click", handleClick)

            .bind("dblclick", handleDblClick)

            .bind("contextmenu", handleContextMenu)

            .bind("draginit", handleDragInit)

            .bind("dragstart", {distance: 3}, handleDragStart)

            .bind("drag", handleDrag)

            .bind("dragend", handleDragEnd)

            .delegate(".slick-cell", "mouseenter", handleMouseEnter)

            .delegate(".slick-cell", "mouseleave", handleMouseLeave)

    .bind("taphold", handleTap); //Drew

[Steve Fazekas]

DblClick and Click events may be taking precedent over taphold. 

You may need to redefine those event functions as other types of user events

Sent from my iPhone

[Drew Mangus]

I removed the .bind() for click and dblclick, taphold still doesn't work.  I put a test for taphold on the exact same page just to make sure the event actually did work and it does.  But not with how I have it in Slickgrid I suppose.

Drew

[Drew Mangus]

I figured it out, it's the drag events that are taking precedence over the taphold.  Is there a way to fix this?

Best Regards,

Drew

[Drew Mangus]

I read up some on drag/drop,

Figured this was the issue,

• draginit 
  This event is fired when a mouse button is pressed (mousedown) within the bound element. The handler can return false to cancel the rest of the drag interaction events, or can return elements to use as the drag targets for the rest of the drag interaction. This event will not fire unless the options "not", "handle", and "which" are all satisfied.

[Steve Fazekas]

I would suggest that the "drag rows" is the one most popular of the "drag" events used in my app, but just on one screen.

If you do not use the drag row functionality, you could potentially just turn it off or not instantiate it with an attribute you pass into the "new SlickGrid" function call.

I'm hypothesizing on that...

Steve

[Drew Mangus]

Issue Solved, or rather close enough for my needs (hacked per say, not really solved).  I ended up changing the draginit to start on a dblclick instead of mousedown, and removed dblclick handler for slickgrid so now if they access my grid on a PC, it's single click to select a cell, clickhold to edit a cell, doubleclick to select multicells, and on mobile it's basically the same except you can select multiselect by just sliding your finger over multicells due to the "touchstart" below if I had to take a guess.   

$event.add( this, "touchstart dblclick", drag.init, data ); //line 81 in version 2.2

Thanks for the advice / help Steve.  It is much appreciated.  

[Steve Fazekas]

Awesome to hear!

Steve

Sent from my iPhone

--