LiveCode Forums.

Is it possible to recreate that cool iOS swipe to show/hide a delete button in a datagrid?
I am about to start experimenting with the datagrid, swipe recognizers and show/hide buttons and I will probably get something but is it possible to get cool reveal button animations like in iOS? or will I have to settle for a simple show and hide without animation? I don't want to try to recreate something that is impossible to do in LC.

Has anyone every successfully recreated that show/hide a delete button animation in a datagrid with a swipe gesture?

coffee16

I second the question! I have figured out how to get the mechanics working, with the swipe, then message popup asking for delete. But I have not been able to figure out how to get a button to show up in the right place. If anyone has any ideas I would love to know too!

Totally possible. The trick is to put your swipe detecting script in the script of the row template group. I have this working in such a way as to move all the contents of the row to the right, revealing three controls. I'm away from home until tonight Australian time but will post full details then.

Oh and while I don't use the built in LiveCode animation you could use the reveal visual effect when you show and hide the button. Something like "show button "delete" of me with visual effect reveal right"

Gerry

Thanks for that confirmation. That is good news that it can be done. I didn't realize you could animate object other than card transitions but after seeing your comment about "show button "delete" of me with visual effect reveal right" I see that the animation works on buttons very nicely.

I would love to see any sample stacks you may have. It would probably save me hours and hours of time.
Especially pushing already current content to the side to make space for the delete button.

regards,
coffee 16

I'm using this method on a form datagrid but I think it'll work on a table too.

Create a group containing your always-visible buttons within the row template group of the datagrid. In the following example the group of buttons is called group "rowButtons"

Now create your delete button, also in the row template group, but not in the group "rowButtons". Call it "delete" and set it's visible to false.

Make a note of the group "rowButtons"'s left edge i.e. the left of group "rowbuttons". For this example let's assume it's left is 12.

Put this script into the row template script of the datagrid:

local sLoc

on touchstart
put the mouseLoc into sLoc
end touchstart

on touchend
put the mouseLoc into tLoc
if abs (item 1 of sLoc - item 1 of tLoc) > 5 then
if (item 1 of sLoc < item 1 of tLoc) then
slideButtons "right"
end if
if (item 1 of sLoc > item 1 of tLoc) then
slideButtons "left"
end if
else
exit to top
end if
end touchend

Put this into the Behavior Script of the same datagrid:

on slideButtons whichWay
global slideRow
if whichway = "right" then
if the dgDataControlOfIndex [slideRow] of me ≠ slideRow then
set the left of group "rowbuttons" of slideRow to 12
hide button "delete" of slideRow
end if
put the dgIndex of me into slideRow
put the dgDataControlOfIndex [slideRow] of me into slideRow
set the left of group "rowbuttons" of me to 550
show button "delete"
else
put "" into slideRow
set the left of group "rowbuttons" of me to 12
hide button "delete"
end if
end slideButtons

That should get you started

I've attached a screen shot of how I'm using this method.

Cheers

Gerry

Gerry

Thank you for your help with toggling a delete button on/off in a datagrid. I got the button to show for only the first row and never for any of the other rows. I tried placing the script you posted in different locations all over the place but with no success. I have spent hours going over the datagrid documentation but that only makes me more confused.

Is there any way you can post a bare-bones working sample stack? There are so many moving parts in a datagrid I am getting lost in the forest.

Coffee16

Hey again

I think I left something out of the script...

Always refer to the row's objects with the "of me" identifier. So in my example:

show button "delete" and hide button "delete"

should be:

show button "delete" OF ME and hide button "delete" OF ME

Try that.

Gerry