Formatting Numbers in Cells

[Stephan Schrade]

Hi support,

I have a grid where I want to display numbers as currency.

This works very well using format: 'C2'

But in one column I need to have a blank content if the value is null.

If I use null in my data, all values in that column are rendered als plain numbers and not as currency.

The values with null are rendered as a blank field (which is what I want to have)

I can't use 0.0 to mark the empty fields as this is also a valid number.

Is there a way to achieve this?

There is also another issue with formatting numbers.

If I'm in edit mode, the value is not formatted as currency but as a "normal" number with US format (with . as decimal point).

Is there a way to display the formatted value in edit mode?

Regards,

Stephan

[Joseph Christ Nithin Issack]

Hi Stephan,

Greetings from Syncfusion support.

Query 1: When using null value, format is not applied.

   We suspect that you are setting the null value to the first record of the column and you have not defined the type of the column. By default, in EJ2 Grid, when the column.type property is not defined, the type of the column will be determined based on the value of the first row of the column. If the first row of the column is null and the type of the column is not defined the grid cannot determine the type of the column. Hence we suggest you to defined the column.type property of the column to resolve the issue you are facing.

Please refer the below code example:

 

{

      field: 'Freight',

      type: 'number',

      headerText: 'Freight',

      format: 'c2',

      width: 150,

    }

 

 

Documentation: https://ej2.syncfusion.com/javascript/documentation/grid/columns/columns#column-types

Query 2: Is there a way to display the formatted value in edit mode?

    You can customize the format of the value displayed in the NumericTextBox control in Grid edit form by using the columns->edit->params property.

Please refer the below code example:

 

{

      field: 'Freight',

      type: 'number',

      headerText: 'Freight',

      format: 'c2',

      editType: 'numericedit',

      edit: { params: { format: 'c2' } },

      width: 150,

    },

 

Documentation: https://ej2.syncfusion.com/javascript/documentation/grid/editing/edit-types#customize-numerictextbox-control-of-numericedit-type

Sample: https://stackblitz.com/edit/jmn4wyay-24hwvbwp?file=index.js,es5-datasource.js

Regards,

Joseph I.

[Stephan Schrade]

Hi Joseph,

many thanks for your quick answer.

Both solutions are working very fine :)

One more thing I forgot to mention:

Although I have set textAlign: 'Right' as the column parameter, the currency values are aligned to the left.

I could find no way to change this.

Is there any way to achieve this?

Regards,

Stephan

[Joseph Christ Nithin Issack]

Hi Stephan,

Thanks for your update. We are glad that the provided solution resolved the issue you were facing.

Query: Align the values of the column to textAlign: “Right”.

We have prepared a sample to reproduce the issue you are facing, but we were not able to reproduce the issue you are facing. Kindly check the sample for your reference.

Code Example:

 

{

      field: 'Freight',

      type: 'number',

      headerText: 'Freight',

      textAlign: 'Right',

      format: 'c2',

      editType: 'numericedit',

      edit: { params: { format: 'c2' } },

      width: 150,

    },

 

 

Sample: https://stackblitz.com/edit/jmn4wyay-24hwvbwp?file=index.js,es5-datasource.js

If you are still facing the issue, please share the below information.

• Complete grid rendering code.
• Are you referring to the alignment of the values in the input element rendered while editing?
• Share the screenshot of the issue you are facing.
• Reproduce the issue in the sample provided.
• Syncfusion package version you are using.

[Stephan Schrade]

Hi,

after I noticed that textAlign = right did not work in all of my grids, I checked further and found out, that I did use an outdated version of the material css.

After generating a new css file with Theme Studio the alignment is now correct.

Thanks very much for your help!

Regards,

Stephan

[Pavithra Subramaniyam]

Hi Stephan Schrade,

We are happy to hear that your issue has been resolved. Please get back to us if you need further assistance.

Regards,
Pavithra S