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»




27 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><mx:datagridcolumn datafield="id" width="150" editable="false">
            </mx:datagridcolumn><mx:datagridcolumn datafield="FollowUp">
                width="150"
                headerText="Follow Up?"
                itemRenderer="DGCheckBoxEditor" rendererIsEditor="true"
                editorDataField="cbSelected"/>
        </mx:datagridcolumn>
     

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

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

Read the rest of this post»




9 Comments »

I had a customer ask how they could use a button itemRenderer in a tile list, have the buttons toggle, and keep track of all the toggled buttons so one could easily clear all the toggled buttons. Here is what I came up with:

The key to this is that if your TileList has a dataprovider that is an array collection, within an itemRenderer, each item’s BaseListData will have a UUID.
If you extend the Tilelist and add a public member that is an arrayCollection that is used to contain all the UUIDs of toggled buttons, then management of those toggled buttons become quite easy.

Here is my simple extension to TileList:

< ?xml version="1.0" encoding="utf-8"?>
<mx:tilelist xmlns:mx="http://www.adobe.com/2006/mxml"
    initialize="acToggledButtons = new ArrayCollection()">

    <mx:script>
        < ![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            public var acToggledButtons:ArrayCollection;
           
            public function removeAll():void{
                acToggledButtons.removeAll();
                this.invalidateList();
            }
        ]]>
    </mx:script>
</mx:tilelist>
 

Read the rest of this post»




2 Comments »

I recently had a request from a customer to demonstrate how a RadioButton in a DataGrid ItemRenderer could select and entire row and indicate that a row is selected. I also had a notion to put code on my blog that demonstrated a simple ItemRenderer that implemented mx.controls.listClasses.IDropInListItemRenderer since that allows you to access data and datagrid properties easily. I seem to often be looking around for a simple example to use as a starting point for many ItemRenderer examples I produce, but can never find a “template” starting point. This entry should take care of both these things.
Read the rest of this post»




12 Comments »