Try ERPNext Buy Support Partners Foundation

How to Highlight Few Rows of a Child Table?

Hi,
I have a use case where I will be having 100 Items in a Child Table, few of the items will be having qty. >0 and few will have qty. = 0. Now, what I want that, I want to highlight those rows which are having qty.>0.

Is there any way to do it?

Regards
Ruchin Sharma

Hi,

$.each(cur_frm.doc[items], function(i, item) {
                        if(item.qty > 0) {
                            $("div[data-fieldname=" + items + "]").find(format('div.grid-row[data-idx="{0}"]', [item.idx])).css({'background-color': '#FF0000 !important'});
                            $("div[data-fieldname=" + item + "]").find(format('div.grid-row[data-idx="{0}"]', [item.idx])).find('.grid-static-col').css({'background-color': '#FF0000 !important'});
                        }
                    })

@SwitsolAG
It’s not working
I have a child table name shipping_list and a field in the child table name qty, but it is not working at all.

Regards
Ruchin Sharma

Hi, and you tried to add it to refresh?

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

Hi @SwitsolAG
Sorry I didn’t understand what you are trying to say:

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

@SwitsolAG

Here is my code I am using it on a fieldname **one1** 
$.each(cur_frm.doc.shipping_list, function(j,item1)
{
if(d.product_name=="PV/One Crease" || d.product_name=="PV/One Auto ID" || d.product_name=="PV/One LBS")
{
    if(item.item_code==item1.item_code)
    {
   item1.one1=1;
 $("div[data-fieldname=shipping_list]").find(format('div.grid-row[data-idx="{0}"]', [item1.idx])).css({'background-color': '#FF0000 !important'});
$("div[data-fieldname=shipping_list]").find(format('div.grid-row[data-idx="{0}"]', [item1.idx])).find('.grid-static-col').css({'background-color': '#FF0000 !important'});
         }
}
});

but as I understood you wanted just one if item.qty>0 and in your code I can see others and are you sure that your conditions are working?

@SwitsolAG
Yes, the condition is working fine as it is updating the value in child table.

Do you have any working code, if yes I appreciate if you may share the same with the screenshot.

Regards
Ruchin Sharma

Yes, it works in my case

@SwitsolAG
Strange, don’t know why it is not working me.
Any idea, am I doing something wrong?

try to add console.log($(“div[data-fieldname=shipping_list]”).find(format(‘div.grid-row[data-idx="{0}"]’, [item1.idx]))) and check console

and try to change it to $(“div[data-fieldname=“shipping_list”]”).find(format(‘div.grid-row[data-idx="{0}"]’, [item1.idx]))

$.each(cur_frm.doc.shipping_list, function(j,item1)
{
if(d.product_name=="PV/One Crease" || d.product_name=="PV/One Auto ID" || d.product_name=="PV/One LBS")
{
    if(item.item_code==item1.item_code)
    {
   item1.one1=1;
 $("div[data-fieldname="shipping_list"]").find(format('div.grid-row[data-idx="{0}"]', [item1.idx])).css({'background-color': '#FF0000 !important'});
**console.log($("div[data-fieldname=shipping_list]").find(format('div.grid-row[data-idx="{0}"]', [item1.idx])))**
$("div[data-fieldname="shipping_list"]").find(format('div.grid-row[data-idx="{0}"]', [item1.idx])).find('.grid-static-col').css({'background-color': '#FF0000 !important'});
         }
}
});

@SwitsolAG
I tried this, it is saying:

ReferenceError: item1 is not defined

Regards
Ruchin

sorry but it seems you didn’t add console.log to the correct place you should add it after second condition

@SwitsolAG
Below is my code, nothing happened.

$.each(cur_frm.doc.shipping_list, function(j,item1)
{
if(d.product_name=="PV/One Crease" || d.product_name=="PV/One Auto ID" || d.product_name=="PV/One LBS")
{

    if(item.item_code==item1.item_code)
    {
    item1.one1=1;
$("div[data-fieldname=shipping_list]").find(format('div.grid-row[data-idx="{0}"]', [item1.idx])).css({'background-color': '#FF0000 !important'});
$("div[data-fieldname=shipping_list]").find(format('div.grid-row[data-idx="{0}"]', [item1.idx])).find('.grid-static-col').css({'background-color': '#FF0000 !important'});    
console.log($("div[data-fieldname=shipping_list]").find(format('div.grid-row[data-idx="{0}"]', [item1.idx])))

        }
}
});

@SwitsolAG
The idx is printed in the console, but the row is not getting coloured!!

@SwitsolAG
@krithi_ramani
I just noticed an error on console:

Expected end of value but found ‘!’. Error in parsing value for ‘background-color’. Declaration dropped. desk

@SwitsolAG
@krithi_ramani
It worked for me after removing !important

Regards
Ruchin Sharma

Works now, but why isn’t the entire row highlighted? only first 2 columns and last column is coloured.

My use case is to highlight the row when a checkbox in that row is selected. The mouse click is on that row on check of the checkbox, and 3 columns alone gets highlighted. If I click elsewhere after this, the entire row gets coloured.

Any ideas on how to remove the mouse click upon highlighting?

Thanks
Krithi

Hi @SwitsolAG
Is there any way that, we can use it for a particular column and/or a cell.

Regards
Ruchin Sharma