column.renderer : functionDefault: undefined

A renderer is an 'interceptor' function which can be used to transform data (value, appearance, etc.) before it is rendered.

If the renderer function return a value, then this value is going to be automatically set as value of the cell.
If the renderer function doesn't return a value, then you have to set the content of the cell manually.


value {string} the record field value
record {object} the data of the row record
$cell {object} the current table cell presented as jquery object
$displayEl {object} inner div element for display of the cell value presented as jquery object
id {string} the id of the record



 <table id="grid" data-source="/Players/Get"></table>
     var nameRenderer = function (value, record, $cell, $displayEl) {
         $cell.css('font-style', 'italic');
         $displayEl.css('background-color', '#EEE');
         columns: [
             { field: 'ID', width: 56 },
             { field: 'Name', renderer: nameRenderer },
             { field: 'PlaceOfBirth', renderer: function (value, record) { return record.ID % 2 ? '<b>' + value + '</b>' : '<i>' + value + '</i>'; }  }