Flex Examples » itemEditor http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Using a NumericStepper control as an item editor for a DataGrid control in Flex http://blog.flexexamples.com/2008/05/12/using-a-numericstepper-control-as-an-item-editor-for-a-datagrid-control-in-flex/ http://blog.flexexamples.com/2008/05/12/using-a-numericstepper-control-as-an-item-editor-for-a-datagrid-control-in-flex/#comments Tue, 13 May 2008 06:54:26 +0000 Peter deHaan http://blog.flexexamples.com/2008/05/12/using-a-numericstepper-control-as-an-item-editor-for-a-datagrid-control-in-flex/ The following example shows how you can use a NumericStepper as an item editor for a Flex DataGrid control by setting the itemEditor and editorDataField properties on the DataGridColumn object.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/05/12/using-a-numericstepper-control-as-an-item-editor-for-a-datagrid-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:ArrayCollection id="arrColl"> <mx:source> <mx:Array> [...]]]> The following example shows how you can use a NumericStepper as an item editor for a Flex DataGrid control by setting the itemEditor and editorDataField properties on the DataGridColumn object.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/12/using-a-numericstepper-control-as-an-item-editor-for-a-datagrid-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object label="Student A" score="8" />
                <mx:Object label="Student B" score="4" />
                <mx:Object label="Student C" score="7" />
                <mx:Object label="Student D" score="8" />
                <mx:Object label="Student E" score="2" />
                <mx:Object label="Student F" score="6" />
                <mx:Object label="Student G" score="7" />
                <mx:Object label="Student H" score="7" />
                <mx:Object label="Student I" score="9" />
                <mx:Object label="Student J" score="8" />
                <mx:Object label="Student K" score="4" />
                <mx:Object label="Student L" score="7" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            editable="true"
            rowCount="8">
        <mx:columns>
            <mx:DataGridColumn dataField="label"
                    editable="false" />
            <mx:DataGridColumn dataField="score"
                    editable="true"
                    itemEditor="mx.controls.NumericStepper"
                    editorDataField="value" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

UPDATE: But what if you want to change the properties (such as minimum and maximum) or styles on the NumericStepper item editor? One method is to create a custom component which extends the NumericStepper and override the properties and default styles.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/12/using-a-numericstepper-control-as-an-item-editor-for-a-datagrid-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object label="Student A" score="81" />
                <mx:Object label="Student B" score="42" />
                <mx:Object label="Student C" score="75" />
                <mx:Object label="Student D" score="84" />
                <mx:Object label="Student E" score="24" />
                <mx:Object label="Student F" score="62" />
                <mx:Object label="Student G" score="71" />
                <mx:Object label="Student H" score="77" />
                <mx:Object label="Student I" score="91" />
                <mx:Object label="Student J" score="88" />
                <mx:Object label="Student K" score="44" />
                <mx:Object label="Student L" score="72" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            editable="true"
            rowCount="8">
        <mx:columns>
            <mx:DataGridColumn dataField="label"
                    editable="false" />
            <mx:DataGridColumn dataField="score"
                    editable="true"
                    itemEditor="comps.MyNumericStepper"
                    editorDataField="value" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

comps/MyNumericStepper.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/12/using-a-numericstepper-control-as-an-item-editor-for-a-datagrid-control-in-flex/ -->
<mx:NumericStepper xmlns:mx="http://www.adobe.com/2006/mxml"
        minimum="0"
        maximum="100"
        cornerRadius="0">

</mx:NumericStepper>

View source is enabled in the following example.

