3 Replies Latest reply on May 29, 2012 5:00 AM by Vibhuti Gosavi(InfoCepts)

    Remove thousand seperator in flex 4

    mohamed.ashik

      Hi,

       

      Flex 4

       

      In the TextInput thousandSeprator is present. When I click on the button that formatted thousand seperator has to be removed.

       

      Need result as below ,

       

      sample.JPG

       

      from 1,234 to 1234.

       

      Please help in getting sorted out.

        • 1. Re: Remove thousand seperator in flex 4
          Vibhuti Gosavi(InfoCepts) Level 3

          Hi,

           

          Set the property "useThousandsSeparator" as false. Please try following code snippet :

           

          <?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"

                                          

                                           minWidth="955" minHeight="600">

           

                    <fx:Script>

           

           

                              <![CDATA[

           

                                        import mx.events.ValidationResultEvent;

           

                                        private var result:ValidationResultEvent;

           

                                        private function checkFormat():void

           

                                        {

           

                                                  result = numValidate.validate();

           

                                                  if (result.type==ValidationResultEvent.VALID) {

           

                                                            numval.text= numberFormatter.format(numtxt.text);

           

                                                  }

           

                                                  else {

           

                                                            numval.text= "Invalid Number";

           

                                                  }

           

                                        }

           

                              ]]>

           

                    </fx:Script>

           

                    <fx:Declarations>

           

                              <mx:NumberFormatter id="numberFormatter"

           

                                                                                useThousandsSeparator="false" useNegativeSign="true"/>

           

                              <mx:NumberValidator id="numValidate" source="{numtxt}" property="text"

           

                                                                                allowNegative="true" domain="real"/>

           

                    </fx:Declarations>

           

                    <s:Panel title="NumberValidator Example" width="506">

           

                              <mx:Form backgroundColor="#096465" width="504">

           

                                        <mx:FormItem label="Enter number:" color="#FFFFFF" fontFamily="verdana">

           

                                                  <s:TextInput id="numtxt" text="" width="100%" color="#000000" fontFamily="verdana"/>

           

                                        </mx:FormItem>

           

                                        <mx:FormItem label="Formatted Value: " color="#FFFFFF" fontFamily="verdana">

           

                                                  <s:Label id="numval" color="#FFFFFF" fontFamily="verdana"/>

           

                                        </mx:FormItem>

           

                                        <mx:FormItem>

           

                                                  <s:Button label="Format" click="checkFormat();"/>

           

                                        </mx:FormItem>

           

                              </mx:Form>

           

                    </s:Panel>

           

          </s:Application>

           

           

          Thanks and Regards,

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

          Vibhuti Gosavi | vgosavi@infocepts.com | www.infocepts.com

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

          • 2. Re: Remove thousand seperator in flex 4
            mohamed.ashik Level 1

            thanks dude... Many thanks..

             

            Need another help man.

             

            While entering in to the same textbox it should change like

             

            When you type in the text box like 1234 - it should automatically change to 1,234.

             

            There should not be any button. Only textbox in the page. I am using Flex 4.

            • 3. Re: Remove thousand seperator in flex 4
              Vibhuti Gosavi(InfoCepts) Level 3

              Hi,

               

              Called checkFormat function on change event of text input and set useThousandSeparator property to true

              Here is the code :

               

              <?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"

                                              

                                               minWidth="955" minHeight="600">

               

                        <fx:Script>

               

               

                                  <![CDATA[

               

                                            import mx.events.ValidationResultEvent;

               

                                            private var result:ValidationResultEvent;

               

                                            private function checkFormat():void

               

                                            {

               

                                                      result = numValidate.validate();

               

                                                      if (result.type==ValidationResultEvent.VALID) {

               

                                                                numtxt.text= numberFormatter.format(numtxt.text);

               

                                                      }

               

                                                      else {

               

                                                                numtxt.text= "Invalid Number";

               

                                                      }

               

                                            }

               

                                  ]]>

               

                        </fx:Script>

               

                        <fx:Declarations>

               

                                  <mx:NumberFormatter id="numberFormatter"

               

                                                                                    useThousandsSeparator="true" useNegativeSign="true"/>

               

                                  <mx:NumberValidator id="numValidate" source="{numtxt}" property="text"

               

                                                                                    allowNegative="true" domain="real"/>

               

                        </fx:Declarations>

               

                        <s:Panel title="NumberValidator Example" width="506">

               

                                  <mx:Form backgroundColor="#096465" width="504">

               

                                            <mx:FormItem label="Enter number:" color="#FFFFFF" fontFamily="verdana">

               

                                                      <s:TextInput id="numtxt" text="" width="100%" color="#000000" fontFamily="verdana" change="checkFormat()"/>

               

                                            </mx:FormItem>

               

                </mx:Form>

               

                        </s:Panel>

               

              </s:Application>

               

               

              Thanks and Regards,

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

              Vibhuti Gosavi | vgosavi@infocepts.com | www.infocepts.com

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