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要求您声明格式以及提供区域设置，就像这样。

剑道专栏

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

Answer 2

是的，你可以做到。
请查看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的格式是根据format中提供的column生成的 { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" }

如需更多参考，请查看Kendo Localization documentation

更新：

对于Angular 2+，没有太大的区别您可以使用以下标记。

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

全球化角度的剑道网格货币格式

2 个答案: