Flex Drag and Drop - apache-flex

I am creating an application that will allow users to model configuration information by allowing them to Drag and Drop objects from a Flex Tree into a DataGrid.
I know that both the Tree and DataGrid both support Drag and Drop quite well.
My problem is that I want users to drop items from the Tree into a particular Datagrid cell. I think standard drop events into the Datagrid try to fill the whole datagrid row by default. This is not what I want, I want to drop components into a cell only.
I was thinking that each time an object is dropped onto the datagrid you would have to:
- Get the cell location (x,y) the object was dropped into
- Get all the existing cell objects and rebuild that datagrid row from scratch(dynamically) adding the new dropped object to the row in its correct position. Thus giving the illusion that you can drop into a cell - its a bit of a fudge but I think it could work :)
Any feedback would be great.
Thanks in advance
Mike

Turn drag and drop off for the datagrid.
Write a custom renderer which listens to itself for the DragEnter / DragDrop events. In the handler for the drop event, add the item(s) to the data (at the variable referenced by that column).
If your renderer is bound to the item, it will now update.
((Note that isn't best practice, you'd want to dispatch an event containing the renderer's data item, the variable it was representing and the item(s) dropped, and then manipulate the dataprovider outside of the renderer))

Related

Highlight NSTableView rows as if right-clicked

I'd like to make an NSTableView highlight its selected rows as if one was right-clicked.
When a selected row is right-clicked (and if the table view implements a menu), the view draws a rectangle at the perimeter of each block of selected rows. This is the default behaviour. See below:
I want the table to do that outside of the context of a right-click. FYI, this is to implement a custom dragging Destination Feedback Style to make clear that some action will be applied on the selected rows.
I can programmatically select rows, but not make them highlight in this way.
Still, Appkit must have some method for that since it does it upon right-click.
I could find a solution involving subclassing NSTableView or NSTableRowView, but there may be a simple solution.
Thanks.

What's the best practice for generating spark radio buttons?

I have a list of radio buttons, which I want to be able to both set the value of programmatically and for the user to set the value of manually.
I have a small list of data items which I want to display as options in a list of radio buttons. The objects are stored in a model object, as is the currently selected item. The currently selected item is bound to the radiobutton group. The radio buttons are generated using a spark list.
I am having a problem setting the list programatically - whenever I set the current value on the radiobutton group to the first value in the list, all of the radio buttons are cleared, where the first one should be selected. I when checking in the debugger, I found the likely reason - there are two radiobuttons in the group that point to the same value, one of which isn't showing. My best guess is that the list control has created an extra item renderer which it is holding on to in case it needs to scroll the list.
Is there a way to create radioButtons based on an ArrayCollection without using a list? Failing that, is it possible to prevent the list from generating the extra item?
Use a DataGroup with a dataProvider (an ArrayList of objects holding data) with a custom item renderer that creates the radiobutton that you need. Add proper bindings of the data object to the radiobutton (maybe even do 2 way binding for quick saving).
In the end, I gave spark best practices the finger and used a repeater, which created the correct number of radioButtons with no extras. It may be slow, but slow iteration over a set of less than ten items is O(I don't care).

how to loop over a datagrids rows in flex

I have a DataGrid which contains a DataGridColumn with a textinput and DataGridColumn with a Button.
The DataGrid is bound to some XML which displays values in the text box.
When the button for a row is clicked I need to get the value out of the text box and save it into the relevant XML node.
My solution was just to pass the id of the row to the button click event then loop over the rows until I find the id then just grab the text box value. Simple.
However the only advice I can find on looping over the rows is via the underlying dataProvider, which is nonsense as the two aren't the same thing.
Is this even possible? or is there a better way?
NOTE I would prefer not re-writing the markup, unless I have to.
Thanks
You are probably using an itemRenderer for your DataGridColumn to show the textBox (aka, TextInput component). I suggest that you dispatch a custom event out of the TextInput itemRenderer when you have a TextInput.dataChange event (or some other TextInput.Event that suits when you are ready to save the value).
http://livedocs.adobe.com/flex/3/langref/mx/controls/TextInput.html
Please remember that you need to bubble this event handling outside of the itemRenderer (e.g., the DataGrid) -- itemRenderers don't handle events well.
Also, one reason that a button to save your TextInput value is not a good idea, is because they are both itemRenderers, and it is hard to communicate between itemRenderers -- it is hard because Adobe deems it unclean code.
http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html
Also, this is another solution that changes the dataProvider for a ComboBox (in your case, it's a TextInput instead of ComboBox):
http://www.switchonthecode.com/tutorials/simple-datagrid-item-editor-in-flex
listData.rowIndex from the itemRenderer returns the current row index. You can read it from the click handler as:
private function clickHandler(event:MouseEvent):void
{
var listData:BaseListData = IDropInListItemRenderer(event.target).listData;
var clickedRowIndex:Number = listData.rowIndex;
}

Flex ComboBox user choice reset

To be more descriptive here's a live example:
http://interklub.biz/CTPonLine.html
In last column there's a ComboBox with some values.
When user choose an option in ComboBox from first row and then scroll down the first choice disapears (comes back to default state).
There's something more strange, earlier I've tried to apply a one more ComboBox in additional column, with highly dynamic values (completly different for different rows), but with after same action (scroll down and then scroll down) values dataProviders from different ComboBox were switch.
It looks like you're not initializing your item renderer properly--when the renderer is reused, it's keeping its old value rather than updating from your data.
You should be able to resolve this by doing one of the following:
binding the item renderer's selectedValue to some property of its data element
overriding set data() to update the control for the current data
acting on the dataChange event and updating there
See Adobe's Working with Item Renderers for more.

Advanced DataGrid Flex 3 - ItemRenderer and Tree display

I am using Advanced DataGrid of Flex 3 with hierarchical data. The itemRenderer is a TextInput which accepts numbers. When I enter data into the given field and click the corresponding expand tree icon for the row, I want the amount entered in tree node should get cascaded to its child rows. But I found the nature of advanced DataGrid erroneous.
When I enter data and click on tree icon, the data is not populated in child windows unless i wont take the focus out from the editing control.
I tried using itemEditEnd, itemFocusOut etc but of no use. I have to explicitly click on any of the other columns and then expand tree.
Am I making any mistake anywhere?
I found solution to my problem, its bit ugly but it works. I had to register two events for textinput as follows
addEventListener(FocusEvent.MOUSE_FOCUS_CHANGE, allocateAmount);
addEventListener(FocusEvent.KEY_FOCUS_CHANGE, allocateAmount);
and then by using IViewCursor I could able to update data.

Resources