Title: [SOLVED ] change datagrid rowStyler in runtime
Post by: Juan Antonio Martínez on April 12, 2017, 01:50:24 AM
Hi all. I have a datagrid with own row styler: /** * 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: 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
Title: Re: [SOLVED ] change datagrid rowStyler in runtime
Post by: Juan Antonio Martínez on April 12, 2017, 03:15:25 AM
As interim solution i have this code. Not so elegant but... 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
Title: Re: [SOLVED ] change datagrid rowStyler in runtime
Post by: jarry on April 13, 2017, 12:23:13 AM
Here is the extended method to refresh the special row style. (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: $('#dg').datagrid('refreshRowStyle', 0); $('#dg').datagrid('refreshRowStyle', 3);
|