2010-04-27

Copy operation between List / DataGrid

One of the great things about Flex is how much is available out-of-box. One feature that is provided out-of-box is the ability to easily drag'n'drag data from one control to another. One great example of this is to drag'n'drop data from a source List control to a destination List control and vice-versa. A example use case is where you are allowing the user to assign "users" to a "group" from an available list of "users".

This is code to implement this functionality is as follows:

[List id="availUsers" dragEnabled="true" dragMoveEnabled="true" dropEnabled="true" dataProvider="{availbleUsers}"]

[List id="assignUsers" dragEnabled="true" dragMoveEnabled="true" dropEnabled="true" dataProvider="{assignedUsers}"]

Pretty simple eh? Basically what this code is saying is that both List controls are drag sources (dragEnabled="true"), that both are drop destinations (dropEnabled="true") and that when data is dragged from the control, that the data should be removed (dragMoveEnabled="true") - since it will be moved to the destination.

In some cases, as it happened to me just yesterday, you don't want the data to go back and forth between the two controls. In my case, I need the available list of users to remain as-is and that you could assign a user multiple times to the destination list.

To accomplish this, you just need to make the following changes:

[List id="availUsers" dragEnabled="true" dragMoveEnabled="false" dropEnabled="false" dataProvider="{availbleUsers}"]

[List id="assignUsers" dragEnabled="false" dragMoveEnabled="true" dropEnabled="true" dataProvider="{assignedUsers}"]

With the changes, this will allow data to be copied from the available users list (dragMoveEnabled="false") to the assigned users and you can't go back (dragEnabled="false").

No comments: