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

    Show ItemRenderer only when editing (onclick)

      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.

           

          http://weblogs.macromedia.com/pent/archives/2008/05/itemeditors_-_p.html

           

          HTH.

          • 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:

             

             

            DataGrid.mxml

            <?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"
            xmlns="*"
            width="100%" height="100%">
            <mx:Script>
              <![CDATA[
              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 {
                navigateToURL(request);
              }catch (e:Error) {
                // UNFORTUNATELY, THE ERROR IS THRU INTERNET EXPLORER AND IS NOT CAUGHT HERE
                trace("error: " + e)
                Alert.show("There was an error in opening the requested file!")
              }
              }]]>
            </mx:Script>

            <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:HBox>
              <mx:DataGrid id="settingsDataGrid"
              height="100%" width="100%"
              editable="false"
              horizontalScrollPolicy="off">
              <mx:columns>
                <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"/>
              </mx:columns>
              </mx:DataGrid>
            </mx:VBox>
            </mx:Canvas>

             

             

            DGNumericStepperEditor.mxml

             

            <?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">
                <mx:Script>
                    <![CDATA[
                     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 {
                bookNS.setFocus();
                        }
                       
               [Bindable]
               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:Script>
            <mx:NumericStepper id="bookNS" horizontalCenter="center" maximum="18" width="100%"
                    click="nsBook = bookNS.value" />
            </mx:VBox>
             


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