February 18th, 2008 by Kyle
Tags: , , , , ,
Posted in: Flex


Here is a sample that came about as usual, from working on an issue with a customer. I found I didn’t have a good example of a combobox itemEditor. This sample came about when moving from using a combobox as an inline editor to moving to a combobox within a custom component as an editor. Wrapping the combobox in a VBox within the custom component caused some errors and undesirable behavior. In order to wire up data and tabbing/focus behavior you have to remember you component should implement IDropInListItemRenderer and IFocusManagerComponent. See the following sample code and running sample:

App:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:XML id="xml" source="weather.xml"/>
    <mx:DataGrid id="myDatagrid" dataProvider="{xml.city}"
        variableRowHeight="true" editable="true" rowHeight="50"
        width="300" height="300">
        <mx:columns>
        <mx:DataGridColumn dataField="Location"/>
        <mx:DataGridColumn dataField="Climate" editable="true" editorDataField="value">
            <mx:itemEditor>
                <mx:Component>
                    <mx:ComboBox editable="true">
                        <mx:dataProvider>
                            <mx:String>Mild</mx:String>
                            <mx:String>Hot</mx:String>
                            <mx:String>Foggy</mx:String>
                            <mx:String>Rainy</mx:String>
                            <mx:String>Snow</mx:String>
                        </mx:dataProvider>
                    </mx:ComboBox>
                </mx:Component>
            </mx:itemEditor>
        </mx:DataGridColumn>
        <mx:DataGridColumn dataField="CloudCoverPercent" editable="true" editorDataField="value"
            itemEditor="CloudCover"/>
    </mx:columns>
    </mx:DataGrid>
</mx:Application>
 

Read the rest of this post»



14 Comments »

Here is another good datagrid itemrender that I refer to when starting on datagrid renderer issues for customers.
It demonstrates how to create an itemEditor that is based on VBox and has child components (in this case a checkbox) and demonstrates how to implement the IDropInListItemRenderer and IFocusManagerComponent interfaces.
The sample also demonstrates how to add a listener to the underlying dataprovider arraycollection to detect change events and show what data has changed when edits are committed to the collection.

Here is the code for the application:

<mx:application xmlns:mx="http://www.adobe.com/2006/mxml" creationcomplete="init()">
    <mx:script>
        <!–[CDATA[
            import mx.events.CollectionEvent;
            import mx.events.DataGridEventReason;
            import mx.collections.ArrayCollection;
            import mx.events.DataGridEvent;
            import mx.events.ListEvent;

            [Bindable]–>            private var myAC:ArrayCollection = new ArrayCollection([
                {id:89, Contact: ‘Bob Jones’, FollowUp: true },
                {id:5, Contact: ‘Jane Smith’, FollowUp: true },
                {id:7, Contact: ‘Doug Johnson’, FollowUp: false },
                {id:15, Contact: ‘John Jackson’, FollowUp: true },
                {id:21, Contact: ‘Christina Coenraets’, FollowUp: true },
                {id:4, Contact: ‘Joanne Wall’, FollowUp: false },
                {id:461, Contact: ‘Maurice Smith’, FollowUp: false },
                {id:35, Contact: ‘Lorraine Barnes’, FollowUp: true },
                {id:61, Contact: ‘The Dude’, FollowUp: true },
                {id:56, Contact: ‘Abe Rockaway’, FollowUp: true }

            ]);

            private function init():void{
                myAC.addEventListener(CollectionEvent.COLLECTION_CHANGE, onChange);
            }

            private function onChange(event:CollectionEvent):void{
                for (var i:int=0; i < event.items.length;i++){
                    var obj:Object=event.items[i].source;
                     for (var p:String in obj) {
                            if(p!="mx_internal_uid"){
                                cellInfo.text += "\n";
                                if(event.items[i].property==p){cellInfo.text +="*"}
                                 cellInfo.text += p+": " + obj[p];
                            }
                        }
                }
            }

        ]]>
    </mx:script>
    <mx:datagrid id="myGrid">
        dataProvider="{myAC}" editable="true" >
        <mx:columns>
            <mx:datagridcolumn datafield="Contact" width="150">
            <mx:datagridcolumn datafield="id" width="150" editable="false">
            <mx:datagridcolumn datafield="FollowUp">
                width="150"
                headerText="Follow Up?"
                itemRenderer="DGCheckBoxEditor" rendererIsEditor="true"
                editorDataField="cbSelected"/>
        </mx:datagridcolumn>
    </mx:datagridcolumn>  

    <mx:textarea id="cellInfo" width="300" height="150">    

</mx:textarea>
</mx:datagridcolumn></mx:columns></mx:datagrid></mx:application>

Read the rest of this post»



5 Comments »