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><mx :D ataGrid id="myDatagrid" dataProvider="{xml.city}"
        variableRowHeight="true" editable="true" rowHeight="50"
        width="300" height="300">
        </mx><mx :columns>
        <mx :D ataGridColumn dataField="Location"/>
        </mx><mx :D ataGridColumn dataField="Climate" editable="true" editorDataField="value">
            </mx><mx :itemEditor>
                </mx><mx :Component>
                    </mx><mx :ComboBox editable="true">
                        </mx><mx :dataProvider>
                            </mx><mx :String>Mild</mx>
                            <mx :String>Hot</mx>
                            <mx :String>Foggy</mx>
                            <mx :String>Rainy</mx>
                            <mx :String>Snow</mx>
                       
                   
               
           
       
        <mx :D ataGridColumn dataField="CloudCoverPercent" editable="true" editorDataField="value"
            itemEditor="CloudCover"/>
   
   

 

Read the rest of this post»



24 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><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>
    <mx :datagrid id="myGrid">
        dataProvider="{myAC}" editable="true" >
        </mx><mx :columns>
            </mx><mx :datagridcolumn datafield="Contact" width="150">
            </mx><mx :datagridcolumn datafield="id" width="150" editable="false">
            </mx><mx :datagridcolumn datafield="FollowUp">
                width="150"
                headerText="Follow Up?"
                itemRenderer="DGCheckBoxEditor" rendererIsEditor="true"
                editorDataField="cbSelected"/>
        </mx>
     

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

</mx>
 

Read the rest of this post»



8 Comments »