You could also define the item renderer using a ClassFactory, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.controls.NumericStepper;

            [Bindable]
            private var numericStepperFac:ClassFactory;

            private function init():void {
                numericStepperFac = new ClassFactory(NumericStepper);
                numericStepperFac.properties = {minimum:0, maximum:100};
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object label="Student A" score="81" />
                <mx:Object label="Student B" score="42" />
                <mx:Object label="Student C" score="75" />
                <mx:Object label="Student D" score="84" />
                <mx:Object label="Student E" score="24" />
                <mx:Object label="Student F" score="62" />
                <mx:Object label="Student G" score="71" />
                <mx:Object label="Student H" score="77" />
                <mx:Object label="Student I" score="91" />
                <mx:Object label="Student J" score="88" />
                <mx:Object label="Student K" score="44" />
                <mx:Object label="Student L" score="72" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            editable="true"
            rowCount="8">
        <mx:columns>
            <mx:DataGridColumn dataField="label"
                    editable="false" />
            <mx:DataGridColumn dataField="score"
                    editable="true"
                    itemEditor="{numericStepperFac}"
                    editorDataField="value" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

Or, you could define an inline item editor using the following code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.controls.NumericStepper;

            [Bindable]
            private var numericStepperFac:ClassFactory;

            private function init():void {
                numericStepperFac = new ClassFactory(NumericStepper);
                numericStepperFac.properties = {minimum:0, maximum:100};
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object label="Student A" score="81" />
                <mx:Object label="Student B" score="42" />
                <mx:Object label="Student C" score="75" />
                <mx:Object label="Student D" score="84" />
                <mx:Object label="Student E" score="24" />
                <mx:Object label="Student F" score="62" />
                <mx:Object label="Student G" score="71" />
                <mx:Object label="Student H" score="77" />
                <mx:Object label="Student I" score="91" />
                <mx:Object label="Student J" score="88" />
                <mx:Object label="Student K" score="44" />
                <mx:Object label="Student L" score="72" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            editable="true"
            rowCount="8">
        <mx:columns>
            <mx:DataGridColumn dataField="label"
                    editable="false" />
            <mx:DataGridColumn dataField="score"
                    editable="true"
                    editorDataField="value">
                <mx:itemEditor>
                    <mx:Component>
                        <mx:NumericStepper minimum="0" maximum="100" />
                    </mx:Component>
                </mx:itemEditor>
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/05/12/using-a-numericstepper-control-as-an-item-editor-for-a-datagrid-control-in-flex/feed/ 7 Using a Flex TextArea control as a drop-in item editor http://blog.flexexamples.com/2007/09/30/using-a-flex-textarea-control-as-a-drop-in-item-editor/ http://blog.flexexamples.com/2007/09/30/using-a-flex-textarea-control-as-a-drop-in-item-editor/#comments Mon, 01 Oct 2007 04:58:39 +0000 Peter deHaan http://blog.flexexamples.com/2007/09/30/using-a-flex-textarea-control-as-a-drop-in-item-editor/ User “Fred” asked a question the other day about using the TextArea as an item editor in an editable, variable line height DataGrid control.

The following example shows how you can use the Flex TextArea control as a drop-in item editor to allow you to easily edit the items in a DataGrid control.

Full [...]]]> User “Fred” asked a question the other day about using the TextArea as an item editor in an editable, variable line height DataGrid control.

The following example shows how you can use the Flex TextArea control as a drop-in item editor to allow you to easily edit the items in a DataGrid control.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/30/using-a-flex-textarea-control-as-a-drop-in-item-editor/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:XML id="itemsXML" source="data/items.xml" />

    <mx:DataGrid id="dataGrid"
            dataProvider="{itemsXML.item}"
            variableRowHeight="true"
            editable="true"
            width="100%"
            height="100%">
        <mx:columns>
            <mx:DataGridColumn id="idColumn"
                    dataField="@id"
                    editable="false"
                    headerText="ID" />
            <mx:DataGridColumn id="descColumnTextInput"
                    dataField="@desc"
                    editable="true"
                    wordWrap="true"
                    headerText="Desc (TextInput)" />
            <mx:DataGridColumn id="descColumnTextArea"
                    dataField="@desc"
                    editable="true"
                    wordWrap="true"
                    itemEditor="mx.controls.TextArea"
                    editorUsesEnterKey="true"
                    headerText="Desc (TextArea)" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

items.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/30/using-a-flex-textarea-control-as-a-drop-in-item-editor/ -->
<items>
    <item id="1" desc="The quick brown fox jumped over the lazy dog." />
    <item id="2" desc="Lorem ipsum dolor sit amet, consectetuer adipiscing elit." />
    <item id="3" desc="Pellentesque nonummy aliquet metus." />
    <item id="4" desc="Nullam enim." />
    <item id="5" desc="Nullam sollicitudin sodales diam." />
    <item id="6" desc="Praesent quis tellus vel erat tristique placerat." />
    <item id="7" desc="Sed egestas, enim a convallis auctor, nisl tellus tincidunt nibh, vitae tempus mauris risus at arcu." />
    <item id="8" desc="Suspendisse laoreet sem eget ipsum porta consequat." />
    <item id="9" desc="Ut imperdiet felis quis orci." />
    <item id="10" desc="Phasellus tempus ante eu nisl." />
    <item id="11" desc="Donec velit sem, rutrum ac, bibendum sed, mattis ac, odio." />
    <item id="12" desc="Fusce mauris turpis, vehicula nec, mattis et, dapibus quis, arcu." />
    <item id="13" desc="Morbi tincidunt volutpat justo." />
    <item id="14" desc="Nam urna." />
    <item id="15" desc="Mauris est dui, aliquet at, venenatis tempus, eleifend a, pede." />
    <item id="16" desc="Vestibulum porttitor arcu sit amet nulla." />
    <item id="17" desc="Nulla vitae sapien." />
</items>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/09/30/using-a-flex-textarea-control-as-a-drop-in-item-editor/feed/ 19