Thousand Separator With Decimal

[Nagendra Gupta]

Dear Team,

Our requirement is Thousand Separator With Decimal in grid column and also in footer like (Sum of column using Aggregate) in the form of Indian Currency.

Example 1: Input : 56000 decimal : 2 output 56,000.00

Example 2: Input : 1984734.901 decimal : 2 output 19,84,734.90

One requirement is also that is grid column show American currency instead of Indian currency. We have put locale="en-IN" which is property of grid and set column format is C3.

[Soundeswari Selvam]

Hi Nagendra Gupta,

Greetings from Syncfusion support.

Query 1 : Thousand Separator With Decimal in grid column and also in footer like (Sum of column using Aggregate) in the form of Indian Currency.

We analyzed your query, we have created a sample to achieved your requirement by using valueAccessor method . On that method, we have changed the default value to thousand separator with decimal value in the form of Indian currency in Freight column. And using customAggregateFn to get the sum of the value of the Freight column with thousand separator with decimal in the form of Indian currency.

Kindly refer the below code and sample for your reference.

 

[app.component.html]

 

<e-column

        field="Freight"

        headerText="Freight"

        width="120"

        type="number"

        [valueAccessor]="valueAccessor"

        textAlign="Right"

      ></e-column>

 

 <e-aggregates>

      <e-aggregate>

        <e-columns>

          <e-column

            columnName="Freight"

            type="Custom"

            [customAggregate]="customAggregateFn"

          >

            <ng-template #footerTemplate let-data

              >Sum: {{ data.Custom }}</ng-template

            >

          </e-column>

        </e-columns>

      </e-aggregate>

    </e-aggregates>

 

 

[app.component.ts]

 

public valueAccessor = (field: string, data1: object, column: object) => {

    let formattedValue: string = (data1 as any).Freight.toLocaleString(

      'en-IN',

      {

        maximumFractionDigits: 2,

        style: 'currency',

        currency: 'INR',

      }

    );

    return formattedValue;

  };

  public customAggregateFn = (data: ReturnType) => {

    var FrieghtData = data.result.map((e) => {

      return e.Freight;

    });

    var SumData = 0;

    FrieghtData.forEach((e) => {

      SumData = SumData + e;

    });

    let format = SumData.toLocaleString('en-IN', {

      maximumFractionDigits: 2,

      style: 'currency',

      currency: 'INR',

    });

 

    return format;

  };

 

Sample link: https://stackblitz.com/edit/angular-7p8h3n-nzhvpu?file=app.component.html,app.component.ts,data.ts,app.component.css

Reference: https://ej2.syncfusion.com/angular/documentation/grid/columns/columns/#valueaccessor

Query 2 : Grid column show American currency instead of Indian currency and we have put locale="en-IN" which is property of grid and set column format is C3.

We have already addressed the reported query and provided the solution in the below forum. Kindly refer the below attached forum link for your reference.

Forum link: https://www.syncfusion.com/forums/166256/custom-number-separators-thousand-and-decimal?reply=SEnkeF

Please get back to us, if you need further assistance.

Regards,

Soundeswari Selvam
If this post is helpful, please consider accepting it as a solution so that other members can locate it more quickly.