1 person found this helpful
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...
That is a useful suggestion, EvyatarBH.
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.
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.
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.
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 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"];
private function addGridColumn( Id:Number, Name:String ):void
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;