2 Replies Latest reply on Sep 11, 2008 8:22 AM by riesvantwisk

    Datagrid and percentage formatting

    Stinky Tofu
      I am having some difficulty rendering percentages in the DataGrid. I have the following JSON file structure:

      {"n":"Zimbabwe",
      "o":"63%",
      "m":"38%",
      "g":"1,900"
      }

      When I import these values into the DataGrid, there is a problem when I try to sort the percentage columns. The percentages are not sorted in the correct order, resulting in something like this:

      0%
      100%
      14%
      17%
      etc..

      Instead of:

      0%
      14%
      17%
      100%

      So, I tried changing the JSON file to:

      {"n":"Zimbabwe",
      "o":"63",
      "m":"38",
      "g":"1900"
      }

      However, now I am having problems getting Flex to display a percentage symbol next to the numbers in the DataGrid. Any idea what I need to do to get this working? What is the right approach to take when working with number formatting in the DataGrid? Should I be formatting the numbers inside the data source before feeding into Flex, or should I be storing the raw numbers in the JSON file and then formatting them with Flex?

      Great if someone can point me in the right direction, because I really can't find any information about it anywhere on the Internet.

      Many thanks!

        • 1. Re: Datagrid and percentage formatting
          atta707 Level 2
          have a look at the sortCompareFunction property of DataGridColumn. This function allows you to define you custom sorting implementation is meant exactly for these kind of scenarios. Flex Builder help and web has examples of this.

          ATTA
          • 2. Re: Datagrid and percentage formatting
            riesvantwisk Level 1
            My advice is not to pass strings where you actually want to pass a integer/float.

            So best is to pass this :

            {"n":"Zimbabwe",
            "o":"63",
            "m":"38",
            "g":"1900"
            }


            Then use a item renderer to render the values as percentage values.

            Ries


            Here is my ProcentualRenfderer.mxml

            <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml"
            implements="mx.controls.listClasses.IDropInListItemRenderer,mx.managers.IFocusManagerComp onent">
            <mx:Script>
            <![CDATA[
            import mx.controls.listClasses.ListData;
            import mx.controls.dataGridClasses.DataGridListData;
            import mx.controls.listClasses.BaseListData;
            import mx.controls.dataGridClasses.DataGridItemRenderer
            import mx.events.FlexEvent;

            private var _listData:DataGridListData;

            // Implement the drawFocus() method for the VBox.
            override public function drawFocus(draw:Boolean):void {
            followUpCB.setFocus();
            }

            [Bindable] private var _numDigits:Number = 2;

            [Bindable]
            override public function set data(value:Object):void{
            super.data = value;
            followUpCB.text=Math.round(data[_listData.dataField] * (Math.pow(10,_numDigits)) ) / (Math.pow(10,_numDigits)) + '%';
            }

            override public function get data():Object {
            return super.data;
            }

            public function get listData():BaseListData
            {
            return _listData;
            }

            public function set listData(value:BaseListData):void
            {
            _listData = DataGridListData(value);
            }

            public function set numDigits(value:Number):void {
            _numDigits = value;
            }

            public function get numDigits():Number {
            return _numDigits;
            }

            ]]>
            </mx:Script>
            <mx:Label id="followUpCB" textAlign="right" width="100%"/>
            </mx:VBox>