12 Replies Latest reply on Oct 9, 2007 12:42 PM by Handycam

    Format numbers in datagrid as fractions?

    Handycam Level 1
      I'd like to have a custom formatter to take numbers displayed in a column of my DG as fractions (e.g. 0.5 as 1/2).

      I had tried this in the past, modifying an existing formatter. And while I got it to work with text fields, I couldn't get it to work in a datagrid. I'm sure I must be missing something obvious...

      This code works:
      <comp:FractionFormatter id="makeFraction" myNumber="{0}"/>
      <mx:TextInput id="myTI"/>
      <mx:TextArea text="Formatted string is {makeFraction.format(myTI.text)}"/>

      But this does not:
      <mx:DataGridColumn dataField="{makeFraction.format(data)}" headerText="Amount" width="40"/>

      My formatter:
      quote:


      package myComponents
      {
      //Import base Formatter class
      import mx.formatters.Formatter

      public class FractionFormatter extends Formatter {

      // Declare the variable to hold the pattern string.
      public var myNumber:String;

      // Constructor
      public function FractionFormatter() {

      }

      // Override format().
      override public function format(value:Object):String {
      //Validate value - it must be a nonzero length string.
      if(value.length == 0) {
      // Return empty string and error message for zero-length string.
      error="Zero Length String";
      return ""
      }

      //If the value is valid, format the string.
      switch (myNumber) {
      case ".25" :
      return "1/4";
      break;
      case ".5":
      return "1/2";
      break;
      case ".75":
      return "3/4";
      break;
      case "1":
      return "1";
      break;
      case "1.25":
      return "1 1/4";
      break;

      default :
      // If formatString is not "upper" or "lower",
      // return empty string and set the error message.
      error="Invalid Format String";
      return "";
      }
      }
      }
      }


        • 1. Re: Format numbers in datagrid as fractions?
          peterent Level 2
          The dataField property of the DataGridColumn identifies the field within each record (or row) of the dataProvider to display in that column. What you want is the labelFunction, something like this:

          <mx:DataGridColumn dataField="amount" headerText="Amount" labelFunction="formatAsFraction" />

          Then in your Script block, write the formatAsFraction function:

          private function formatAsFraction( item:Object, col:DataGridColumn ) : String
          {
          return makeFraction.format( item.account );
          }

          • 2. Format numbers in datagrid as fractions?
            Handycam Level 1
            Looks promising, but I must be missing something, since it throws an error #1009 (trying to access a null object)

            Where did you get "item.account"? Did you mean "item.amount"?

            I am now using:
            <mx:DataGridColumn dataField="@qty" headerText="Amount" labelFunction="formatAsFraction" />

            and the formatter:
            <comp:FractionFormatter id="makeFraction" myNumber="{@qty}"/>

            and the function you posted, along with the custom formatter posted earlier.

            • 3. Re: Format numbers in datagrid as fractions?
              peterent Level 2
              I just made up the field name (account, amount, etc). You should put the appropriate field in there.
              • 4. Re: Format numbers in datagrid as fractions?
                Handycam Level 1
                I edited my post, please read it again. I simplified all that other garbage code.

                I'm sure I'm not passing the value correctly...
                • 5. Re: Format numbers in datagrid as fractions?
                  peterent Level 2
                  In your DataGridColumn definition you indicated the dataField is "@qty" - that implies the "record" for any given row in the DataGrid is an XML node and for this particular column you have an attribute called "qty". Something like this:

                  <record qty="5.5" ... />

                  Then the formatAsFraction function will be given this XML node as its item parameter:

                  private function formatAsFraction( item:Object, col:* ) : String
                  {
                  var node:XML = XML(item);
                  return makeFraction.format( Number(node.@qty) );
                  }

                  Everything in XML is string data, so you need to convert the value of the qty attribute to a Number using the casting operation.

                  Your FractionFormatter doesn't need the myNumber property - it doesn't make any sense in the MXML context.
                  • 6. Re: Format numbers in datagrid as fractions?
                    Handycam Level 1
                    Actually, the fact that it's a string works for me here, since my custom formatter expects a string.

                    That's the one last thing I'm confused about. Following the example I got from a book, I made my formatter. And it was the place I got the "myNumber" thing. So how would I modify my FractionFormatter.as to eliminated the need to pass the string from the main file (if I understand correctly):

                    package myComponents
                    {
                    //Import base Formatter class
                    import mx.formatters.Formatter

                    public class FractionFormatter extends Formatter {

                    // Declare the variable to hold the pattern string.
                    public var myNumber:String;

                    // Constructor
                    public function FractionFormatter() {
                    // Call base class constructor.
                    super();
                    }

                    // Override format().
                    override public function format(value:Object):String {
                    //Validate value - it must be a nonzero length string.
                    if(value.length == 0) {
                    // Return empty string and error message for zero-length string.
                    error="Zero Length String";
                    return ""
                    }

                    //If the value is valid, format the string.
                    switch (myNumber) {
                    case ".25" :
                    return "1/4";
                    break;
                    case ".5":
                    return "1/2";
                    break;
                    case ".75":
                    return "3/4";
                    break;
                    case "1":
                    return "1";
                    break;
                    case "1.25":
                    return "1 1/4";
                    break;

                    default :
                    // If formatString is not "upper" or "lower",
                    // return empty string and set the error message.
                    error="Invalid Format String";
                    return "";
                    }
                    }
                    }
                    }
                    • 7. Re: Format numbers in datagrid as fractions?
                      peterent Level 2
                      Just don't use myNumber - you want the format function to accept the original string (eg, "5.5") and return the formatted string (eg, "5 1/2") - that's it. When the DataGrid framework calls the labelFunction it will pass to it the XML node for a row and the labelFunction then calls your formatter's format function. The result of the labelFunction appears in the cell of the DataGrid.
                      • 8. Re: Format numbers in datagrid as fractions?
                        Handycam Level 1
                        I appreciate the help, Peter.

                        So what I changed was:

                        override public function format(value:Object):String {
                        switch ( value.toString()) {
                        case ".25" :
                        return "1/4";
                        break;
                        ....rest of cases...
                        }

                        And it seems to work. Is that right?

                        Thanks for your patience & advice.
                        • 9. Re: Format numbers in datagrid as fractions?
                          peterent Level 2
                          That looks correct - as long as it gives you the correct responses.

                          No problem - that's what we're here for.
                          • 10. Re: Format numbers in datagrid as fractions?
                            Handycam Level 1
                            Please see my post about the item renderer problem. Is there any way this formatter is messing it up?
                            • 11. Re: Format numbers in datagrid as fractions?
                              peterent Level 2
                              I don't see what post you are referring to. You need to parse the string, value, into the integer and fraction parts. Use the String split function to make an Array with index 0 being the integer and index 1 being the fraction:

                              var parts:Array = value.split(".");

                              The switch on the parts[1] - but make sure the parts Array has 2 values - you may just have a integer in value.
                              • 12. Re: Format numbers in datagrid as fractions?
                                Handycam Level 1
                                Sorry this thread

                                the formatter is working fine. But I'm seeing another problem that I never had, and I was wondering if addin the formatter caused it somehow.