How to apply CHF currency format in a column in Vue Grid?

[Roberto]

Hi, I have something like this:

<e-column

              field="WE_SALDO"

              :format="{format:'C2', currency:'CHF'}"

              headerText="Saldo CHF"

            ></e-column>

but the showed symbol is still '$'.

How could I change this?

Thanks in advance

trap

[Thavasianand Sankaranarayanan]

Hi Roberto, 

Thanks for contacting us. 

To change currency code we need to refer the locale json files. After that we can change the currency code by using setCulture method. Please find the below code example and sample and documentation link  for more information. 

App.vue 

<template> 

  <div class="col-lg-12 control-section"> 

    <ejs-grid 

      ref="grid" 

      id="grid" 

      :dataSource="data" 

      :allowPaging="true" 

      :pageSettings="pageSettings" 

    > 

      <e-columns> 

        <e-column 

          field="OrderID" 

          headerText="Order ID" 

          width="120" 

          textAlign="Right" 

          :isPrimaryKey="true" 

        ></e-column> 

        <e-column 

          field="Freight" 

          headerText="Freight" 

          width="120" 

  :format="{format:'C2', currency:'CHF' }"           

textAlign="Right" 

          :isPrimaryKey="true" 

        ></e-column> 

        <e-column field="ShipCountry" headerText="Ship Country" width="150"></e-column> 

      </e-columns> 

    </ejs-grid> 

  </div> 

</template> 

<script> 

import Vue from "vue"; 

import { GridPlugin, Page } from "@syncfusion/ej2-vue-grids"; 

import { data } from "./data"; 

// refer the corresponding json files and load them using loadCldr method 

import { loadCldr, setCulture, setCurrencyCode } from "@syncfusion/ej2-base"; 

import * as currencies from "./currencies.json"; 

import * as gregorian from "./ca-gregorian.json"; 

import * as numbers from "./numbers.json"; 

loadCldr(currencies, gregorian, numbers); 

setCulture("sw"); 

setCurrencyCode("CHF"); 

Vue.use(GridPlugin); 

export default Vue.extend({ 

  data: () => { 

    return { 

      data: data.slice(0, 20), 

      pageSettings: { pageCount: 5 } 

    }; 

  }, 

  methods: {}, 

  computed: {}, 

  provide: { 

    grid: [Page] 

  } 

}); 

</script> 

Sample: https://codesandbox.io/s/147456-currency-format-ts2cn 

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/global-local/#internationalization 

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

Regards, 

Thavasianand S.