RE: [flexcoders] Editable DataGridColumn Binding

[Alex Harui]

The DG is often used to edit the collection.  Normally, folks just
display text renderers and use datefield as the itemEditor so you don't
have to see a stack of datefields.  However, it is fine to use a stack
of datefields, but then you normally set rendererIsEditor=true and set
the editorDataField.  Because you didn't, I would expect to see the
datefield obscured by a textInput when you click in a cell, but you
haven't mentioned that so I'm a bit puzzled.
 
Your renderer is a VBox that wraps a DateField.  That is usually
unnecessary and makes using the DateField as an editor more difficult as
the VBox doesn't have any properties that the DG can query to determine
the new value, which is what edtiorDataField references.  You should be
able to use DateField straight up or use a direct subclass of it.
 
Finally, depending on your data items, they may not dispatch
notifications when their properties are set and thus the collection and
therefore the DG doesn't know it changed and won't update the renderers.
You can use Bindable or Managed data or just call itemUpdated on the
collection to tell it what changed.
 
HTH,
-Alex
 
 

________________________________

From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Jan Huzelius
Sent: Wednesday, October 03, 2007 5:20 AM
To: flexcoders@yahoogroups.com
Subject: Re: [flexcoders] Editable DataGridColumn Binding



Hi Alex,

I'm still having some issues with this, please find some code below that
better illustrate the issue:

I've got a DataGrid populated with data from a dataprovider. This
dataprovider comes from a model class called "
currentApplication.timelines" that looks like this:

package myProjectName.model
{
    import mx.collections.ArrayCollection;
   
    /* class is stripped of all irrelevant code for brevity */

    [Bindable]
    public class ApplicationInfo extends ValueObject
    {

        /*
       <timelines>
           <timeline>
              actualDate/>
           </timeline> 
       <timeline>
             <actualDate>2001-03-08</actualDate>
       </timeline>
       </timelines>*/

        public var timelines:ArrayCollection = new ArrayCollection(); 

  }
}
 

In my ApplicationWindow.mxml view I have the following binding setup:

[Bindable]
public var currentApplication:ApplicationInfo;
        

I then use "currentApplication.timelines " as my DP as shown below:


                        <mx:DataGrid id="timelinesDg" 
                        dataProvider="{currentApplication.timelines}" 
                        wordWrap="true" 
                        rowCount="21" 
                        width="50%" 
                        x="10"
                        y="10"
                        height="318" 
                        editable="true">
                            <mx:columns>
                            <mx:DataGridColumn headerText="Event" 
                            dataField="eventName" 
                            width="300" 
                            editable="false" />
                            
                            <mx:DataGridColumn id="actualDateCol" 
                                headerText="Actual Date" 
                                width="150" 
                                editable="true" 
                                textAlign="center" 
                                dataField="actualDate"
 
itemRenderer="projectName.renderer.DateRenderer" />    
                            </mx:columns> 
                                         </mx:DataGrid>


On the same view I have the following Form with a DateField. The text
content of the DateField is coming from the selectedItem of our
timelinesDG shown above timelinesDg.selectedItem.actualDate. 

This is working fine with the default Date strings (for example
2001-10-03) coming from the Model.

But as soon as the user edits the timelinesDG cell and enter new dates,
the value is still pointing to the original default Date strings from
the server not what the user currently typed in the DG cell. We are
interested in saving the new value entered not the original value: 


<mx:FormItem label="Actual Date" width="100%">
    <mx:DateField id="idActualDate" 
    editable="true" 
    text="{dtFormatter.format(timelinesDg.selectedItem.actualDate )}"

    focusOut="timelinesDg.selectedItem.actualDate = 
    DateTimeUtils.parseENDateString(idActualDate.text);"/>


The data coming in are String dates ("2001-01-10") or (just as empty
fields) pushed from XML via servlets to the currentApplication.timelines
model. 

In my DG Column I have a
an ItemRenderer called "DateRenderer", that looks like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox 
   xmlns:mx="http://www.adobe.com/2006/mxml
<http://www.adobe.com/2006/mxml> "
   width="100%" height="100%"
   implements="mx.core.IDataRenderer">
    
   <mx:Script>
       <![CDATA[

           import mx.core.IDataRenderer;

           public override function set data( value:Object ): void
           {
               if ( value != null )
               { 
                    super.data = value as Date;
                 mydf.selectedDate = value.actualDate as Date;
               }
           }

       ]]>
   </mx:Script>


<mx:DateField id="mydf"
editable="true"
width="100%"
height="100%"
formatString="DD/MM/YYYY"/>

</mx:VBox>

To conclude, we'd like the user to be able to "update" the actualDate
value through the DataGrid cell, so we can pass this updated value back
to the Back-end. Sort of a "2 way binding" from DataProvider to DataGrid
and from DataGrid to DataProvider. Is this possible or what are we doing
wrong? 

Thanks for any further pointers,

/Jan