Colour child table rows based on logic

1

hey is there any way we can colour the rows of the grid in child table based on some logic. thank you in advance

frappe.ui.form.on('DocType', {
    refresh: function(frm) {
        // select the first row in the child table
        var rows = document.getElementsByClassName("grid-row");
            for (var i = 0; i < rows.length; i++) {
              rows[i].style.backgroundColor = "cadetblue";
            }
    }
});

image
image1446×467 53.1 KB

i want to colour the row based on item for eg for hotel i want the colour to be cadetblue and for Extra service i want the colour to be antiquewhite

2

@NCP can you help

3 
frappe.ui.form.on('Student', {
  refresh: function(frm) {
    var rows = document.getElementsByClassName("grid-row");
    var relationshipDetails = frm.doc.student_relationship_detail;

    for (var i = 1; i < rows.length; i++) {
      rows[i].style.backgroundColor = ""; // Reset color for all rows

      if (relationshipDetails && relationshipDetails[i-2]) {
        var relation_field = relationshipDetails[i-2].relationship;
        console.log(`${relation_field} ${i}`);

        if (relation_field === "Father") {
          rows[i].style.backgroundColor = "cadetblue";
        } else if (relation_field === "Mother") {
          rows[i].style.backgroundColor = "antiquewhite";
        }
        else if (relation_field === "Gaurdian") {
          rows[i].style.backgroundColor = "grey";
        }
        else if (relation_field === "Siblings") {
          rows[i].style.backgroundColor = "olive";
        }
      }
    }
  }
});
7 Likes
4

Well Done @Parth_Vashista :+1: