[SOLVED ] change datagrid rowStyler in runtime

[Juan Antonio Martínez]

Hi all.

I have a datagrid with own row styler:

Code:

/**
 * rowStyler function for livestream datagrids
 * @param {int} idx Row index
 * @param {object} row Row data
 * @return {string} proper row style for given idx
 */
function lsRowStyler(idx,row) {
	var c=( (idx&0x01)===0)?ac_config.ls_rowcolor1:ac_config.ls_rowcolor2;
	var rgb=hexToRGB(c);
	var a=parseFloat(ac_config.ls_alpha);
	return "background-color:rgba("+rgb.r+","+rgb.g+","+rgb.b+","+a+")";
}

Where ac_config stores several configuration parameters.

Additionaly I have an event driven method to change alpha:

Code:

function vwls_setAlphaOSD(alpha,dg) {
    alpha=parseFloat(alpha);
    if (alpha<0.0) alpha=0.0; if (alpha>1.0) alpha=1.0;
    // store new value
    ac_config.ls_alpha=alpha;
    // change css to activate new value
    // **** How can I do this?
    console.log ("new alpha is "+alpha);
    if (typeof(dg)!=="undefined") $(dg).datagrid('options').rowStyler=lsRowStyler;
}

What I want is repaint datagrid rows according new color alpha parameter, _without_ reloading entire datagrid

Is this possible?
If so, what's the right way to do

Thanks in advance
Juan Antonio

[Juan Antonio Martínez]

As interim solution i have this code. Not so elegant but...

Code:

function vwls_setAlphaOSD(alpha,tableid) {
    alpha=parseFloat(alpha);
    if (alpha<0.0) alpha=0.0; if (alpha>1.0) alpha=1.0;
    // store new value
    ac_config.ls_alpha=alpha;
    // change css to activate new value
    console.log ("new alpha is "+alpha);
    if (typeof(tableid)!=="undefined") {
        var rgb1=hexToRGB(ac_config.ls_rowcolor1);
        var rgb2=hexToRGB(ac_config.ls_rowcolor2);
        var a=parseFloat(ac_config.ls_alpha);
        $(".datagrid-btable tr:odd").css('background-color',"rgba("+rgb1.r+","+rgb1.g+","+rgb1.b+","+a+")");
        $(".datagrid-btable tr:even").css('background-color',"rgba("+rgb2.r+","+rgb2.g+","+rgb2.b+","+a+")");
    }
}

The only problem is that this code affects all datagrids. So need to properly insert #tableid into jquery selector.
Also this is not a rowStyler change, just a css one

So I ask again: what's the right way to change datagrid rowStyler in runtime?

Juan Antonio

[jarry]

Here is the extended method to refresh the special row style.

Code:

(function($){
	function setStyle(target, rowIndex){
		var opts = $.data(target, 'datagrid').options;
		var tr = opts.finder.getTr(target, rowIndex, 'body');
		if (!tr.length){return;}
		var rowData = opts.finder.getRow(target, rowIndex);
		var cs = _getRowStyle(rowIndex);
		var style = cs.s;
		var cls = 'datagrid-row ' + (rowIndex % 2 && opts.striped ? 'datagrid-row-alt ' : ' ') + cs.c;
		var cls12 = (tr.hasClass('datagrid-row-checked') ? ' datagrid-row-checked' : '') +
					(tr.hasClass('datagrid-row-selected') ? ' datagrid-row-selected' : '');
		tr.attr('style', style).attr('class', cls + cls12);

		function getStyleValue(css){
			var classValue = '';
			var styleValue = '';
			if (typeof css == 'string'){
				styleValue = css;
			} else if (css){
				classValue = css['class'] || '';
				styleValue = css['style'] || '';
			}
			return {c:classValue, s:styleValue};
		}
		function _getRowStyle(rowIndex){
			var css = opts.rowStyler ? opts.rowStyler.call(target, rowIndex, rowData) : '';
			return getStyleValue(css);
		}
	}
	$.extend($.fn.datagrid.methods, {
		refreshRowStyle: function(jq, index){
			return jq.each(function(){
				setStyle(this, index);
			});
		}
	});
})(jQuery);

Usage example:

Code:

$('#dg').datagrid('refreshRowStyle', 0);
$('#dg').datagrid('refreshRowStyle', 3);