Kendo Grid in Angular 的货币格式与全球化

Question

我在 Angular 4+ 中使用 kendo 网格。我需要一列中的所有单元格都显示本地化货币。这可能吗？

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

Answer 1

是的，当然可以。
从 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"
});

观察字段 UnitPrice 的格式基于 column
中提供的 format { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" }

更多参考，可以查看Kendo Localization documentation

更新：

对于Angular2+来说，差别不大
您可以使用如下标记。

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

Answer 2

看来 kendo 要求您声明格式并提供语言环境，就像这样。

kendo列

<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" },
 ],

出于某种原因，如果不提供 LOCALE_ID.

将无法工作

旁注： 您可以通过将区域设置导入模块来在启动时更改语言，如下所示：

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

Kendo Grid in Angular 的货币格式与全球化

Currency format for Kendo Grid in Angular with Globalization

currency

kendo-ui

kendo-grid

angular