Format Kendo Grid to display dollars sign and allow up to two decimal?

Question

I have a kendo Grid that I create like this:

function drawInvoiceTable() {
    invoiceTable = $('#invoiceGrid').kendoGrid({
        sortable: true,
        pageable: true,
        dataSource: {
            data: getData(),
            pageSize: 10,
            schema: {
                model: {
                    id: 'test',
                    fields: {
                        active: false
                    }
                }
            }
        },
        columns: [
             { template: "<input type='checkbox' id='chkInvoices' class='invoiceDisplay' name='chkInvoices' #= active ? checked='checked' : '' #/>", width: 30 },
            { field: 'accountNumber', title: 'Account', attributes: { 'class': 'accountnumber' }, sortable: true },
            { field: 'transactionDate', title: 'Trans Date', attributes: { 'class': 'transdate' }, width: 100, sortable: true },
            { field: 'TransType', title: 'Type', attributes: { 'class': 'transType' }, width: 60, sortable: true },
            { field: 'TransReferenceNumber', title: 'Reference Number', attributes: { 'class': 'refnumber' }, width: 135, sortable: true },
            { field: 'transactionDebitAmount', title: 'Amount', attributes: { 'class': 'amount' }, width: 90, sortable: true },
            { field: 'openBalance', title: 'Balance', width: 90, attributes: { 'class': 'balance' }, template: '#= kendo.format("{0:p}", openBalance) #', sortable: true },
            { field: 'discountAmount', title: 'Discount', format: "{0:c}", attributes: { 'class': 'discount', 'data-format': 'c' }, width: 90, sortable: false },
            { field: 'discountApplied', title: 'Discount Applied', width: 95, attributes: { 'class': 'discapplied' }, sortable: false },
            { field: 'paymentApplied', title: 'Payment Applied' , width: 95, attributes: { 'class': 'paymentapplied' }, sortable: false },
            { field: 'discountDate', title: 'Discount Date', attributes: { 'class': 'discountDate' } },
            { field: 'dueDate', title: 'Due Date', width: 90, sortable: true }            
        ]
    });

    grid = $('#invoiceGrid').data('kendoGrid');
    dataSource = grid.dataSource;
    data = dataSource.data();
}

How can I have the values in some of my columns formatted with the dollar sign and allow up to 2 decimal such as $12541.23 ?

score 33 · Accepted Answer · answered Sep 10 '13 at 22:26

33

In the column definition use format: "{0:c2}":

{ field:"price", title:"Price", format:"{0:c2}" },

c stands for currency and 2 is the number of decimals

answered Sep 10 '13 at 22:26

OnaBai

40,767
6
96
125

I tried what you suggested above, but still no luck. Please look at my jsfiddle [here](http://jsfiddle.net/JFy2C/6/) – Data Crusader Sep 11 '13 at 00:46
7

You need to say that the field is of type `number`. See it here http://jsfiddle.net/JFy2C/8/ for `discountAmount` (and other fields) modified. – OnaBai Sep 11 '13 at 00:55
Is there any documentation for these format strings? Can't find any – Max Paymar Jul 28 '17 at 20:20
In case anyone still needs documentation for formatting, it can be found [here](https://github.com/telerik/kendo-intl/blob/develop/docs/index.md) under suggested links. – Drummerman921 Aug 24 '20 at 18:50

score 0 · Answer 2 · edited Sep 30 '21 at 23:02

0

You would want to set the column.format to "{0:c2}" "c2" is the number format (currency, 2 decimal places) which is defined here.

edited Sep 30 '21 at 23:02

Randy Burden

2,611
1
26
34

answered Sep 10 '13 at 22:27

CodingWithSpike

42,906
18
101
138

1

I tried what you suggested above, but still no luck. Please look at my jsfiddle [here](http://jsfiddle.net/JFy2C/6/) – Data Crusader Sep 11 '13 at 00:46

Format Kendo Grid to display dollars sign and allow up to two decimal?

2 Answers2