Print Page - Highlighting particular columns in the datagrid [Solved]

Title: Highlighting particular columns in the datagrid [Solved]
Post by: Darrel on March 26, 2016, 02:38:02 PM

Hello,

I have a scenario where I wish to highlight some particular columns in the datagrid. This is based on the values from the column present above the current row.
If the value in the previous row's column does not match with the value in the current row's column for that particular column, then the data should be highlighted in some colored font/background.
This is my basic fiddle link, without the highlighting code: http://jsfiddle.net/DROCKS/hLdrwmkc/1/ (http://jsfiddle.net/DROCKS/hLdrwmkc/1/)

From the fiddle data, I want to highlight "price2" in the second row since it differs from the value above it which is "price1";
highlight "price1" in the third row since it differs from the value above it which is "price2" and in the final row, i.e, the fourth row, highlight "data1" and "name2" since their values differ from the above respective column values...

I did happen to read about rowStyler and styler in documents section, but noticed that this has to be maintained in the during the datagrid column creating part only. In my case, there maybe a styler on some particular row's column or there may be no styler at all if the data does not differ.

I tried to do the same by referring the details given in the following post but I get an error: http://www.jeasyui.com/forum/index.php?topic=5268.0 (http://www.jeasyui.com/forum/index.php?topic=5268.0)
and it's respective fiddle: http://jsfiddle.net/jg0t94g7/56/ (http://jsfiddle.net/jg0t94g7/56/)
This is my fiddle link after trying the styler property: http://jsfiddle.net/DROCKS/hLdrwmkc/2/ (http://jsfiddle.net/DROCKS/hLdrwmkc/2/)

So I was confused, how to achieve the same.

Please could anyone help me out with this.
Any help would be appreciated. Thanks in advance!!!

Title: Re: Highlighting particular columns in the datagrid
Post by: stworthy on March 26, 2016, 08:52:33 PM

The 'highlight' function can be defined as:

Code:

function highlight(val,row,lol){
	var field = this.field;
	if (lol > 0 && data[lol][field] != data[lol-1][field]){
		return 'color:red';
	} else {
		return '';
	}
}

This is the updated fiddle link: http://jsfiddle.net/hLdrwmkc/3/

Title: Re: Highlighting particular columns in the datagrid
Post by: Darrel on March 27, 2016, 11:21:24 PM

Hello stworthy,

Thanks for your response. It does work as expected but however I'm facing one more problem in this scenario.
My column data comes as a JSON object having the key and value pairs enclosed within double quotes.

The following is my code snippet for achieving:

Code:

$(function(){
	//value is stored in this variable after the ajax Call. For now some value have been hard coded for your reference.
	var JSON_DataGrid = '{"TABLE_DATA":{"COL_DATA":[{"field":"col_0","title":"col_0","halign":"center","align":"center","styler":"highlight"},{"field":"col_1","title":"col_1","halign":"center","align":"center","styler":"highlight"},{"field":"col_2","title":"col_2","halign":"center","align":"center","styler":"highlight"},{"field":"col_3","title":"col_3","halign":"center","align":"center","styler":"highlight"}],"ROW_DATA":[{"col_0":"ABC","col_1":"IN","col_2":"GENE","col_3":"AA"},{"col_0":"DEF","col_1":"IN","col_2":"GENERIC","col_3":"AA"},{"col_0":"GHI","col_1":"IN","col_2":"","col_3":"DU"},{"col_0":"JKL","col_1":"IN","col_2":"GENE","col_3":"AA"},{"col_0":"MNO","col_1":"IN","col_2":"GENE","col_3":"AA"},{"col_0":"PQR","col_1":"IN","col_2":"GENE","col_3":"AA"},{"col_0":"STU","col_1":"IN","col_2":"GENE","col_3":"AA"},{"col_0":"VWX","col_1":"IN","col_2":"GENE","col_3":"AA"}]}};

	function highlight(val,row,lol){
		var field = this.field;
		//if (lol > 0 && data[lol][field] != data[lol-1][field]){
		if (field != 0 && field != 1 && lol > 0 && data[lol][field] != data[lol-1][field]){
			return 'color:red';
		} else {
			return '';
		}
	}

	function createTable()
	{
		var tableData = JSON.parse(JSON_DataGrid);
		var colData = tableData.TABLE_DATA.COL_DATA;
		var rowData = tableData.TABLE_DATA.ROW_DATA;

		$("#DATA_TABLE").datagrid({
			columns: [colData],
			data: rowData
		});
	}

	createTable();
});

//in the html code I just have a simple table
<TABLE class="detailstable" cellspacing="2" cellpadding="2" width="100%" id="DATA_TABLE"></TABLE>

The above code throws an error an only renders/creates the column headers.

The similar code is simplified and added in the fiddle link as follows: [link]http://jsfiddle.net/DROCKS/fkmpex9u/1/[/link]

As you can see the fiddle loads only the column headers but not the data due to function expected (on IE) / col.styler is not a function(Chrome) error. On tracing the same, I found out that the error was occurring in the jquery.easyui.min.js file for on the line var css=col.styler?(col.styler(_794,_791,_790)||""):"";

This happened as it was not getting the highlight function. So I tried to modify the code for the same but again it was giving the same error....

Code:

//var css=col.styler?(col.styler(_794,_791,_790)||""):"";          //existing code

//modified code - Start
var col_styler = col.styler;
if(typeof col_styler != "undefined")
{
	//trying to remove the double quote from the starting of the string.
	//col_styler = col_styler.substring(1, col_styler.length - 1);
	//alert("col_styler: " + col_styler);
	if (col_styler[0] === '"' && col_styler[col_styler.length - 1] === '"')
		col_styler = col_styler.slice(1, col_styler.length - 1);

	//however the col_styler[0] give the letter h instead of the double quote symbol.
}

//tried it with the replaced string but it failed
//var css=col_styler?(col_styler(_794,_791,_790)||""):"";

//tried using it with eval also, still it failed
var css=col_styler?(eval(col_styler(_794,_791,_790))||""):"";
//modified code - End

Please could you tell me how to avoid that problem. Thanks in advance.

Title: Re: Highlighting particular columns in the datagrid
Post by: stworthy on March 27, 2016, 11:56:58 PM

The 'styler' property value must be a function. Please convert it to a function before creating the datagrid.

Code:

$.map(cdata[0], function(c){
	if (c.styler){
  	c.styler = eval('{'+c.styler+'}');
  }
})

The update fiddle is at: http://jsfiddle.net/fkmpex9u/2/

Title: Re: Highlighting particular columns in the datagrid
Post by: Darrel on March 28, 2016, 12:45:51 AM

Thanks a lot stworthy..

It worked amazingly. Thanks for your time. God bless!!!

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Darrel on March 26, 2016, 02:38:02 PM