Changing formatting on Numeric textbox is a grid

[Jimmy]

My client wanted to have input fields that were numeric (no text allowed). So after a long search and many experiments I managed to get it working. The Input field is a numeric textbox without spinners, in a grid

        <kendo-grid-column format="c1" [width]="100" field="jan" title="Jan {{ convertedYear }}" [editable]="editMode" [headerStyle]="currentMonth(0)">
          <ng-template
          kendoGridEditTemplate
          let-column="column"
          let-dataItem
          let-formGroup="formGroup">
          <kendo-numerictextbox [spinners]="false" [formControl]="formGroup.get(column.field)">
        </kendo-numerictextbox>
        </ng-template>
        </kendo-grid-column>

The problem is ... that values are shown as currency values, even when they are 0. For all numbers that would be fine, except for the 0, which they want to be a plain 0. example below

I tried changing the format="c1" ... but any changes there are not possible, and there is no way to know what value the field will hold in the column itself.

I tried changing the ng-template with [format]="formatOptions" and then setting them, but that changes the format in the numerictextbox field and not the column representation.

is there a way to conditionally format the column cell formatting on the condition being 0 ...

 

thank you for the help

[Martin Bechev]

Hello Jimmy,

Thank you for the provided code snippet and screenshot.

Setting the format option of the <kendo-grid-column> component is the right way to go when the developer wants to format all numbers in a certain column. The "c" specifier stands for currency. To specify a precision, add a number after "c"

https://github.com/telerik/kendo-intl/blob/develop/docs/num-formatting/index.md#standard

However, the format option does not allow changing the format on the fly, based on the value. By default, it is applied to all numbers in the column.

Having said that, the approach that could be taken in order to accomplish the desired formatting is to use kendoGridCellTemplate and manually format the numbers using the formatNumber method of the IntlService:

https://www.telerik.com/kendo-angular-ui/components/globalization/internationalization/parsing-and-formatting/#toc-number-formatting

Apply different formats based on value like:

constructor(public intl: IntlService) {}

   <ng-template kendoGridCellTemplate let-dataItem="dataItem">
       <span *ngIf="dataItem.UnitPrice !== 0">{{ intl.formatNumber(dataItem.UnitPrice, "c2") }}</span>

       <span *ngIf="dataItem.UnitPrice === 0">{{dataItem.UnitPrice}}</span>
   </ng-template>

Then the format option of the column could be omitted.

Here is an example:

https://stackblitz.com/edit/angular-x7cdhw

I hope this helps.

Regards,
Martin
Progress Telerik