Custom Data Format in Grid

[PDev]

I have a requirement where in my Grid I have currency format which is set to C2. it will give me $15000.00 in Grid cell. Requirement is to have k$ so format of Grid Cell should be $15k. is this possible ? if so, can you provide some sample for it ? 

[Pavithra Subramaniyam]

Hi PDev,

We suggest the “valueAccessor” property to show the thousand as “K” in currency columns. Please refer to the below code example, sample, and documentation link for more information.

[html]

<e-column field="Freight" headerText="Freight" textAlign="Right" [valueAccessor]="valueAccess"></e-column>

 

[ts]

valueAccess(field: string, data: object, column: object) {

  var value = '$' + data[field] / 1000 + 'k';

  return value;

}

 

Documentation : https://ej2.syncfusion.com/angular/documentation/grid/columns/column-rendering#using-valueaccessor-property

Sample                 : https://stackblitz.com/edit/angular-fai2mf-hxjwfx?file=src%2Fapp.component.ts

Please get back to us if you need further assistance on this.

Regards,

Pavithra S

[PDev]

Thanks but when i added aggregates like below. it did not do any aggregates in footer

<e-aggregates>

<e-aggregate>

<e-columns>

<e-column field='Freight' type='sum'>

<ng-template #footerTemplate let-data>Sum: </ng-template>

</e-column>

</e-columns>

</e-aggregate>

</e-aggregates>

[Pavithra Subramaniyam]

PDev,

To show the aggregate value inside the template, access the aggregate values using their corresponding type name. For example, to access the sum aggregate value, use data.sum as in the below code example.

<e-column field="Freight" type="sum">

  <ng-template #footerTemplate let-data>Sum: {{ data.sum }}</ng-template>

</e-column>

 

You can also add a custom format to the aggregate value using the template handler function. Please refer to the below code example and the sample link for more information.

<e-column field="Freight" type="sum">

  <ng-template #footerTemplate let-data>Sum: {{ format(data.sum) }}</ng-template>

</e-column>

 

format(value: number) {

  return '$' + value / 1000 + 'k';

}

 

Sample: https://stackblitz.com/edit/angular-fai2mf-cxdd8v?file=src%2Fapp.component.ts