How to Highlight Few Rows of a Child Table?

Frappe Framework App Development
21

Hi @ruchin78

Yes, I think it is possible but I need to make some testing for finding how.
If you will give me direct example(row/column’s name).
I’ll update you.

Regards,
Natalia

22

@SwitsolAG
Thanks for your quick response
column name is club
child_table field name is shipping_list

Also, I am trying to increase the font size but it not working

$("div[data-fieldname=shipping_list]").find(format('div.grid-row[data-idx="{0}"]', [item.idx])).css({'font-size': 'x-large'});

I tried making a row bold it is working fine:

$("div[data-fieldname=shipping_list]").find(format('div.grid-row[data-idx="{0}"]', [item.idx])).css({'font-weight': 'bold'});
23

Hi, I don’t think it still active for you but probably

$(“div[data-fieldname=shipping_list]”).find(format(‘div.grid-row[data-idx=“{0}”]’, [item.idx])).css({‘font-size’: ‘20’});

you should use 20 or other number

$(“div[data-fieldname=shipping_list]”).find(‘.grid-static-col[data-fieldname=‘your_column_name’]’').css({‘background-color’: ‘green’});

24

Hello guys,

Same in my case too, background is not changing. Can you please help me fix it. My code as follows.

		$.each(cur_frm.doc['boq_item'], function(i, item){
			console.log($("div[data-fieldname=boq_item]").find(format('div.grid-row[data-idx="{0}"]', [item.idx])));
			$("div[data-fieldname=boq_item]").find(format('div.grid-row[data-idx="{0}"]', [item.idx])).css({'background-color': '#FF0000'});
			$("div[data-fieldname=boq_item]").find(format('div.grid-row[data-idx="{0}"]', [item.idx])).find('.grid-static-col').css({'background-color': '#FF0000'});
		})

image
image1248×528 36.4 KB

25

@SwitsolAG kindly share this code I am receiving “format is not defined” error

26

@Muhammad_Sajid I too receiving same error in version 12 “Uncaught (in promise) ReferenceError: format is not defined” in my console kindly share the code @SwitsolAG

27

@Nivedha @Muhammad_Sajid @SwitsolAG
You can highlight grid row based on condition as below:

cur_frm.fields_dict["shipping_list"].$wrapper.find('.grid-body .rows').find(".grid-row").each(function(i, item) {
	let d = locals[cur_frm.fields_dict["shipping_list"].grid.doctype][$(item).attr('data-name')];
	if(d["product_name"] === "PV/One Crease"){
		$(item).find('.grid-static-col').css({'background-color': '#FF0000'});
	}
});
6 Likes
28

@sanjay Thank you. It’s working fine now :+1:

29

this is my issues plz help me send your code

30

This is the code I use to highlight rows with rate = 0 in Sales Order

frappe.ui.form.on('Sales Order Item', {
	    rate: function(frm, cdt, cdn) {
		    cur_frm.fields_dict["items"].$wrapper.find('.grid-body .rows').find(".grid-row").each(function(i, item) {
	            let d = locals[cur_frm.fields_dict["items"].grid.doctype][$(item).attr('data-name')];
	            if(d["rate"] == 0){
		            $(item).find('.grid-static-col').css({'background-color': 'yellow'});
	            }
	            else {
	                $(item).find('.grid-static-col').css({'background-color': 'transparent'});
	            }
            });
	    }
});

I hope this helps

2 Likes
31

thank you

32

When the codes above are put in the refresh event, only the first page of the child table is highlighted. Any idea how to make it work when switching pages if the child table exceeds 50 rows?

33

Hi, may I know if I only want to change the certain column background color instead of whole row?
let say:

frappe.ui.form.on('Timesheet', {
	   approval_status : function(frm, cdt, cdn) {
		     cur_frm.fields_dict["time_logs"].$wrapper.find('.grid-body .rows').find(".grid-row").each(function(i, item) {
        let d = locals[cur_frm.fields_dict["time_logs"].grid.doctype][$(item).attr('data-name')];
        if(d["approval_status"] === 'Approved'){
             ***here I just like to change the column which showing "Approved" 
        }
    })

Thank you

34

try:

$(item).find('.grid-static-col[data-fieldname="approval_status"]').css({'background-color': 'yellow'});
3 Likes
35

Its works, Thank you so much!!!

1 Like
36

Excuse me.do you find the answer?I encountered the same scene

37

The code I shared worked for v13. Are you having any issues?

38

hi this solution doest work for me
kindly help pls