Give us a call 203-379-0773
Check out our new training course on AngularJS for Flex Developers

Using the Flextras AutoComplete as an ItemEditor

One of our future customers was playing around with the developer edition of the Flextras AutoCompleteComboBox and asked if the AutoCompleteComboBox could be used as an itemEditor inside a DataGrid. I had not tried it before, but I thought I'd create a quick example for him and everyone else.

First you need a dataProvider, and I grabbed some names from Smallville, a TV series about Young Superman:

public var myAC : ArrayCollection = new ArrayCollection([
    {firstName:'Jeffry',lastName:'Houser',id:1, company:'DotComIt'},
    {firstName:'Clark',lastName:'Kent',id:2, company:'Daily Planet'},
    {firstName:'Jimmy',lastName:'Olsen',id:3, company:'Daily Planet'},
    {firstName:'Chloe',lastName:'Sullivan',id:3, company:'Isis Foundation'},
    {firstName:'Lana',lastName:'Lang',id:3, company:'Isis Foundation'},
    {firstName:'Lex',lastName:'Luthor',id:3, company:'LuthorCorp'},
]);

Then add in a DataGrid:

<mx:DataGrid dataProvider="{myAC}" editable="true" itemEditEnd="onItemEditEnd(event)">
</mx:DataGrid>

Any DataGrid needs some columns, so we add in this column:

<mx:DataGridColumn width="150" editorDataField="selectedItem" >
    <mx:itemRenderer>
        <mx:Component>
            <mx:Label text="{data.company}" />
        </mx:Component>
    </mx:itemRenderer>
</mx:DataGridColumn>

The DataGrid has an itemRenderer which displays the company. In theory we could just use the dataField property, but I implemented it using an itemRenderer.

Lets add in an AutoCompleteComboBox itemEditor. For this sample, I used an in-line itemRenderer:

<mx:itemEditor>
    <mx:Component>
        <flextras:AutoCompleteComboBox dataChange="onDataChange()"
            dataProvider="{companyList}" autoCompleteEnabled="true" labelField="company" valueField="company">

            <mx:Script>
                <![CDATA[
                    import mx.collections.ArrayCollection;
                    [Bindable]
                    public var companyList : ArrayCollection = new ArrayCollection([
                            {company:'Daily Planet'},
                            {company:'DotComIt'},
                            {company:'Isis Foundation'},
                            {company:'LuthorCorp'}
                    ]);

                    public function onDataChange():void{
                        this.selectedValue = data.company;
                    }
                                            
        
                ]]>

            </mx:Script>
        </flextras:AutoCompleteComboBox>
    </mx:Component>
</mx:itemEditor>

It's a big chunk of code here, so bear with me. The top level component is the Flextras AutoCompleteComboBox. AutoCompleteEnabled is true. The labelField and valueField are set to company. valueField relates to the selectedValue functionality of our AutoCompleteComboBox. It makes it easy to set the value based on data in your dataProvider's objects without having to loop and find the index yourself.

There is a mini dataProvider defined in the AutoComplete, which contains the possibly values that can be chosen for the company property of our objects. In the onDataChange event, we reset the selectedValue. And it just works.

Here is a link to the source code, or a full size swf. Or you can play below:

What sample can I build that will help turn you into a customer?

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)