9 Replies Latest reply on Jun 1, 2009 5:46 AM by Vesta0424

    Inline ItemRenderer, DataGrid, DateField

    Vesta0424

      Hello All,

       

      This is the concept:  A DataGrid with two in line ItemRenderers 1) DateField (rendererIsEditor = "true" ) and 2) "Go" Button.  When the user has changed the date and clicked the "Go" button, the new Date value will be inserted into to the DataProvider Array Object for an update.  I found some code that uses the same concept, but with a ComboBox and Button (I think from these forums actually).  However, it does not work with the DateField as follows.

       

      If the default date in the DateField is not changed and the "Go" button is selected, the value of the date is accessible.  BUT, if the value of the  IS changed and  the little "Go" button is pressed it throws this error (never even gets to the createLink() function):

       

      typeError: Error #1034: Type Coercion failed: cannot convert "05/26/2009" to Date.

       

      And takes me to DateField.as, line 742,

       

              if (_listData && _listData is DataGridListData)
                  newDate = _data[DataGridListData(_listData).dataField];

       

      I would think that a DateField would return a Date Object, not a string.

       

      So can anyone help me with this?  Attached is the example code, which is quite simple.

       

      THanks

        • 1. Re: Inline ItemRenderer, DataGrid, DateField
          _Natasha_ Level 4

          Hi,

          your attaching don't available.

           

          This is because listData is not null. If it's not it parse Date from string.

          • 2. Re: Inline ItemRenderer, DataGrid, DateField
            Vesta0424 Level 1

            Sorry, but this is a bit cryptic ... how would I fix this exactly?

            • 3. Re: Inline ItemRenderer, DataGrid, DateField
              _Natasha_ Level 4

              reattache your code or post it.

              • 4. Re: Inline ItemRenderer, DataGrid, DateField
                Vesta0424 Level 1

                Here is the code.  I tried to post the mxml file, but it was not allowed, which seems strange for a Adobe Flex foru.

                • 5. Re: Inline ItemRenderer, DataGrid, DateField
                  Vesta0424 Level 1

                  Sorry, I sent the incorrect code before (the original exampled).  This is the code that is throwing the error:

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" initialize="init()" >

                   

                   

                   

                       <mx:Script>

                   

                            <![CDATA[

                   

                               import mx.collections.ArrayCollection;

                   

                   

                   

                               [Bindable]
                               private var arr:Array;

                   

                               private function init():void

                   

                              {
                               var today:Date = new Date();
                                arr = new Array();
                                arr.push( { first: "Alex", last: "Harui", status: "Open", date:today} );
                                arr.push( { first: "First", last: "Last", status: "Open", date:today } );
                                arr.push( { first: "Bill", last: "Harui", status: "Pending", date:today }  );

                   

                              }

                   

                   

                   

                              public function createLink():void

                   

                              {

                   

                                output.text = dataGrid.selectedItem.first + " " + dataGrid.selectedItem.date;

                   

                              }

                   

                   

                   

                            ]]>

                   

                       </mx:Script>

                   

                   

                   

                       <mx:DataGrid id="dataGrid" dataProvider="{arr}" editable="true">

                   

                            <mx:columns>
                               <mx:DataGridColumn dataField="first" headerText="First Name" editable="false"/>
                               <mx:DataGridColumn dataField="last" headerText="Last Name" editable="false" />
                               <mx:DataGridColumn
                                   dataField          = "date"
                                   headerText         = "Date"
                                   rendererIsEditor = "true"
                                   editable         = "true">
                                   <mx:itemRenderer>
                                       <mx:Component>
                                           <mx:DateField/>
                                       </mx:Component>
                                   </mx:itemRenderer>
                               </mx:DataGridColumn>

                   

                              <mx:DataGridColumn headerText="Actions" editable="false">
                                <mx:itemRenderer>
                                    <mx:Component>
                                        <mx:LinkButton label="Go"  click="{parentDocument.createLink()}"/>
                                    </mx:Component>
                                </mx:itemRenderer>
                              </mx:DataGridColumn>
                            </mx:columns>
                       </mx:DataGrid>

                   

                      <mx:HBox>
                          <mx:Label text="Last thing you clicked on:" />
                          <mx:Label id="output" />
                      </mx:HBox>

                   

                  </mx:Application>

                  • 6. Re: Inline ItemRenderer, DataGrid, DateField
                    _Natasha_ Level 4

                    And there is DateField?

                    • 7. Re: Inline ItemRenderer, DataGrid, DateField
                      Vesta0424 Level 1

                      I had to post it again, I send the incorrect code.  Sorry.

                      • 8. Re: Inline ItemRenderer, DataGrid, DateField
                        _Natasha_ Level 4

                        Add

                        <mx:itemEditEnd>

                             <![CDATA[

                             event.stopImmediatePropagation();

                             ]]>

                             </mx:itemEditEnd>

                        to DataGrid.

                         

                        I think default listener convert data to string...

                        • 9. Re: Inline ItemRenderer, DataGrid, DateField
                          Vesta0424 Level 1

                          What a difference a weekend makes.  Natasha's answer was not correct, however, it sent me along the correct path to solving the issue.  I wish there were more cookbook recipes for things like this.  Adobe is very good at showing you how to DISPLAY things, but not so good at how to HANDLE that display!  Or maybe I'm so clueless, I don't know where to look

                           

                          Resolution:  If you want to access the data in an ItemRenderer in a DataGridColumn and that datatype is NOT Text, you must specifiy the datatype in the editorDataField.   Voila.

                           

                           

                                       <mx:DataGridColumn
                                           dataField          = "date"
                                           headerText         = "Date"
                                           rendererIsEditor = "true"
                                           editable         = "true"


                               <mx:DataGrid id="dataGrid" dataProvider="{arr}" editable="true">

                           

                                    <mx:columns>
                                       <mx:DataGridColumn dataField="first" headerText="First Name" editable="false"/>
                                       <mx:DataGridColumn dataField="last" headerText="Last Name" editable="false" />

                           

                                         //This is what is important!!

                                       <mx:DataGridColumn
                                           dataField          = "date"
                                           headerText         = "Date"
                                           rendererIsEditor = "true"
                                           editable         = "true"
                                         editorDataField    ="selectedDate">//and this is the MOST important of the important
                                           <mx:itemRenderer>
                                               <mx:Component>
                                                   <mx:DateField/>
                                               </mx:Component>
                                           </mx:itemRenderer>
                                       </mx:DataGridColumn>

                                       //This is the end of what is important!!!

                           

                                      <mx:DataGridColumn headerText="Actions" editable="false">
                                        <mx:itemRenderer>
                                            <mx:Component>
                                                <mx:LinkButton label="Go"  click="{parentDocument.createLink()}"/>
                                            </mx:Component>
                                        </mx:itemRenderer>
                                      </mx:DataGridColumn>
                                    </mx:columns>
                               </mx:DataGrid>

                           

                                           editorDataField    ="selectedDate">

                           

                           

                          see this:

                           

                           

                          http://livedocs.adobe.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDo cs_Parts&file=00000836.html#178245