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.
Parameters
| Name | Type | Description |
|---|---|---|
| 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 |
Examples
sample
<table id="grid" data-source="/Players/Get"></table>
<script>
var nameRenderer = function (value, record, $cell, $displayEl) {
$cell.css('font-style', 'italic');
$displayEl.css('background-color', '#EEE');
$displayEl.text(value);
};
$('#grid').grid({
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>'; } }
]
});
</script>