How to Highlight Few Rows of a Child Table?

Frappe Framework App Development
1

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

2

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'});
                        }
                    })
1 Like
3

@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

4

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'});
          }
    });
5

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'});
          }
    });
6

@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'});
         }
}
});
7

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?

8

@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

9

Yes, it works in my case

working.png1008×226 11.2 KB

10

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

11

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'});
         }
}
});
12

@SwitsolAG
I tried this, it is saying:

ReferenceError: item1 is not defined

Regards
Ruchin

13

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

14

@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])))

        }
}
});
15

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

16

@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

17

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

Regards
Ruchin Sharma

18

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

19

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

20

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

Regards
Ruchin Sharma