7 Replies Latest reply on Dec 13, 2011 7:00 AM by Janaka1234

    Datefield as Item renderer problem

    Jason&Laura
      I am having problems with the datefield while using it in a renderer. If you click the text area of the datefield to bring up the datechooser everything works, if you click the datefield icon the date is not bound properly.

      Try out the code below and you will see what I am talking about. Any idea what im doing wrong?

      ///////////////////////////////////////////// dateRenderer.mxml ////////////////////////////////////////////////////
      <?xml version="1.0" encoding="utf-8"?>
      <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml"
      creationComplete="{newDate = data.Date}">

      <mx:Script>
      <![CDATA[
      import mx.events.DataGridEvent;
      import mx.binding.utils.ChangeWatcher;
      import mx.formatters.DateFormatter;
      // Define a property for returning the new value to the cell.
      [Bindable]
      public var newDate:Date;

      private var df:DateFormatter = new DateFormatter();

      private function test(event:Event):void {
      trace(df.format(dateFieldTI.selectedDate));
      newDate= new Date(dateFieldTI.text);
      this.dispatchEvent(new DataGridEvent(DataGridEvent.ITEM_EDIT_END, true, false, 0, "newDate", -1, null, this));
      }

      ]]>
      </mx:Script>

      <mx:DateField id="dateFieldTI"
      showToday="false"
      selectedDate="{newDate}"
      text="{df.format(newDate)}"
      click=""
      change="test(event)"/>

      </mx:VBox>
      /////////////////////////////////////////// dateRenderer.mxml File///////////////////////////////////////////////////////

      /////////////////////////////////////////////// Begin application ///////////////////////////////////////////////////
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
      height="700" width="700">

      <mx:Script>
      <![CDATA[
      import mx.collections.ArrayCollection;

      [Bindable]
      private var initDG:ArrayCollection = new ArrayCollection([
      {Date: new Date("3/14/2007")},
      {Date: new Date("3/14/2007")}]);

      [Bindable]
      public var displayedDate:String;

      private function getDate():void {
      displayedDate = initDG[0].Date;
      }
      ]]>
      </mx:Script>

      <mx:DataGrid id="myDG"
      width="500" height="250"
      dataProvider="{initDG}"
      variableRowHeight="true"
      editable="true">
      <mx:columns>
      <mx:DataGridColumn dataField="Date"
      width="200"
      editable="true"
      rendererIsEditor="true"
      itemRenderer="dateRenderer"
      editorDataField="newDate"/>
      </mx:columns>
      </mx:DataGrid>

      <mx:Button label="getIt" click="getDate()"/>
      <mx:Text text="{displayedDate}"/>

      </mx:Application>
        • 1. Re: Datefield as Item renderer problem
          Proeliata
          I am having no issues. Can you give me a specific example where you have problems?
          • 2. Re: Datefield as Item renderer problem
            Jason&Laura Level 1
            Thanks for the quick response. The code I posted above is just some test code for something I am working on. The button thats in the application pulls the first date out of the model which is bound to the grid.

            The problem arises when you select the first date field by clicking the calendar icon, pick any date and click the button below the grid and notice the date that is displayed in the text below the grid, the model doesnt update. If you click the text field part of the date field and pick any date and click the button the model is updated and the date displayed is correct. I dont know why clicking on a different part of the component causes it to behave differently but thats what i am seeing when I work with this. I debugged into the datagrid class and noticed a item render end method that is executed when I click on the text part of the date field but not fired when the icon is clicked. The method also seems to be the method that handles updating the model. It could be a bug with the component, but I dont know enough to claim that i have found a datefield bug :).
            • 3. Re: Datefield as Item renderer problem
              Jason&Laura Level 1
              Went back and looked at the Datagrid class again. The method to look at is itemEditorItemEditEndHandler, which is commented with.

              /**
              * Dispatched when an item editing session ends for any reason.
              *
              * @eventType mx.events.DataGridEvent.ITEM_EDIT_END
              */

              You can see in the code above i tried to make this fire manually and failed :)...
              • 4. Re: Datefield as Item renderer problem
                Jason&Laura Level 1
                <mx:DateField xmlns:mx=" http://www.adobe.com/2006/mxml"
                creationComplete="{newDate = data.Date}"
                showToday="false"
                selectedDate="{newDate}"
                text="{df.format(newDate)}"
                change="test(event)">

                <mx:Script>
                <![CDATA[
                import mx.events.DataGridEvent;
                import mx.binding.utils.ChangeWatcher;
                import mx.formatters.DateFormatter;
                // Define a property for returning the new value to the cell.
                [Bindable]
                public var newDate:Date;

                private var df:DateFormatter = new DateFormatter();

                private function test(event:Event):void {
                newDate= new Date(this.text);
                }

                ]]>
                </mx:Script>

                </mx:DateField>


                I refactored the renderer to not have the VBox wrapper and the problem went away. Thats weird, but I am not complaining. Anyone have any idea what could have caused this?
                • 5. Datefield as Item renderer problem
                  rbk12345
                  Hi Jaymajors,

                  I have the a similar problem,when i try to use your code,It's not allowing me to clear the date.
                  Can u u tell me how to clear the date.
                  Thanks,
                  Ravindra
                  • 6. Datefield as Item renderer problem
                    rbk12345 Level 1

                    Hi Proeliata ,

                    I am using mx.controls.DateField as itemRenderer in the DataGridColumn as Below.
                    <mxataGrid
                    id="dgDetailsContainer" dataProvider="{alphaGroups}"

                    variableRowHeight="true"
                    sortableColumns="true" editable="true" width="100%" itemEditEnd="editGrid(event)">
                    <mx:columns>

                    <mxataGridColumn
                    headerText="ETA Date" itemRenderer="mx.controls.DateField" editorDataField="selectedDate"
                    rendererIsEditor="true"
                    editable="true" dataField="EtaDate" /> </mx:columns>
                    </mxataGrid>
                    While I was submitting the dataGrid values If I try to alert the EtaDate using the below call


                    I am getting null value always.

                    private function submitChanges():void
                    {
                    try{

                    Alert.show("EtaDate0 is"+alphaGroups[0].EtaDate);
                    Alert.show("EtaDate1 is"+alphaGroups[1].EtaDate);

                    commonWebService.submitChanges(alphaGroups);
                    }catch(err:Error){
                    Alert.show("Please choose Title and Alpha");

                    }
                    }


                    Please help me to re-solve,If any one handled this scenario please provide me the sample code to update dataProvider.
                    Back to top

                    Thanks,
                    Ravindra
                    • 7. Re: Datefield as Item renderer problem
                      Janaka1234 Level 1

                      Hi Jason & Laura

                       

                      Thank you for letting us know there is a solution for this problem . We are also suffering with the same issue since long time. Date pick up from the calancer does not take untill I click on a another place of the same component.

                      I saw your following comment . Would you be happy to share with us what is your solution for this ? With what , did you replace VBOX ?

                      "I refactored the renderer to not have the VBox wrapper and the problem went away. Thats weird, but I am not complaining."

                       

                      Thank you so much

                      Jan