What's New?

[CLOSED] How to format a decimal number...

  1. #1
    May 22, 2009, 10:06 AM

    [CLOSED] How to format a decimal number...



    I have a decimal number that needs to show with commas as the separator and 2 places after the decimal.

    I need to display the number in a text box and in a datagrid. Right now it displays with no commas, and doesn't show the precision (i.e. 1000.50 shows up as 1000.5 instead of 1,000.50).

    Any suggestions?


    Dim Goal As Decimal = dr("Goal")
ContractsDefaultGoal.Text = FormatNumber(Goal, 2)

<ext:NumberField runat="server" ID="ContractsDefaultGoal" FieldLabel="Goal" Width="75" BlankText="0.00" DecimalPrecision="2" AllowNegative="false" AllowBlank="false" AllowDecimals="true" EmptyText="0.00" ValidateOnBlur="true" MaxValue="99999999"></ext:NumberField>
    


<ext:Store runat="server" ID="Store2" DataSourceID="SqlDataSource2" AutoLoad="true">
<Reader> 
<ext:JsonReader ReaderID="ID"> 
<Fields> 
<ext:RecordField Name="Goal" Type="Float" />
<ext:RecordField Name="DisplayNumber" Type="String" /> 
<ext:RecordField Name="Notes" Type="String" /> 
</Fields> 
</ext:JsonReader> 
</Reader> 
</ext:Store> 




<ext:GridPanel runat="server" ID="GridPanel1" Title="Goals - Double Click to Edit" Width="300" Height="500" StoreID="Store2" AutoScroll="true" ButtonAlign="Center" HideHeaders="true">
<ColumnModel ID="ColumnModel1" runat="server">
<Columns> 
<ext:Column DataIndex="DisplayNumber" ColumnID="DisplayNumber" Header="" Align="Left"></ext:Column>
<ext:Column DataIndex="Goal" ColumnID="Goal" Header="" Align="Right">
<Editor>
<ext:NumberField runat="server" ID="ContractsGoal" FieldLabel="Goal" Width="75" BlankText="0.00" DecimalPrecision="2" AllowNegative="false" AllowBlank="false" AllowDecimals="true" EmptyText="0.00" ValidateOnBlur="true" MaxValue="99999999"></ext:NumberField>
</Editor>
</ext:Column>
</Columns>
</ColumnModel> 
</ext:GridPanel>
  2. #2
    May 22, 2009, 9:06 PM

    RE: [CLOSED] How to format a decimal number...

    use a renderer and toFixed(2)
  3. #3
    May 24, 2009, 5:23 AM

    RE: [CLOSED] How to format a decimal number...

    Hi,

    Please see the following sample
    <%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        Store1.DataSource = new List<object>
                                {
                                    new {Number = 1123.85},
                                    new {Number = 123.85},
                                    new {Number = 1121123.85},
                                    new {Number = 1123.0},
                                    new {Number = 123.0}
                                };
        Store1.DataBind();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>

    <ext:ScriptContainer runat="server"></ext:ScriptContainer>
    
    <script type="text/javascript">
        Ext.apply(Ext.util.Format, {
            number: function(v, format) {
                if(!format){
                    return v;
                }                
                
                v *= 1;
                if(typeof v != 'number' || isNaN(v)){
                    return '';
                }
                var comma = ',';
                var dec = '.';
                var i18n = false;
                
                if(format.substr(format.length - 2) == '/i'){
                    format = format.substr(0, format.length-2);
                    i18n = true;
                    comma = '.';
                    dec = ',';
                }

                var hasComma = format.indexOf(comma) != -1,
                    psplit = (i18n ? format.replace(/[^\d\,]/g,'') : format.replace(/[^\d\.]/g,'')).split(dec);

                if (1 < psplit.length) {
                    v = v.toFixed(psplit[1].length);
                }
                else if (2 < psplit.length) {
                    throw('NumberFormatException: invalid format, formats should have no more than 1 period: ' + format);
                }
                else {
                    v = v.toFixed(0);
                }

                var fnum = v.toString();

                if (hasComma) {
                    psplit = fnum.split('.');

                    var cnum = psplit[0],
                        parr = [],
                        j = cnum.length,
                        m = Math.floor(j / 3),
                        n = cnum.length % 3 || 3;

                    for (var i = 0; i < j; i += n) {
                        if (i != 0) {n = 3;}
                        parr[parr.length] = cnum.substr(i, n);
                        m -= 1;
                    }
                    fnum = parr.join(comma);
                    if (psplit[1]) {
                        fnum += dec + psplit[1];
                    }
                }

                return format.replace(/[\d,?\.?]+/, fnum);
            },

            numberRenderer : function(format){
                return function(v){
                    return Ext.util.Format.number(v, format);
                };
            }
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server" />
        
       <ext:Store runat="server" ID="Store1" AutoLoad="true">
            <Reader>
                <ext:JsonReader>
                    <Fields>
                        <ext:RecordField Name="Number" Type="Float" />                        
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store>
        
         <ext:GridPanel 
            ID="GridPanel1" 
            runat="server" 
            Title="Customers" 
            Height="300"
            StoreID="Store1">
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column Header="Number" DataIndex="Number">
                        <Renderer Fn="Ext.util.Format.numberRenderer('0,000.00')" />
                        <Editor>
                            <ext:TextField runat="server" MaskRe="/[0-9\$\.,]/">
                                <Listeners>
                                    <Focus Handler="this.setValue(Ext.util.Format.number(this.getValue(), '0,000.00'));" />
                                </Listeners>
                            </ext:TextField>
                        </Editor>
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <Listeners>
                <BeforeEdit Handler="if(e.field == 'Number'){}" />
                <ValidateEdit Handler="if(e.field == 'Number'){e.value = e.value.replace(/[\$,]/g, '');}" />
            </Listeners>
            <View>
                <ext:GridView runat="server" AutoFill="true"></ext:GridView>
            </View>
        </ext:GridPanel> 
    </form>
</body>
</html>
  4. #4
    May 25, 2009, 1:44 AM

    RE: [CLOSED] How to format a decimal number...

    GREAT JOB!!!!!!!!!!!!! THANKS IN ADVANCE!!!!!!!!!!!!!!!!!!!!
  5. #5
    May 25, 2009, 3:29 AM

    RE: [CLOSED] How to format a decimal number...

    format: 1000 -------> 1,000 And it doesn' t contain .00 decimal???
    What change we should make in the function????
    Pls tell me!

  6. #6
    May 26, 2009, 3:48 AM

    RE: [CLOSED] How to format a decimal number...

    I have complete it! Great job!
    THANKS!!!!!

Similar Threads

  1. How we can format the double value to two decimal places
    By NishaLijo in forum 1.x Help
    Replies: 8
    Last Post: May 12, 2016, 7:13 AM
  2. [CLOSED] Formatting Number Decimal & thousand seperator
    By FpNetWorth in forum 1.x Legacy Premium Help
    Replies: 14
    Last Post: Mar 30, 2015, 1:06 PM
  3. [CLOSED] Number FIeld Decimal Precision
    By CMA in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jan 13, 2011, 1:03 PM
  4. How to format a number with 3 decimal
    By NishaLijo in forum 1.x Help
    Replies: 1
    Last Post: Nov 24, 2010, 5:44 AM
  5. How to Show Data In Decimal format in GridColumn
    By Dinesh.T in forum 1.x Help
    Replies: 0
    Last Post: Jun 11, 2010, 7:25 AM

Posting Permissions