全球化角度下Kendo Grid的货币格式

Question

I am using the kendo grid in Angular 4+. I need all the cells in a column to have a localized currency displayed. Is this possible?

...
<kendo-grid-column 
  field="unitPrice"
  format="currency" // <- for clearity: I need to do something like this.
  [title]="Unit Price">
</kendo-grid-column>

Answer 1

It appears the kendo requires you to declare the format as well as provide the locale, like so.

kendo column

<kendo-grid-column 
  field="unitPrice"
  filter="numeric" 
  format="{0:c}"
  [title]="'formsPlus.lineItemAttach.unitPrice' | translate"
  [width]="100">
</kendo-grid-column>    

your.module.ts

import { LOCALE_ID, NgModule } from "@angular/core"
...

@NgModule({  
 ...   
 providers: [
   { provide: LOCALE_ID, useValue: "en-US" },
 ],

For some reason It would not work without providing the LOCALE_ID .

Side Note: You can change the language at startup by importing the locale into your module like so:

import "@progress/kendo-angular-intl/locales/fr/all"
...
  ...
  { provide: LOCALE_ID, useValue: "fr" },

Answer 2

Yes sure, you can do it.
Check the below code from Kendo UI Grid localization demo

element.kendoGrid({
    dataSource: dataSource,
    pageable: {
        refresh: true,
        pageSizes: true,
        buttonCount: 5
    },
    filterable: true,
    sortable: true,
    columnMenu: true,
    toolbar: ["create"],
    columns: [
        "ProductName",
        { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
        { field: "UnitsInStock", title:"Units In Stock", width: "140px" },
        { field: "Discontinued", width: "140px" },
        { command: ["edit", "destroy"], title: "", width: "260px" }],
    editable: "inline"
});

Observe that the field UnitPrice is formatted based on the format provided in the column
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" }

For more reference, you can check Kendo Localization documentation

---

UPDATE:

For Angular 2+, there won't be much difference.
You can have your markup as below.

<kendo-grid-column 
  field="unitPrice"
  format="{0:c}"      // or format="'{0:c}'" 
  [title]="Unit Price">
</kendo-grid-column>