Here is the solution to return class name in 'styler' function. First of all extend or override the 'renderRow'.
$.extend($.fn.datagrid.defaults.view,{
renderRow: function(target, fields, frozen, rowIndex, rowData){
var opts = $.data(target, 'datagrid').options;
var cc = [];
if (frozen && opts.rownumbers){
var rownumber = rowIndex + 1;
if (opts.pagination){
rownumber += (opts.pageNumber-1)*opts.pageSize;
}
cc.push('<td class="datagrid-td-rownumber"><div class="datagrid-cell-rownumber">'+rownumber+'</div></td>');
}
for(var i=0; i<fields.length; i++){
var field = fields[i];
var col = $(target).datagrid('getColumnOption', field);
if (col){
var value = rowData[field]; // the field value
var css = col.styler ? (col.styler(value, rowData, rowIndex)||'') : '';
var classValue = '';
var styleValue = '';
if (typeof css == 'string'){
styleValue = css;
} else if (cc){
classValue = css['class'] || '';
styleValue = css['style'] || '';
}
var cls = classValue ? 'class="' + classValue + '"' : '';
var style = col.hidden ? 'style="display:none;' + styleValue + '"' : (styleValue ? 'style="' + styleValue + '"' : '');
cc.push('<td field="' + field + '" ' + cls + ' ' + style + '>');
if (col.checkbox){
var style = '';
} else {
var style = styleValue;
if (col.align){style += ';text-align:' + col.align + ';'}
if (!opts.nowrap){
style += ';white-space:normal;height:auto;';
} else if (opts.autoRowHeight){
style += ';height:auto;';
}
}
cc.push('<div style="' + style + '" ');
cc.push(col.checkbox ? 'class="datagrid-cell-check"' : 'class="datagrid-cell ' + col.cellClass + '"');
cc.push('>');
if (col.checkbox){
cc.push('<input type="checkbox" name="' + field + '" value="' + (value!=undefined ? value : '') + '">');
} else if (col.formatter){
cc.push(col.formatter(value, rowData, rowIndex));
} else {
cc.push(value);
}
cc.push('</div>');
cc.push('</td>');
}
}
return cc.join('');
}
});
The usage examples:
// return both class name and inline styles
styler:function(){
return {
class: 'cc',
style: 'color:red'
}
}
// return only the inline styles
styler:function(){
return 'background:#eee;color:red';
}