Select parent of element from custom field renderer to change table cell background color

  • 1
  • Question
  • Updated 4 days ago
  • In Progress
I am trying to change the background color of a table's cell based on the value. I am able to do this easily with a custom field renderer and a snippet using the following code. However, this changes the div inside the cell and I'd like to change the whole cell color.

var field = arguments[0],
    value = arguments[1],
$ = skuid.$;

console.log(field.element.parent());
console.log(value);


if (value >= 500) {
    field.element.css('background-color', 'red');
    field.element.css('color', 'white');
    field.element.text(value);
}
else if (value < 500) {
    field.element.css('background-color', 'green');
    field.element.css('color','white');
    field.element.text(value);
}



This works OK, but I'd like to change the whole cell's background color and not just the text div. However, when I try "field.element.parent()" or "$(field.element.parent()" or "field.element[0].parentElement", etc... I can't select the parent element.

How can I select the parent of the parent element that the field renderer snippet sends as the argument[s0]?
Photo of Sam Becker

Sam Becker

  • 1,158 Points 1k badge 2x thumb

Posted 1 week ago

  • 1
Photo of Matthew Leahy

Matthew Leahy, Employee

  • 592 Points 500 badge 2x thumb
Hi Sam,

Let's see if I can help you out. Can I impose on you to provide me with an XML copy of your Skuid page (Or example page)? It is helpful for me to look at locally.

Thank you for your patience,
Matt