In Flex, how to drag a component into a column of DataGrid (not the whole DataGrid)?

Posted by Yousui on Stack Overflow See other posts from Stack Overflow or by Yousui
Published on 2010-05-18T09:06:02Z Indexed on 2010/05/18 9:10 UTC
Read the original article Hit count: 282

Filed under:
|
|

Hi guys,

I have a custom component:

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Declarations>
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            [Bindable]
            public var label:String = "don't know";
            [Bindable]
            public var imageName:String = "x.gif";
        ]]>
    </fx:Script>
    <s:HGroup paddingLeft="8" paddingTop="8" paddingRight="8" paddingBottom="8">
        <mx:Image id="img" source="assets/{imageName}" />
        <s:Label text="{label}"/>
    </s:HGroup>
</s:Group>

and a custom render, which will be used in my DataGrid:

<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                          xmlns:s="library://ns.adobe.com/flex/spark" 
                          xmlns:mx="library://ns.adobe.com/flex/mx" 
                          focusEnabled="true" xmlns:components="components.*">
    <s:VGroup>
        <components:Person label="{dataGridListData.label}">
        </components:Person>
    </s:VGroup>
</s:MXDataGridItemRenderer>

This is my application:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:services="services.*">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.controls.Image;
            import mx.rpc.events.ResultEvent;
            import mx.utils.ArrayUtil;

        ]]>
    </fx:Script>
    <fx:Declarations>
        <fx:XMLList id="employees">
            <employee>
                <name>Christina Coenraets</name>
                <phone>555-219-2270</phone>
                <email>[email protected]</email>
                <active>true</active>
                <image>assets/001.png</image>
            </employee>
            <employee>
                <name>Joanne Wall</name>
                <phone>555-219-2012</phone>
                <email>[email protected]</email>
                <active>true</active>
                <image>assets/002.png</image>
            </employee>
            <employee>
                <name>Maurice Smith</name>
                <phone>555-219-2012</phone>
                <email>[email protected]</email>
                <active>false</active>
                <image>assets/003.png</image>
            </employee>
            <employee>
                <name>Mary Jones</name>
                <phone>555-219-2000</phone>
                <email>[email protected]</email>
                <active>true</active>
                <image>assets/004.png</image>
            </employee>
        </fx:XMLList>
    </fx:Declarations>
    <s:HGroup>

        <mx:DataGrid dataProvider="{employees}" width="100%" dropEnabled="true">
            <mx:columns>
                <mx:DataGridColumn headerText="Employee Name" dataField="name"/>
                <mx:DataGridColumn headerText="Email" dataField="email"/>
                <mx:DataGridColumn headerText="Image" dataField="image" itemRenderer="renderers.render1"/>
            </mx:columns>
        </mx:DataGrid>

        <s:List dragEnabled="true" dragMoveEnabled="false">
            <s:dataProvider>
                <s:ArrayCollection>
                    <fx:String>aaa</fx:String>
                    <fx:String>bbb</fx:String>
                    <fx:String>ccc</fx:String>
                    <fx:String>ddd</fx:String>
                </s:ArrayCollection>
            </s:dataProvider>
        </s:List>
    </s:HGroup>

</s:Application>

Now what I want to do is let the user drag an one or more item from the left List component and drop at the third column of the DataGrid, then using the dragged data to create another <components:Person /> object. So in the final result, maybe the first line contains just one <components:Person /> object at the third column, the second line contains two <components:Person /> object at the third column and so on.

Can this be implemented in Flex? How? Great thanks.

© Stack Overflow or respective owner

Related posts about flex

Related posts about datagrid