How can I have a Change event functionality with RADIO_BUTTON enabled in a PICKLIST custom renderer

  • 1
  • Problem
  • Updated 3 years ago
  • (Edited)
I was trying to have a custom renderer script on a PICKLIST component in a table.

What I want to do is, populate the picklist values as radio buttons and highlight the table row when there is a non blank value.

I've tried below custom renderer and which rederes the PICKLIST as radio buttons.

Could someone tell me how could I have a change function with the field.options.type = 'RADIO_BUTTONS'; option enabled?


Is there any other way to highlight the rows of a table based on the selected picklist values?

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

field.options.type = 'RADIO_BUTTONS';
field.mode = field.mode === 'readonly' ? 'read' : field.mode;

switch( field.mode ) {   
    case 'edit':
        skuid.ui.fieldRenderers[field.metadata.displaytype].edit( field, value );
        if(value) {


Photo of Hasantha Liyanage

Hasantha Liyanage

  • 1,446 Points 1k badge 2x thumb

Posted 3 years ago

  • 1
Photo of David Giger

David Giger

  • 1,758 Points 1k badge 2x thumb
Hi Hasantha,

To add an event listener to your field, just add

     //your event stuff here
somewhere in your field-renderer. This event is fired every time the value of the field changes (e.g. if the user selects a value) and executes your event stuff.

This can be done with most of the JQuery-Events.

Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,828 Points 20k badge 2x thumb
Hasantha:  Do you remember that skuid lets you express a picklist field in radio buttons by changing the renderer property on the field?  At least half your work is done for you.


Then some conditional highlighting of the field when it is blank seems very reasonable..  Good number of examples of that here in the community.