7 Replies Latest reply on Jul 15, 2009 6:54 PM by tanyagray01

    Re-usable currency item renderer

    tanyagray01

      Currently trying to find the best way to 'currency format' multiple
      datagrid cells. Apologies in advance if I'm overlooking an obvious
      solution.

      Each row has 3 columns which need to be formatted as currency. The
      datagrid's data provider is an object with values purchaseCurrency,
      purchasePrice ; costCurrency, costPrice etc, as the actual currency
      may not be consistent between the various different prices.

      I already have a component as an item renderer which is working fine,
      but it uses data.purchaseCurrency and data.purchasePrice to produce
      the label text to display.

      What I would like to know is if there is a way to pass the currency
      and price values into the item renderer, rather than the renderer
      having an absolute path to the values, so that I could re-use the same
      renderer across all the columns.

      If anyone could point me to any resources explaining how to pass the
      renderer multiple values that would be great.

       

      Thanks

        • 1. Re: Re-usable currency item renderer
          *Prashant Shelke* Level 4

          use <mx:DataGridColumn labelFunction="formatCurrency" datafield="currency" />

          <mx:CurrencyFormatter id="currencyFormatter" currencySymbol="$" thousandsSeparatorTo=","/>


          public function formatCurrency(value:Object, column:AdvancedDataGridColumn):String
          {
              try
              {
                  if(value != null )
                  {
                      /** value.dataField
                       *  For which formatting will be applicable.
                       **/
                     
                      if(value.currency != null && !isNaN(Number(value.currency)) && value.currency!= "")
                      {
                          return currencyFormatter.format(value.currency);
                      }
                      else
                      {
                          /** Here you can return "-" if column has NULL or EMPTY string.
                           **/
                         
                          return "$0";
                      }
                  }     
              }
              catch(error : Error)
              {
                  Alert.show("error : " + error.getStackTrace());
              }
             
              return "$0";   
          }

          1 person found this helpful
          • 2. Re: Re-usable currency item renderer
            tanyagray01 Level 1

            Hi Prashant, thanks for your reply, but I'm not sure that it will fit all of my needs.

             

            When you define a CurrencyFormatter, you set the currencySymbol to a specific symbol.

             

            The application I am working on is to be used in multiple countries, and so will have different currency symbols.

             

            For each row in my datagrid, the item renderer would need to be passed both data.currency and data.amount.

             

            That would be fine, if there was only one column, but for each row there are multiple columns which need to be formatted as currency, and each one will have a different currency symbol and a different amount/price.

             

            This code will obviously not work but it may help to explain what I am trying to achieve:

             

            <mx:DataGridColumn itemRenderer="CurrencyRenderer(thisRow.purchaseCurrency, thisRow.purchaseAmount)" />
            <mx:DataGridColumn itemRenderer="CurrencyRenderer(thisRow.depositCurrency, thisRow.depositAmount)" />
            <mx:DataGridColumn itemRenderer="CurrencyRenderer(thisRow.borrowingCurrency, thisRow.borrowingAmount)" />
            

             

            ----------------------------------------

             

            <CurrencyRenderer>
            
                 <mx:Script>
                      public var currency:String = //need a way to set this dynamically from thisRow.purchaseCurrency etc;
                      public var amount:int = //need a way to set this dynamically from thisRow.purchaseAmount etc;
                 </mx:Script>
            
                 <mx:Label text="{currency} {amount}" />
            
            </CurrencyRenderer>
            

             

            --------------------

             

            I am relatively comfortable with extending components if I really need to, but at least a hint on the direction I should be heading or what overrides I should consider would be helpful.

            • 3. Re: Re-usable currency item renderer
              Gregory Lafrance Level 6

              Each column could have its own labelFunction, and those label functions could use the same CurrencyFormatter, but change the currencySymbol within the functions.

               

              If this post answered your question or helped, please mark it as such.

              1 person found this helpful
              • 4. Re: Re-usable currency item renderer
                tanyagray01 Level 1

                Thanks Greg,

                 

                You are right, I could do it that way and I did consider it, but I was trying to be 'tidy' and cut back on duplicate code. It's not only an item renderer for each column, there's also an item editor where the user can select from a dropdown the currency and enter into a textInput the amount, so I was hoping to apply the same concept to both the itemRenderer and editor, and to have just one standalone component for each.

                 

                I may have misunderstood but my interpretation of your suggestion is that each column would have a different labelFunction, making 3 in total. I guess that's not so bad... I will probably do it that way if I have to, but it wouldn't solve my problem of still having to create multiple itemEditors.

                 

                Would there be a way to make an itemEditor or renderer accept arguments?

                 

                <mx:DataGridColumn itemEditor="com.view.currencyCellEditor(purchaseCurrency, purchasePrice)" />

                 

                I don't expect that there would be an EASY way, but I guess this is the best place to ask.

                • 5. Re: Re-usable currency item renderer
                  Gregory Lafrance Level 6

                  I'm not knowledgable enough on item editors to be able to answer your second question. Perhaps someone else will be able to chime it.

                  • 6. Re: Re-usable currency item renderer
                    tanyagray01 Level 1

                    Thanks, I will leave it for now and work on other parts of my project, will credit your reply if I end up coding it that way.

                     

                    Tanya

                    • 7. Re: Re-usable currency item renderer
                      tanyagray01 Level 1
                      <mx:DataGridColumn id="purchasePrice" 
                          dataField="purchase" // this is used as the base for constructing the var name in the renderer
                          headerText="Purchase Price" 
                          itemRenderer="CurrencyRenderer"/>
                      
                      package{ 
                          
                          import mx.controls.DataGrid;
                          import mx.controls.Label;
                          import mx.controls.dataGridClasses.*; 
                      
                          public class CurrencyRenderer extends Label {         
                              
                              override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void 
                              { 
                                  super.updateDisplayList(unscaledWidth, unscaledHeight);             
                      
                                  // the dataField of the current column
                                  var dataField:String = DataGridListData(listData).dataField;
                      
                                  // find the var reference by dataField + "Currency"
                                  // eg. "purchase" + "Currency" references to data[purchaseCurrency]
                                  var currency:String = data[dataField + "Currency"];
                      
                                  // same as above for dataField + "Amount" to make purchaseAmount     
                                  var amount:String = data[dataField + "Amount"];      
                      
                                  // combine the two for the final string to display
                                  this.text =  currency + amount;            
                                  
                              } 
                          } 
                      }
                      

                       

                      This is the solution I've come up with, it will allow me to use the same renderer in each column with the same results. Haven't yet tried it with an item editor but I believe it should follow the same general rules.

                       

                      Thanks to both of you for your help