Use a NumericStepper control to edit the Price column of a DataGrid control. : NumericStepper « Components « Flex






Use a NumericStepper control to edit the Price column of a DataGrid control.

Use a NumericStepper control to edit the Price column of a DataGrid control.
      
<!--
Code from Flex 4 Documentation "Using Adobe Flex 4".

This user guide is licensed for use under the terms of the Creative Commons Attribution 
Non-Commercial 3.0 License. 

This License allows users to copy, distribute, and transmit the user guide for noncommercial 
purposes only so long as 
  (1) proper attribution to Adobe is given as the owner of the user guide; and 
  (2) any reuse or distribution of the user guide contains a notice that use of the user guide is governed by these terms. 
The best way to provide notice is to include the following link. 
To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/

-->



<!-- itemRenderers\events\BeginEditEventAccessEditor.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Script> 
         
        import mx.events.DataGridEvent; 
        import mx.controls.NumericStepper; 
        import mx.collections.ArrayCollection; 
        import mx.controls.listClasses.IDropInListItemRenderer; 
        [Bindable] 
        private var myDP:ArrayCollection = new ArrayCollection([ 
            {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99}, 
            {Artist:'Pavement', Album:'Crooked Rain, Crooked Rain', Price:10.99}, 
            {Artist:'Pavement', Album:'Wowee Zowee', Price:12.99}, 
            {Artist:'Pavement', Album:'Brighten the Corners', Price:11.99}, 
            {Artist:'Pavement', Album:'Terror Twilight', Price:11.99} 
        ]); 
        // Handle the itemEditBegin event. 
        private function modifyEditedData(event:DataGridEvent):void { 
            // Get the name of the column being editted. 
            var colName:String = myDataGrid.columns[event.columnIndex].dataField; 
            if(colName=="Price"){ 
                // Handle the event here. 
                event.preventDefault(); 
                // Creates an item editor. 
                myDataGrid.createItemEditor(event.columnIndex,event.rowIndex); 
                // All item editors must implement the IDropInListItemRenderer interface 
                // and the listData property. 
                // Initialize the listData property of the editor. 
                IDropInListItemRenderer(myDataGrid.itemEditorInstance).listData = 
                IDropInListItemRenderer(myDataGrid.editedItemRenderer).listData; 
                // Copy the cell value to the NumericStepper control. 
                myDataGrid.itemEditorInstance.data = myDataGrid.editedItemRenderer.data; 
                // Add 20 percent to the current price. 
                NumericStepper(myDataGrid.itemEditorInstance).value +=0.2 * NumericStepper(myDataGrid.itemEditorInstance).value; 
            } 
        } 
      
    </fx:Script>
    <mx:DataGrid id="myDataGrid" dataProvider="{myDP}"
        editable="true" itemEditBegin="modifyEditedData(event);" rowHeight="60">
        <mx:columns>
            <mx:DataGridColumn dataField="Artist" />
            <mx:DataGridColumn dataField="Album" width="130" />
            <mx:DataGridColumn dataField="Price"
                editorDataField="value">
                <mx:itemEditor>
                    <fx:Component>
                        <mx:NumericStepper stepSize="0.01" maximum="500" />
                    </fx:Component>
                </mx:itemEditor>
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>
</s:Application>

   
    
    
    
    
    
  








Related examples in the same category

1.Use NumericStepper as itemEditor for DataGridUse NumericStepper as itemEditor for DataGrid
2.Use NumericStepper to choose valueUse NumericStepper to choose value
3.NumericStepper with NumericStepper with <mx:NumericStepper>
4.Use NumericStepper as item editor for a column of DataGrid controlUse NumericStepper as item editor for a column of DataGrid control
5.Use NumericStepper control as an inline item editorUse NumericStepper control as an inline item editor
6.Use a NumericStepper control to define a custom item editor as an MXML componentUse a NumericStepper control to define a custom item editor as an MXML component
7.NumericStepper minimum, maximum, stepSizeNumericStepper minimum, maximum, stepSize
8.Use NumericStepper to set selected index for ListUse NumericStepper to set selected index for List
9.Use NumericStepper to control the size of a PanelUse NumericStepper to control the size of a Panel
10.Get value from NumericStepper and TextInputGet value from NumericStepper and TextInput
11.Contact Manager Panel with TextInput, NumericStepper, CheckBox, ColorPickerContact Manager Panel with TextInput, NumericStepper, CheckBox, ColorPicker
12.List NumericStepper cell rendererList NumericStepper cell renderer
13.Bind NumericStepper value to LabelBind NumericStepper value to Label
14.Specify the NumericStepper control as the item editor for a column of the DataGrid controlSpecify the NumericStepper control as the item editor for a column of the DataGrid control
15.Use NumericStepper, DateField, and CheckBox controls as the drop-in item renderers and item editors for a DataGrid control:Use NumericStepper, DateField, and CheckBox controls as the drop-in item renderers and item editors for a DataGrid control:
16.Inline NumericStepperInline NumericStepper
17.Creating a simple inline item rendererCreating a simple inline item renderer
18.Inline NumericStepper RendererInline NumericStepper Renderer
19.Drop In NumericStepper item rendererDrop In NumericStepper item renderer