2 Replies Latest reply on Apr 8, 2009 12:51 PM by eball

    Show ItemRenderer only when editing (onclick)

    Level 1

      I have a datagrid, that after the user has logged in becomes editable.

      I would like that when the user clicks into a given field, say a date or number field, an itemRenderer that corresponds to the type of date appear.


      Example: if i click into the date field, i get a datechooser, or a numericStepper when i click into a number based field.

      Then after I click out of that field, it just shows the value, no longer the itemRenderer.


      FYI, I am using Pure MVC, so this logic is in a mediator '.as' class.

      Please help.

        • 1. Re: Show ItemRenderer only when editing (onclick)
          Cesare Rocchi Level 2

          when editing the itemRenderer becomes an itemEditor.


          here is a good article by Peter Ent:


          You just need to port it in mvc.





          • 2. Re: Show ItemRenderer only when editing (onclick)
            Level 1

            I am getting the itemEditor to work mostly now.


            problem i am having is, after i switch the datagrid to become editable and then click into a given field (ie: itemEditor as a numeric stepper), if i just click in and out of the field, but do not make any changes to it, the data in the field either becomes "NaN" (in the case of a numeric stepper editor) or just blank (in the case of a combo box editor)


            Here is my code:




            <?xml version="1.0" encoding="utf-8"?>
            PureMVC AS3 Demo - Flex Application Skeleton
            Copyright (c) 2007 Daniele Ugoletti <daniele.ugoletti@puremvc.org>
            Your reuse is governed by the Creative Commons Attribution 3.0 License
            <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
            width="100%" height="100%">
              import com.*;
              import flash.events.Event;
              import mx.controls.DataGrid;
              import mx.controls.dataGridClasses.DataGridColumn;
              import mx.controls.Alert;
              import flash.net.URLRequest;
              import mx.controls.NumericStepper;
              import mx.controls.DateChooser;
              import mx.controls.CheckBox;
              import mx.controls.ComboBox;

              public static const CREATION_COMPLETE: String = "myCreationComplete";
              public static const LOAD_SETTINGS: String = "load settings";
              private function dateFormat(item:Object, column:DataGridColumn):String
              return df.format(item.date);
              public function onLinkBtnClick(request:URLRequest):void
              //trace("urlRequest: "+request)
              try {
              }catch (e:Error) {
                trace("error: " + e)
                Alert.show("There was an error in opening the requested file!")

            <mx:DateFormatter id="df" formatString="MM/DD/YY"/>
            <mx:VBox width="100%" height="100%" verticalGap="0" >
              <mx:HBox id="cbHBox" width="100%" height="0" fontWeight="bold" horizontalAlign="right" visible="false" >
              <mx:CheckBox id="selectAllCB" label="Select All / None" labelPlacement="left" fontWeight="bold" color="0xFFFFFF" />
              <mx:Spacer width="{colSelected.width/2 + 2}" />
              <mx:DataGrid id="settingsDataGrid"
              height="100%" width="100%"
                <mx:DataGridColumn width="24" headerText="Number" dataField="number" resizable="false"/>
                <mx:DataGridColumn width="120" headerText="Title" dataField="title" />
                <mx:DataGridColumn width="20" headerText="Date" dataField="date" labelFunction="dateFormat" editorDataField="dfDate" itemEditor="com.view.itemRenderers.DGDateFieldEditor"  resizable="false" />
                <mx:DataGridColumn width="12" headerText="Book" dataField="book" editorDataField="nsBook" itemEditor="com.view.itemRenderers.DGNumericStepperEditor" resizable="false" />
                <mx:DataGridColumn id="colType" width="14" headerText="Type" dataField="type" editorDataField="cbType" itemEditor="com.view.itemRenderers.DGTypeComboBoxEditor" resizable="false" />
                <mx:DataGridColumn width="10" textAlign="center" headerText="Link" sortable="false" draggable="false" resizable="false"
                dataField="link" itemRenderer="com.view.itemRenderers.DGLinkButtonEditor"
                rendererIsEditor="true" editable="false"/>
                <!--<mx:DataGridColumn id="colSelected" width="46" headerText="Select" visible="false" editable="false" itemRenderer="{CheckBoxRenderer}"  editorDataField="selected" />-->
                <mx:DataGridColumn id="colSelected" width="46" textAlign="center" visible="false" sortable="false" draggable="false" resizable="false"
                headerText="Select" dataField="sel" itemRenderer="com.view.itemRenderers.DGCheckBoxEditor"
                rendererIsEditor="true" editorDataField="cbSelected"/>





            <?xml version="1.0"?>
            <!-- itemRenderers\dataGrid\myComponents\EditorDGCheckBox.mxml -->
            <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
            implements="mx.controls.listClasses.IDropInListItemRenderer,mx.managers.IFocusManagerComp onent"
            horizontalAlign="center" verticalAlign="middle">
                     import mx.controls.listClasses.ListData;
               import mx.controls.dataGridClasses.DataGridListData;
               import mx.controls.listClasses.BaseListData;
               import mx.controls.dataGridClasses.DataGridItemRenderer
               import mx.events.FlexEvent;
               import mx.controls.Alert
               private var _listData:DataGridListData;         
                        // Define a property for returning the new value to the cell.
                        public var nsBook:Number;           
                        // Implement the drawFocus() method for the VBox.
                        override public function drawFocus(draw:Boolean):void {
               override public function set data(value:Object):void{
                super.data = value;
                bookNS.value = data[_listData.dataField];
               override public function get data():Object {
                return super.data;
                  public function get listData():BaseListData
                return _listData;
               public function set listData(value:BaseListData):void
                _listData = DataGridListData(value);

            <mx:NumericStepper id="bookNS" horizontalCenter="center" maximum="18" width="100%"
                    click="nsBook = bookNS.value" />

            PLEASE HELP, getting these itemRenderers and itemEditors to work properly is DRIVING ME CRAZY!!!