Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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 ?

like image 580
Data Crusader Avatar asked Sep 10 '13 21:09

Data Crusader


People also ask

How do you bind data in kendo grid?

Bind data to Kendo Grid by using AJAX Read action method. Change the datasource on change event of any HTML controls. Normally, a developer can bind the data to Grid by using AJAX Read method. This read method is ActionResult method in MVC which will return JSON DataSourceResult & direclty bind the data to Grid.

What is selectable in kendo grid?

selectable Boolean|String|Object (default: false)If set to true the user would be able to select grid rows. By default selection is disabled. Can also be set to the following string values: "row" - the user can select a single row.


1 Answers

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

like image 157
OnaBai Avatar answered Oct 03 '22 06:10

OnaBai