ERPNext Conference 2019* ERPNext.com Blog

Coloring row of query report

customization

#1

Hi all,
What is the best way to color rows in query report based on a condition?
Thanks
Maysaa


#2

#3

Thank for your replying @Hafees_Kazhunkil
I look at these link but I want to color all the row not the values


#4

any suggession plz?


#5

@MaysaaSafadi have you found any solution?


#6

I’m doing it like this:

"formatter": function(value, row, column, data, default_formatter) {
        value = default_formatter(value, row, column, data);
        if(CONDITION){
            value = '<b style="color: red;">'+value+'</b>';
        }

        return value;
    },

In the CONDITION you can access to all the cells of the row with data. For example, if CONDITION is data.column1 > 10 every row that has a value greater than 10 in column1 will be colored in red.


Coloring cells in reports not working in v12
#7

The problem with using a formatter is that if you want the backgound color, it will look ugly. If you need to change the background color, you can use this:

frappe.ui.form.on('doctype', { :

after_datatable_render: table_instance => {
	let data = table_instance.datamanager.data;
	for (let row = 0; row < data.length; ++row) {
		let array_str = data[row]['to_highlight'][0];
		if (index_str) {
			let columns_to_highlight = index_str.split(', ').map(el => {
				return parseInt(el);
			});
			columns_to_highlight.forEach(col => {
				table_instance.style.setStyle(`.dt-cell--${col + 1}-${row}`, {backgroundColor: 'rgba(37,220,2,0.2);'});
			});
		}
	}
	table_instance.style.setStyle(`.dt-scrollable`, {height: '600px;'});
},

The problem is, if you move columns and sort rows, the coloring won’t follow the data =)


#8

@Nahuel_Nso thanks buddy, you too @igrekus