How to drag a row of a datagrid on a button and get its ID ?

[titobal]

Hi,

I would like to drag a row of a datagrid and get its ID when dropped
on a button...

It is possible ?

Thanks.

[titobal]

Any tip ?

[trevordevore]

I recently polished up the undocumented drag drop/reorder routines in the data grid. I've uploaded this test version of the data grid to my server along with a stack that has some sample code.

There are no docs yet but if you look at the group script of either data grid in the test stack you can see how it works. I think for what you are doing the following would work:

Code: Select all

on dragStart
    put the dgIndex of the dgDataControl of the target into theIndex
    set the dgDragImageIndex of me to theIndex    
    set the dragData["private"] to THE_ID
end dragStart

The above code would create an image of the row the user is dragging and would start a drag opeation because the dragData["private"] property is being set. If a drop occurs on a button then the dragData["private"] could have the id you want.

revDataGridLibrary Stack (1.0.0 build 22)

http://www.bluemangolearning.com/downlo ... ry.rev.zip

dragdroptest Stack

http://www.bluemangolearning.com/downlo ... optest.zip

[titobal]

Trevor, I am amazed ! Many thanks for this contribution.

[titobal]

Trevor,

thanks again for your help.

Based on the sample stack I would like to be able to pick from Datagrid1
a row and drag and drop it onto Datagrid2, then at drop time it would
copy the row from datagrid1 into Datagrid2... don't know if I am clear enough...

How would you do that ?

Thanks again for your precious help.

[trevordevore]

To start the drag you would do something like this in the data grid group script:

Code: Select all

on dragstart
    put the dgIndex of the dgDataControl of the target into theIndex

    ## sets the dragImage
    set the dgDragImageIndex of me to theIndex

    ## Store identifier of what is stored in private dragData
    ## along with index of row being dragged.
    ## Setting dragData["private"] also starts drag operation.
    set the dragData["private"] to "data grid row" & theIndex
end dragstart

Then in the data grid that is going to receive the drop you could do this:

Code: Select all

on dragEnter
    if line 1 of the dragData["private"] is "data grid row" then
        ## Get reference to data grid that drag started from
        put the dgControl of the dragSource into theDataGrid

        ## Get row that was dragged
        put the dgDataOfIndex[ line 2 of the dragData["private"] ] of theDataGrid into theRowDataA

        ## Insert dragged row as last line in this data grid.
        AddData theRowDataA
    end if
end dragEnter

Note that the above code is completely untested.

[titobal]

Hi Trevor... that does not work ...

I know that you are very busy with the Runrev conference approaching.

I've removed the dragreorder on the second grid,
and changed the drag event on grid 1 with the one you gave lastly and it does not work...

Any idea ?

Many thanks Grid Master ) Trevor !

[trevordevore]

Here is some code that works. I left out a CR when setting the dragData and was processing the drop in dragEnter rather than dragDrop.

Data grid 1:

Code: Select all

on dragStart
    put the dgIndex of the dgDataControl of the target into theIndex
    set the dgDragImageIndex of me to theIndex
    
    set the dragData["private"] to "data grid row" & cr & theIndex 
end dragStart

Data grid 2:

Code: Select all

on dragEnter
    put the dragData["private"]
    
    if line 1 of the dragData["private"] is "data grid row" then 
        set the dragaction to "copy"
    else
        set the dragaction to "none"
    end if 
end dragEnter 


on dragDrop
    ## Get reference to data grid that drag started from 
    put the dragsource into theControl
    put the dgControl of theControl into theDataGrid 
     
    ## Get row that was dragged 
    put the dgDataOfIndex[ line 2 of the dragData["private"] ] of theDataGrid into theRowDataA 
     
    ## Insert dragged row as last line in this data grid. 
    AddData theRowDataA 
end dragDrop

[titobal]

Thanks again Trevor for your helping me out in my discovery of the Fabulous datagrids in RunRev.

Good luck with the conference coming soon (bought the simulcast express and hope to see you in action !)

One last thing...

I populate a datagrid with mp3 files (paths+name) in a hidden column,
then I would like to add another column with a play/stop button for each row of the grid.

The goal is to play each mp3 file by clicking the corresponding button
on the row of the mp3 file... (don't know if I'm clear)...using a player (via quicktime)

How would you implement that ?

Any suggestion is very welcomed .

Thanks again.

[trevordevore]

My suggestion would be to start off with a single player object that plays the song that is clicked on (like iTunes does) rather than trying to have a separate player associated with each row.

If you take the single player approach then it is just a matter of adding a key to each row of data (hidden column if you will) that keeps track of whether or not a row is playing. The key could be "playing" for example. The key would default to a value of false for every row and your FillInData handler would show the play icon.

When the user clicks on the play button you would:

a) Toggle the "playing" value for the row that is currently playing (see (d) )

b) Set the "playing" key for that row to true by setting the dgDataOfIndex. This would refresh the row by calling FillInData which would display the pause icon since "playing" would be true.

c) Extract the the mp3 file name and assign it to the player object.

d) Log the index (or line) of the row in the data grid that is playing. This is what is used in (a) to turn off playing visually.

Make sense?

[titobal]

Thanks again Trevor.

I think you are right regarding having a player object apart from the grid.

As I need to play only 1 mp3 at a time I think I will go for a Global variable (isplaying for example) for determining if there is something playing or not, each time a row is clicked and the status isplaying is true, I stop the player and assign the clicked row to the player...

Thanks again for your help.

[titobal]

Hi Trevor,

I don't know why but the sample does not work in Build 910 4.0.0 dp4
of runtime revolution enterprise.

Perhaps I need a newer build of the datagrid component ?

The line is dragged and when dropped the inserted line is blank.

By the way how could I implement in the destination grid a divider line
which tells the user the dropped line will be placed under that divider ?
(just like the divider in the reorder grid example)...

Any clue ?

[trevordevore]

You have to update the revDataGridLibrary stack again as dp-4 doesn't have the version of the data grid that supports drag reordering.

As for showing the line showing drop target: Just set the dgTrackDragReorder property with an index of 0 in the Data Grid that accepts the drop.

Code: Select all

on dragEnter 
   put the dragData["private"] 
   
   if line 1 of the dragData["private"] is "data grid row" then 
      set the dragaction to "copy" 
      set the dgTrackDragReorder [0] of me to true
   else 
      set the dragaction to "none" 
   end if 
end dragEnter

[titobal]

Hi Trevor,

thanks for your as always "precious help"

how to proceed to update the revDataGridLibrary ?

Many thanks

[trevordevore]

Same way you did before. Just download the revDataGridLibrary using the url in the 3rd post of this thread. You can also follow the instructions linked to from the RunRevLive conference page:

http://tr.im/data_grid