2 Replies Latest reply on Jul 19, 2011 12:19 AM by WebTrauma

    Drag and Drop an Image into a specific DataGrid cell ?


      I have a data grid that is built dynamically and visually by adding columns and rows

      via drag/drop from lists.


      Once the columns and rows are added, I need to drag/drop images into cells

      of extant grid rows/columns, not create new rows or put into 'next available' cell of

      a row. I already have an itemEditor that accepts/renders the image into the cells.


      list A = Column Builder (drag/drop from list to build columns)

      list B = Row Builder (drag/drop from list to build rows, with column 1 as the row label)

      list C = Cell Contents (drag an image into any cell of an existing row except first column)


      The DragEvent does not appear to have knowledge of dataGrid columns, only rows.


      It is easy to do this by using click events from the source Image list and the dataGrid,

      but not a good interaction design since users are drag/dropping the rest of the grid.


      Will I need to create a custom DataGrid for 'cell aware' drag and drop ? if so, any

      pointers on where to start looking in the DataGrid code would be most appreciated.


      Thanks !


      p.s. This is a sequel to this thread: http://forums.adobe.com/thread/863587?tstart=0

        • 1. Re: Drag and Drop an Image into a specific DataGrid cell ?
          WebTrauma Level 1

          The problem is that both the currentTarget and target of the drop are  the DataGrid. The default for the drop event is to add a row, which is  not what I want for the image drop.


          If I preventDefault()  on the drop event, that stops the row being added, which is great. I  also have knowledge of the grid row for the drop event.


          The  problem is that I don't know which column of the row is being dropped  into...I have looked in the debugger and have not found ANY useful  property set.


          In lieu of a better solution, one that gives me a 'cell aware' drop, I have implemented this workaround:


          1. for the source list: get the image and store instance of it outside the drag event

          2. for the destination grid: I set 'dropEnabled=false'

          3. for the destination grid: add a ListEvent.ITEM_ROLL_OVER event and handler

          4. from the ITEM_ROLL_OVER event: get the row and column indices

          5. get the previously stored instance of the image

          6.. add the image to the right row/dataField in the dataProvider


          I  still need to figure out how to dynamically manipulate the cursor style so it shows the green circle with plus sign (mx.skins.cursor.DragCopy) for image  cells and red circle with x sign (mx.skins.cursor.DragReject) for all other places...not sure how  to do this with a mouse button held down, but it will hopefully succumb  to brute force.

          • 2. Re: Drag and Drop an Image into a specific DataGrid cell ?
            WebTrauma Level 1

            I have this all working, but it is a LOT of code...too much to post here.


            If anyone needs to do this, please shoot me a message and I will send the code.