9 Replies Latest reply on Mar 7, 2011 10:12 AM by Flex harUI

    Issue with DateField based external ItemRenderer.

    Michael Orzechowski

      Hello Experts

       

      I have come across “issue” which I am not able to solve myself (I tried for past 24 hours with no success).

       

      I am building mid-sized application which will utilize DataGrid components in many modules. These components will be extended with ItemRenderes to enhance user experience (and allow data manipulation).


      One of the DataGrids has a column with date. This date field will be open user input.
      The easiest thing would be to build inline ItemRenderer of type DateField, something to that effect:

       

      <mx:DataGridColumn
      id="someDateFld"
      dataField="someDateFld"
      headerText="Some kind of date"
      itemRenderer="mx.controls.DateField"
      rendererIsEditor="true"
      editorDataField="selectedDate" />

      And that works perfectly fine.

       

      However I would like to be able to re-use ItemRenderers across my application and also dispatch events (using bubbling method) that will trigger additional functionality i.e. updating another column with week number (read-only) based on selected date. That is why I have opted for external ItemRenderer.

       

      I have created ItemRenderer with 2 components: HBox to align date field (otherwise it would be aligned to the left of the data grid column which looks weird to say the least) and DateField. I have binded data to selectedDate property of my DateField. First I had to convert return value of my RFC service from string to expected type for selectedDate which is Date object. Now, when I run my application and start clicking/changing rows of DataGrid I am getting a nasty error message:

       

      ReferenceError: Error #1069: Property selectedDate not found on ItemRenderers.DateFieldIR and there is no default value.
      at mx.controls::DataGrid/itemEditorItemEditEndHandler()[E:\dev\4.x\frameworks\projects\frame work\src\mx\controls\DataGrid.as:5297]
      at flash.events::EventDispatcher/dispatchEventFunction()
      at flash.events::EventDispatcher/dispatchEvent()
      at mx.core::UIComponent/dispatchEvent()[E:\dev\4.x\frameworks\projects\framework\src\mx\core \UIComponent.as:12528]
      at mx.controls::DataGrid/endEdit()[E:\dev\4.x\frameworks\projects\framework\src\mx\controls\ DataGrid.as:4514]
      at mx.controls::DataGrid/mouseDownHandler()[E:\dev\4.x\frameworks\projects\framework\src\mx\ controls\DataGrid.as:4790]

       

      That message does not make sense to me at all. As mentioned above I have binded my date value (converted to date object) to selectedDate property on my ItemRenderer (called: ItemRenderers.DateFieldIR).

       

      Can anyone please help me out with this issue?

       

      Regards
      Michael Orzechowski

        • 1. Re: Issue with DateField based external ItemRenderer.
          Flex harUI Adobe Employee

          ItemEditorItemEditEndHandler runs when the edit session is ending and the

          datagrid is trying to read the editorDataField from the editor.  Because you

          have wrapped it in an Hbox, the property is no longer available since Hbox

          doesn't have a selectedDate property.

           

          You can add a selectedDate property to the Hbox that reads from the

          DateField

          • 2. Re: Issue with DateField based external ItemRenderer.
            Michael Orzechowski Level 1

            Flex harUI

             

            Thanks for prompt reply. I am afraid I dont know how to do what you have suggested. I dont suppose you could elaborate on that a bit more?

             

            Regards

            Michael

            • 3. Re: Issue with DateField based external ItemRenderer.
              @nur@dh@ Level 1

              You main component is HBox...u need to s

              et a property selectedDate inside HBox which will

              read the value of selectedDate of your datefield.In short you need to have a variable "selectedDate" inside script of your HBox renderer component.

              • 4. Re: Issue with DateField based external ItemRenderer.
                Michael Orzechowski Level 1

                Ok, I guess you dont want to make things too easy for me:) I did a bit more reading and tried to decypher your pointers. I have updated my ItemRenderer so it looks like that now:

                 

                <?xml version="1.0" encoding="utf-8"?>
                <s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                        xmlns:s="library://ns.adobe.com/flex/spark"
                        xmlns:mx="library://ns.adobe.com/flex/mx"
                        focusEnabled="true">

                 

                <fx:Script>
                  <![CDATA[
                  
                   import mx.events.CalendarLayoutChangeEvent;
                   import mx.events.FlexEvent;
                  
                   public static const CHANGE_DATE_EVENT:String = "changeDate";

                   [Bindable]
                   public var selectedDate:Date;
                  
                   override public function set data(value:Object):void
                   {
                    super.data = value;
                    selectedDate = value.DAY_OBJ;
                   }
                  
                   protected function datefield1_changeHandler(event:CalendarLayoutChangeEvent):void
                   {
                    var chngEvnt:Event = new Event(CHANGE_DATE_EVENT,true);
                    dispatchEvent(chngEvnt);
                   }

                  ]]>
                </fx:Script>

                <mx:HBox width="100%" horizontalAlign="center">
                 
                  <mx:DateField
                   width="100"
                   formatString="YYYY-MM-DD"
                   selectedDate="{selectedDate}"
                   change="datefield1_changeHandler(event)"/> 
                 
                </mx:HBox>
                 
                </s:MXDataGridItemRenderer>

                 

                 

                Note I have added part with "override public function set data" to set public variable selectData which I have binded to my DateField. It all started to look very promising, there is no error and I can change data using calendar however when I am checking date field on my Array Collection (binded to DataGrid) I can still see the old date (although on the layout I get to see the new one). Can you please shed some light on what am I doing wrong here?

                 

                Regards

                Michael

                 

                 

                 

                PS. I have just created another ItemRenderer with DropDownList and have same issue. Field is updated on the layout but not behind the scenes (content of Array Collection is intact). Can you please advise how to solve this problem?

                • 5. Re: Issue with DateField based external ItemRenderer.
                  @nur@dh@ Level 1

                  in function datefield1_changeHandler(),

                  set the selectedDate to whatever date being selected.It should work fine.

                  1 person found this helpful
                  • 6. Re: Issue with DateField based external ItemRenderer.
                    Michael Orzechowski Level 1

                    This event was meant to be used for something else (updating week number based on selected date).

                    I would not like having to implement events for each ItemRenderer just to update corresponding property on Array Collection (that would be overkill, would it not?).

                    Can someone explain to me in laymen terms why there is a disconnection between data presentation and underlying data? Is there a different way to ensure that values on the layout and corresponding data are aligned?

                    • 7. Re: Issue with DateField based external ItemRenderer.
                      Flex harUI Adobe Employee

                      I'm not sure what you mean by "disconnection", but it is generally good

                      practice to have "abstraction" and "encapsulation".  The data model for the

                      renderer has two important values:  the data property which is the input of

                      the entire ArrayCollection item, and whatever property you've specified as

                      the editorDataField, in this case, "selectedDate", which is output from the

                      editor and used to update the ArrayCollection item.

                       

                      The renderer is an encapsulation or abstraction so your job when customizing

                      is to wire up those two values to the implementation correctly.

                       

                      When the renderer was just a DateField, it had all of that wiring done for

                      you, but now you've buried it inside an MXDGIR, so you have to proxy the

                      information to and from that thing.

                       

                      There are several ways to code it.  You could use two-way databinding to

                      bind the MXDGIR's selectedDate to the DateField's selectedDate.  You could

                      implement the selectedDate property on MXDGIR as a get function that simply

                      reads from the DateField.  Then you wouldn't need to mess with events, but

                      in complex cases you will as events are sometimes needed to notify other

                      things in the renderer that property values need updating.

                      • 8. Re: Issue with DateField based external ItemRenderer.
                        Michael Orzechowski Level 1

                        Flex harUI

                         

                        Thanks for comprehensive reply. I feel rather thick now. I dont have problem with concept (its by all means logical), what I am struggling with is documentation and some good examples. You know how many results I got in google when I typed "Flex + MXDGIR"? One:)

                         

                        Are there some online resources you could recommend to learn a bit about these things?

                         

                        In the meantime I have updated one of the functions on my ItemRenderer to following (note last line):


                        protected function datefield1_changeHandler(event:CalendarLayoutChangeEvent):void
                        {
                        var chngEvnt:Event = new Event(CHANGE_DATE_EVENT,true);
                        dispatchEvent(chngEvnt);
                        selectedDate=event.newDate;
                        }


                        Which did the trick.
                        Thank you all for your input.

                        • 9. Re: Issue with DateField based external ItemRenderer.
                          Flex harUI Adobe Employee

                          MXDGIR is my abbreviation for MXDataGridItemRenderer because I get tired of

                          typing the whole thing.

                           

                          If you find the Adobe doc is lacking, feel free to comment on the doc pages.