A JavaScript function expression, or the name of a function defined in a solution JavaScript. The formatter returns the value to display in the cells of the column. Note that this only affects the displayed value, not the actual value of the cells, so for example copying data will copy the actual value and not the displayed value.


Column1 and Column2 in the following table has the Formatter property set to:
Column1 : func::examples.customCellFormatters.stringFormatter.col1Formatter
Column2 : func:: examples.customCellFormatters.stringFormatter.col2Formatter

ReverseTextDarth VaderEncloseSome text
ToUpperDarth VaderToLowerSome text
Darth VaderSome text

Formatters implementation

var examples;
var customCellFormatters;
var stringFormatter = (function(){
function stringFormatter(){
stringFormatter.col1Formatter = function(evtArgs){
if(evtArgs.rowData.Column1_Operation === 'ReverseText'){
return !evtArgs.value ? null : evtArgs.value.split('').reverse().join('');
}else if(evtArgs.rowData.Column1_Operation === 'ToUpper'){
return !evtArgs.value ? null : evtArgs.value.toUpperCase();
evtArgs.handled = false;
stringFormatter.col2Formatter = function(evtArgs){
if(evtArgs.rowData.Column2_Operation === 'Enclose'){
return '(' + evtArgs.value + ')';
}else if(evtArgs.rowData.Column2_Operation === 'ToLower'){
return !evtArgs.value ? null : evtArgs.value.toLowerCase();
evtArgs.handled = false;
return stringFormatter;
customCellFormatters.stringFormatter = stringFormatter;
})(customCellFormatters = examples.customCellFormatters
|| (examples.customCellFormatters={}));
})(examples || (examples = {}));

Gives the following result

ReverseTextredaV htraDEnclose(Some text)
ToUpperDARTH VADERToLowersome text
Darth VaderSome text

Cell Formatter Event argument

The event argument passed to the formatter function has the following properties (note the camel casing).



The value of the cell.


The data row that the cell belongs to.


Set this property to false if you want the standard formatting to apply.


The visual row index.


The visual column index.


The property name of the rowData object that the cell is data bound to. This is usually the column name of the data set, for example “Amount”.