Slickgrid is a JavaScript grid component by Michael Leibman. This is a great grid which is very flexible and customizable and very fast to load and display data. Over the next few weeks we will be blogging about Slickgrid in general as well as a few areas in which we have extended its functionality. This blog will address one of those areas where functionality was extended.
I recently came across the need to display pricing information for products and could not find information on a currency column formatter. The raw data returned from my web service displayed the data as 0.0000. So there was no currency formatting ($ symbol) and the decimal precision was returned to four places. I wanted the data to be formatted like typical US currency with a $ and to two decimal places, like this: $0.00. Maybe I didn't look hard enough to find a ready-made solution, but at any rate, I quickly wrote my own currency formatter and thought it might help someone else looking to do something similar.
The column formatting functions for Slickgrid are contained in the slick.formatters.js file. I appended this file with a new function by adding the following bit of code:
function CurrencyFormatter(row, cell, value, columnDef, dataContext) {
if (value === null || value === "" || !(value > 0)) {
return "$" + Number();
} else {
return"$" + Number(value).toFixed(2);
}
}
Additionally, you will need to modify the top section of the script to register the newly created namespace. I added the following code (highlighted in yellow) to the existing function:
(function ($) {
// register namespace
$.extend(true, window, {
"Slick": {
"Formatters": {
"PercentComplete": PercentCompleteFormatter,
"PercentCompleteBar": PercentCompleteBarFormatter,
"YesNo": YesNoFormatter,
"Checkmark": CheckmarkFormatter,
"Currency": CurrencyFormatter
}
}
});
Now when you define your columns in your html page that will display your Slickgrid control, you need to add the following bit of code to the column definition to reference the currency formatting function that we just created above:
columns = [
{ id: "Price", name: "Price", field: "Price", width: 80, cssClass: "cell-title", formatter: Slick.Formatters.Currency }
];
That's it. Now the data shown in the currency formatted column will display as "$0.00", rather than the raw, unformatted data that may be returned in your web service or database call. If the value being evaluated is null, an empty string or an empty object, the data will be rendered as $0. This did the trick for me! Stay tuned for more Slickgrid information in future blogs. Happy coding.
