CODEWITHSUNDEEP
javascriptangularkendo-uikendo-gridkendo-ui-angular2
StepUp
StepUp

Reputation: 38094

Using format property of kendo-grid-column in ng-template?

kendo-grid-column has a great column property 'format'. And it works perfectly.

<kendo-grid [data]="gridData">
    <kendo-grid-column field="UnitPrice" title="Unit Price" format="{0:n0}">
        <ng-template kendoGridCellTemplate format="{0:n0}" let-dataItem>
            <a href="#" class="badge badge-info">{{ dataItem?.UnitPrice }}</a>      
        </ng-template>
     </kendo-grid-column>
     <kendo-grid-column field="UnitPrice" title="Unit Price" format="{0:n0}">         
     </kendo-grid-column>
</kendo-grid>

What I need is to add anchor tag and use format property of kendo-grid-column. So I've added ng-template to kendo-grid-column:

<kendo-grid-column field="UnitPrice" title="Unit Price" format="{0:n0}">
    <ng-template kendoGridCellTemplate format="{0:n0}" let-dataItem>
        <a href="#" class="badge badge-info">{{ dataItem?.UnitPrice }} </a>
    </ng-template>
</kendo-grid-column>

However, format="{0:n0} is not working in ng-template:

<ng-template kendoGridCellTemplate format="{0:n0} let-dataItem>
    <a href="#" class="badge badge-info">{{ dataItem?.UnitPrice }} </a>
</ng-template>

I've created an example to show what I have.

Is it possible to use format property of kendo-grid-column in ng-template?

Upvotes: 4

Views: 2398

Answers (2)

ps0604
ps0604

Reputation: 1071

You should use the Kendo number formatting functions, such as

kendo.toString(10.12, "n5"); //10.12000

OR just use methods of Kendo IntlService:

  • formatNumber()
  • parseNumber()
  • format()

Upvotes: 1

xinthose
xinthose

Reputation: 3820

Use an internationalization pipe. I found the answer here.

<kendo-grid-column field="UnitPrice" title="Unit Price" format="{0:n0}">
    <ng-template kendoGridCellTemplate format="{0:n0}" let-dataItem>
        <a href="#" class="badge badge-info">{{ dataItem?.UnitPrice | kendoNumber: 'n0' }} </a>
    </ng-template>
</kendo-grid-column>

Upvotes: 1

Related Questions