Loading...

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.

Example

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

Column1_OperationColumn1Column2_OperationColumn2
ReverseTextDarth VaderEncloseSome text
ToUpperDarth VaderToLowerSome text
Darth VaderSome text

Formatters implementation

var examples;
(function(examples){
var customCellFormatters;
(function(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();
}else{
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();
}else{
evtArgs.handled = false;
}
};
return stringFormatter;
})();
customCellFormatters.stringFormatter = stringFormatter;
})(customCellFormatters = examples.customCellFormatters
|| (examples.customCellFormatters={}));
})(examples || (examples = {}));

Gives the following result

Column1_OperationColumn1Column2_OperationColumn2
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).

Properties:

value

The value of the cell.

rowData

The data row that the cell belongs to.

handled

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

rowNum

The visual row index.

colNum

The visual column index.

prop

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”.