Print Page - setting style attributes for the footer

I have been working with the demo for the datagrid footer. I see how to set specific cells as a highlight color and font color. How do you set the footer style? Such as font color, background, bold, etc..?

This is a great UI tool and the examples are really appreciated.

By default the 'rowStyler' option is invalid for footer rows. To enable it, the datagrid's view should be overridden. Here is the code to make footer rows have 'rowStyler' feature.

Code:

var myview = $.extend({}, $.fn.datagrid.defaults.view, {
	renderFooter: function(target, container, frozen){
		var opts = $.data(target, 'datagrid').options;
		var rows = $.data(target, 'datagrid').footer || [];
		var fields = $(target).datagrid('getColumnFields', frozen);
		var table = ['<table class="datagrid-ftable" cellspacing="0" cellpadding="0" border="0"><tbody>'];
		
		for(var i=0; i<rows.length; i++){
			var styleValue = opts.rowStyler ? opts.rowStyler.call(target, i, rows[i]) : '';
			var style = styleValue ? 'style="' + styleValue + '"' : '';
			table.push('<tr class="datagrid-row" datagrid-row-index="' + i + '"' + style + '>');
			table.push(this.renderRow.call(this, target, fields, frozen, i, rows[i]));
			table.push('</tr>');
		}
		
		table.push('</tbody></table>');
		$(container).html(table.join(''));
	}
});

Code:

$(function(){
	$('#dg').datagrid({
		view:myview
	});
});

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: pb on May 11, 2013, 03:59:57 AM