How can one use NumberFormatOptions

[Michael Kornatzki]

Hi,

i am new to syncfusions conponents and am wondering how i should use NumberFormatOptions?

I want to format a Column. In the documentation for the ColumnModel i can see that one can set NumberFormatOptions (https://ej2.syncfusion.com/vue/documentation/api/grid/columnModel/#format)

But how can i use NumberFormatOptions?

Kind regards,

Michael

[Pavithra Subramaniyam]

Hi Michael, 

 

Thanks for contacting Syncfusion Support. 

 

You can set the number format for the Grid columns by setting the “column.format” property with format strings N, C and P. Please refer to the below code example and documentation link for more information. 

 

[App.Vue] 

<ejs-grid :dataSource="data"  height='315px'> 

   <e-columns> 

      <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column> 

      <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2'></e-column> 

      <e-column field='OrderDate' headerText='Order Date' format='yMd' type='date'></e-column> 

   </e-columns> 

 </ejs-grid> 

 

 

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/columns/#format 

 

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

 

Regards, 

Pavithra S. 

[Michael Kornatzki]

Hi Pavithra,

thanks for the answer but that was not the point.

The documentation (https://ej2.syncfusion.com/vue/documentation/api/grid/columnModel/#format) says that i can use NumberFormatOptions and i am interested in how to use NumberFormatOptions.

Kind regards,

michael

[Pavithra Subramaniyam]

Hi Michael, 

 

Thanks for your update. 

 

You can apply the NumberFormatOption for Grid columns as given below. Please refer to the below code example, documentation link and sample link for more information. 

 

[App.Vue] 

<template> 

  <div id="app"> 

    <ejs-grid id="Grid" ref="grid" :dataSource="data" :allowPaging="true"> 

      <e-columns> 

        <e-column field="OrderID" headerText="Order ID" width="90"></e-column> 

        <e-column field="Freight" headerText="Freight" :format="format" width="90"></e-column> 

        <e-column 

          field="ShipCity" 

          headerText="Telefon" 

          width="150" 

          textAlign="Center" 

        ></e-column> 

      </e-columns> 

    </ejs-grid> 

  </div> 

</template> 

 

<script> 

.  .  . 

export default { 

  data() { 

    return { 

      data: data, 

      format:{ format:'C5' , useGrouping: false, 

minimumSignificantDigits:1, maximumSignificantDigits:3} 

    } 

  } 

}; 

</script> 

 

Documentation: https://ej2.syncfusion.com/vue/documentation/common/internationalization/#supported-format-string 

                              https://ej2.syncfusion.com/documentation/api/base/numberFormatOptions/ 

 

Sample               : https://codesandbox.io/s/vue-number-format-optoins-y75mq 

 

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

 

Regards, 

Pavithra S.