Best Practices: Formatting / Styling DataGrids...

[2plus2]

We have a Data Grid that is marginally complex. Merging Cells between rows, and about 15 columns. Grouping the data visually has become an issue in order to provide the fastest way to view the data.

We are thinking that column lines might be important in these visual groupings, applying them as end-caps to the grouped columns. e.g. front of column 6, and back of column 8, etc.

First question: How are others styling the Data Grids to visual group information?

Second question: Is there an equivalent to styler for adding a class instead of inline CSS? I would prefer to have a CSS Class that I can update centrally than a bunch of inline-styles. (Granted I could use a centralized function call, but if it's a class the designers can update it themselves.

[jpierce]

Funny, I was just coming here to suggested a version of styler that would expect a CSS class to apply.  It seems like a much better practice when you're applying the same styles all over the place.  I have some users that are okay to be messing with the css file but who I don't want screwing up the javascript.

They could easily make it where if the styler function returns a single string with no colon, it's expected to be a css class name(s) to apply.

[stworthy]

Here is the solution to return class name in 'styler' function. First of all extend or override the 'renderRow'.

Code:

$.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:

Code:

// 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';
}

[jpierce]

Very nice and I much appreciate the quick response.  I didn't realize you could do it this way.  I might tweak it to allow me to just treat a colon-less string as a css class name as well.