function(info) { // info.value - the current cell value // info.cell - the DOM element of the cell // info.item - the current row's data object}
Parameter
Type
Description
info.value
any
The display value of the current cell
info.cell
HTMLElement
The DOM element to apply CSS classes to using jQuery $(info.cell)
info.item
object
The full work item data for the current row, providing access to any column value via info.item['<binding>']
Cell decorator functions compare against enum IDs (e.g., 'yes'), not display values (e.g., 'Y'). Always use the enum ID from your Polarion custom field configuration. Using the display value is a common source of non-working decorators.
Use jQuery toggleClass to add or remove CSS classes based on conditions:
function(info) { var val = info.value; $(info.cell).toggleClass('className', condition);}
The toggleClass method takes two parameters: the CSS class name and a boolean condition. When the condition is true, the class is added; when false, it is removed. You can chain multiple toggleClass calls to apply different classes based on different thresholds.
CSS styles defined in the styles object often require the !important directive to override the default Risksheet grid styling. Without !important, your custom background colors and text colors may not appear.
When a decorator name in cellDecorators matches a column’s id (or binding), the decorator is automatically applied to that column. No additional configuration is needed:
Applies conditional styling to row headers based on the revised RPN value:
{ "cellDecorators": { "rowHeaderRpnNew": "function(info){ var val = info.item['rpnNew']; $(info.cell).toggleClass('rpn1', val>0 && val <= 150 ); $(info.cell).toggleClass('rpn2', val>0 && val > 150 && val <= 350); $(info.cell).toggleClass('rpn3', val>0 && val > 350);}" }, "headers": { "rowHeader": { "renderer": "rowHeaderRpnNew" } }}
To use a cell decorator on row headers, set headers.rowHeader.renderer to the decorator name. The row header decorator accesses info.item['rpnNew'] instead of info.value because the row header cell does not have a direct binding to the RPN field.
This pattern prevents editing of severity, occurrence, and detection columns when the item’s approval status is approved. The systemReadOnlyFields property accepts an array of column bindings that should be locked.
The systemReadOnlyFields pattern for conditional column editability is an advanced technique. Test thoroughly in your environment before deploying to production.
This workaround applies a CSS class with max-height to cells, referenced via the cellRenderer column property. It is a styling workaround rather than a built-in row height property.
Cell decorators are not applied during comparison mode (baseline comparison view). In comparison mode, the grid uses its own highlighting system to show added, removed, and modified cells. Custom cell renderers are also disabled during comparison to prevent visual conflicts with the comparison indicators.
Cell decorator styles (background colors, text colors) are preserved when exporting to Excel and PDF formats (version 24.2.2+). The export process reads CSS colors from the rendered grid cells and converts them to the corresponding Excel fill/font colors or PDF styling.
