3 Replies Latest reply on Mar 8, 2012 7:23 AM by Carol L. Frampton

    Editable DataGrid with amount

    62ragtop

      I need to create a datagrid with one editable column of type amount. I'm using a textinput and I want

      1) on itemEditEnd format amount like "1.500,50"

      2) on itemEditBegin format amount like "1500.50"

       

      My problem is on itemEditBegin, here my code

       

      private function formatData(event:DataGridEvent):void {  

                 
      // Check the reason for the event.
                 
      if (event.reason == DataGridEventReason.CANCELLED){
                     
      return;
                 
      }       

                 
      var dataGrid:DataGrid = event.target as DataGrid;
                 
      var col:DataGridColumn = dataGrid.columns[event.columnIndex];   

                 
      // Get the new data value from the editor.
                 
      var newData:String = dataGrid.itemEditorInstance[col.editorDataField];

                 
      // Determine if the new value is an empty String.
                 
      if(newData == "") {
                     
      return;
                 
      }

                 
      if(event.dataField == "@GiacenzaEffettiva") {
                     
      TextInput(dataGrid.itemEditorInstance).text = component.formatAmount(newData);
                 
      }
             
      }

      private function unFormatData(event:ListEvent):void {

      var dataGrid:DataGrid = event.target as DataGrid;

        
      // HERE dataGrid.editedItemRenderer IS NULL, WHY ?        
      }   

      <mx:DataGrid id="dataGridId"
                  dataProvider
      ="{resultXMLListCollection}"
                  width
      ="1150"
                  rowCount
      ="20"
                  editable
      ="true"
                  selectable
      ="false"
                  itemEditEnd
      ="formatData(event)"
                  itemEditBegin
      ="unFormatData(event)">
      <mx:columns>
        
      .....
        
      <mx:DataGridColumn
                          id
      ="amountColumn"
                          width
      ="130"
                          headerText
      ="amount}"
                          dataField
      ="@amount"
                          editable
      ="{!flagDettaglio}"
                          editorDataField
      ="text"/>

        
      </mx:columns>   
      </
      mx:DataGrid>

       

      Can you help me ? Thanks

        • 1. Re: Editable DataGrid with amount
          Flex harUI Adobe Employee

          Try using a labelFunction to format the displayed data.

          • 2. Re: Editable DataGrid with amount
            62ragtop Level 1

            labelFunction is usefull to format amount like "1.500,50" but how can I format this filed like "1500.50" when I click on it ?

            • 3. Re: Editable DataGrid with amount
              Carol L. Frampton Level 2

              Here is a quick hack job on one of the examples to show it is possible to change the displayed text value when edited and then change it again after editing is completed.

               

              <?xml version="1.0" encoding="utf-8"?>

              <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                             xmlns:s="library://ns.adobe.com/flex/spark"

                             xmlns:mx="library://ns.adobe.com/flex/mx">

                  <fx:Script>

                      <![CDATA[

                          import mx.events.DataGridEvent;

                          import mx.events.DataGridEvent;

                          import mx.controls.TextInput;

                          import mx.controls.listClasses.IDropInListItemRenderer;

                          import mx.events.DataGridEventReason;

                         

                         // Handle the itemEditBegin event.

                          private function myDataGrid_itemEditBeginHandler(event:DataGridEvent):void

                          {

                              // Get the name of the column being editted.

                              var colName:String = myDataGrid.columns[event.columnIndex].dataField;

                             

                              if(colName=="amount")

                              {

                                  // Handle the event here.

                                  event.preventDefault();

                                 

                                  // Creates an item editor.               

                                  myDataGrid.createItemEditor(event.columnIndex,event.rowIndex);

                                 

                                  // All item editors must implement the IDropInListItemRenderer interface

                                  // and the listData property.

                                  // Initialize the listData property of the editor.

                                  IDropInListItemRenderer(myDataGrid.itemEditorInstance).listData =

                                  IDropInListItemRenderer(myDataGrid.editedItemRenderer).listData;

                                 

                                  // Copy the cell value to the TextInput control.

                                  myDataGrid.itemEditorInstance.data = myDataGrid.editedItemRenderer.data;

                                 

                                  TextInput(myDataGrid.itemEditorInstance).text += " modified";

                              }

                          }

                         

                          // Define the eventlistner for the itemEditEnd event.

                          public function myDataGrid_itemEditEndHandler(event:DataGridEvent):void {  

                              // Check the reason for the event.

                              if (event.reason == DataGridEventReason.CANCELLED)

                              {

                                  // Do not update cell.

                                  return;

                              }           

                             

                              // Get the new data value from the editor.

                              var newData:String=

                                  TextInput(event.currentTarget.itemEditorInstance).text;

                             

                              if(newData == "") {

                                  // do something

                                  return;

                              }

                             

                              if(event.dataField == "amount") {

                                  TextInput(myDataGrid.itemEditorInstance).text= "1.500,50";

                                  if (myDataGrid.editedItemRenderer == null)

                                      trace("myDataGrid.editedItemRenderer is null");

                              }

                          }          

                      ]]>

                  </fx:Script>

                 

                  <fx:Declarations>

                      <mx:ArrayCollection id="arrColl">

                          <mx:source>

                              <fx:Array>

                                  <fx:Object amount="8500.50" />

                                  <fx:Object amount="480.50" />

                                  <fx:Object amount="71.50" />

                              </fx:Array>

                          </mx:source>

                      </mx:ArrayCollection>       

                  </fx:Declarations>

                 

                  <mx:DataGrid id="myDataGrid"

                               dataProvider="{arrColl}"

                               editable="true"

                               itemEditBegin="myDataGrid_itemEditBeginHandler(event)"

                               itemEditEnd="myDataGrid_itemEditEndHandler(event)">

                      <mx:columns>

                          <mx:DataGridColumn dataField="amount"

                                             editable="true" />

                      </mx:columns>

                  </mx:DataGrid>

                 

              </s:Application>