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

32,710

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

Share:
32,710
Data Crusader
Author by

Data Crusader

I'm a Web Developer primarily focusing on JavaScript and all its related goodies.

Updated on October 01, 2021

Comments

  • Data Crusader
    Data Crusader over 2 years

    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 ?