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 ?
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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With