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

    Using drag/drop to build data grid rows from multiple lists ?

    WebTrauma Level 1



      I have implemented some simple drag and drop between grids and lists, including images.


      What I need to do now is quite a bit more complex:


      Create rows in a data grid by dragging and dropping from multiple lists. That is, for a given

      row, column 1 receives data from list A and rows in column 2 - 5 receive data from List B


      I haven't found any examples that do this and my initial hacks haven't been successful.


      If you have any suggestions, they would be most appreciated !!!


      Thanks !  

        • 1. Re: Using drag/drop to build data grid rows from multiple lists ?
          EvyatarBH Level 3

          I think you would need to customize the dragDrop event handler, so it would add objects to the DataGrid's dataProvider.

          I would say dropping from list A would create a new object, while dropping from list B would populate properties of the last created object.

          (arrayCollection.getObjectAt(arrayCollection.length) --> Should get you there)


          That would be my general direction...

          1 person found this helpful
          • 2. Re: Using drag/drop to build data grid rows from multiple lists ?
            WebTrauma Level 1

            That is a useful suggestion, EvyatarBH.


            Thank you.


            That gets me most of the way there, but users need to put list B items into any cell,

            not just pack them into thenext available column for a row. Also, there is a list C.


            list A = Column Builder (this is working)

            list B = Row Builder (this is working)

            list C = Cell Contents


            How does one detect the cell that's being dragged into ? I don't see how to do this

            without knowing the cell my mouse is over at the time of the drop.


            It is not so hard to get the row (dg.calculateDropIndex(event)),

            but I cannot find any similar facility for detecting the column & thus the cell

            like you can with the itemClick event.

            • 3. Re: Using drag/drop to build data grid rows from multiple lists ?
              Nishant Jha28

              The Component that is represening the cell should Implement IDropInItemRenderer. This will facilitate you with property listData of type BaseListData. listData has properties like rowIndex, columnIndex.

              • 4. Re: Using drag/drop to build data grid rows from multiple lists ?
                WebTrauma Level 1

                Thanks, Nishant. AFAIK, your suggestion will not work.


                Yes, I've got a IDropInItemRenderer-implementing class. That is not the problem.


                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.


                Unless someone chimes in with a 'cell aware' dragDrop solution, I'll post my final code up once I get it all sorted out and cleaned up.

                • 5. Re: Using drag/drop to build data grid rows from multiple lists ?
                  WebTrauma Level 1

                  This does the trick...


                  For my destination grid


                  protected function dg_dragDropHandler(e:DragEvent):void
                  // Dynamically add columns to the grid by dragging them from the new column list
                                  if (e.dragInitiator["id"] == "lNewColumn")
                                      e.preventDefault();    // handle this manually
                                      var Id:Number;
                                      var Name:String;
                                      var numCols:int = e.dragInitiator["selectedItems"]["length"] as int;
                                      for (var i:int=0; i < numCols; i++)
                                          Id = e.dragInitiator["selectedItems"][i]["id"];
                                          Name = e.dragInitiator["selectedItems"][i]["Name"];
                                          addGridColumn(Id, Name);


                  private function addGridColumn( Id:Number, Name:String ):void
                                  var dgc:DataGridColumn;
                                  var cols:Array = dg.columns;
                              // not a duplicate column
                                      dgc = new DataGridColumn(Name);
                                      dgc.headerWordWrap = true;
                                      dgc.itemRenderer=new ClassFactory(MyLovelyItemRenderer);    // unlike mxml, must explicitly cast
                                      dgc.headerText = Name + "\n Message";
                                      dgc.dataField="messageId_" + Id.toString();    // allows split on '_' later to get Id
                                      dg.columns = cols;