Field Outline color for Child Document Not Working

1

Hi,

The following code is working on Parent DocType records:
However, it is not working on the Child records. Is there any change in syntax for Child DocType records?

Here is the code :

	f1 = document.querySelector('[data-doctype="Parent Document"][data-fieldname="my-field"]');
	f1.style.border="solid 1px green";

Thanks,
Joseph

2

Hi @pjoseph,

Please check the post.

I hope this helps.

Thank You!

3

No Luck Patel @NCP

I want border color for a field on a child table, not the entire record. your solution works for entire child table row.

4

Hi @pjoseph,

Please apply it and check it.

frappe.ui.form.on('Sales Order', {
    refresh: function(frm) {
        var rows = document.getElementsByClassName("grid-row");
        for (var i = 0; i < rows.length; i++) {
            var fieldElement = rows[i].querySelector(".grid-static-col[data-fieldname='item_code']");
            if (fieldElement) {
                fieldElement.style.borderColor = "red";
                fieldElement.style.borderWidth = "2px";
                fieldElement.style.borderStyle = "solid";
            }
        }
    }
});

Output:

image
image1920×892 59 KB

Please set your field and doctype in the script.

I hope this helps.

Thank You!

5

Thanks Patel @NCP

This is working fine on the table view. But, I need it on the Child Form after pressing the “Edit” button at the end. Hope I communicate correctly.

6

Hi @pjoseph,

You can try with your logic. You can learn from documentation/video.

Thank You!

7

@NCP , will this work even if the grid is more than 50 rows? Not working for me…

8

Hi @ErpnextRaja,

Please apply it.

frappe.ui.form.on('Sales Order', {
    refresh: function(frm) {
        applyBorderColor();
        $('body').on('click', 'button.btn.btn-secondary.btn-xs.prev-page, button.btn.btn-secondary.btn-xs.next-page, button.btn.btn-secondary.btn-xs.first-page, button.btn.btn-secondary.btn-xs.last-page', function() {
            applyBorderColor();
        });
    }
});

function applyBorderColor() {
    var rows = document.getElementsByClassName("grid-row");
    for (var i = 1; i < rows.length; i++) {
        var fieldElement = rows[i].querySelector(".grid-static-col[data-fieldname='item_code']");
        if (fieldElement) {
            fieldElement.style.borderColor = "red";
            fieldElement.style.borderWidth = "2px";
            fieldElement.style.borderStyle = "solid";
        }
    }
}

Output:

image
image1920×912 78.7 KB

Thank You!

1 Like
9

@NCP , Thank you very much… It is working. But my situation is color should be based on condition where the selling price is less than the cost price…which is not available in the grid. I am working on it… Thanks a lot

10

You can manage and set it according to your scenario.

Thank You!

1 Like
11

@NCP , Really sorry… Since morning trying to sort it… but couldn’t. can you please help… I want to change the style if the rate is less than incoming_rate…
items child doctype is having 84 items. but
var rows = document.getElementsByClassName(“grid-row”);
showing only 63… I am having very less knowledge in js…