Question

In Table Control how can we highlight row(s) based on data inside one cell using jquery ?

Answer 1

Row highlighting in the UI Toolkit Table is done in the table's row rendering event, which receives the record; you decide the class or style per row:

// Table "Orders" > Events > On row rendered   (row = <tr> element, record = the bound list element, index)
row.classList.remove("danger", "warning", "success");
if (record.status === "REJECTED")      row.classList.add("danger");     // Bootstrap 3 row classes: active, success, info, warning, danger
else if (record.amount > 10000)        row.classList.add("warning");
else if (record.status === "APPROVED") row.classList.add("success");

// arbitrary style
if (record.priority === "HIGH") { row.style.fontWeight = "bold"; row.style.borderLeft = "4px solid #d9534f"; }

Re-apply after the data changes: the table re-renders rows when the bound list changes (setData) or when you call ${Orders}.refresh(); if you change a field of one record from code, refresh that row (${Orders}.refresh(); newer toolkits also offer a per-row refresh).

Older toolkit versions without On row rendered: use the Render cell option of one column to climb to the row (cell.parentNode.classList.add(...)), or a formula-driven hidden column plus CSS. For the heritage Dojo table the only hook was CSS per row parity - upgrade to the UI Toolkit table. Related: question 3130 (colours per column).

References

• BPM UI Toolkit - Table control events (on row rendered)