Removing "none" option for non-required fields

  • 3
  • Question
  • Updated 3 years ago
  • Answered
I'm trying to render a non-required Field Editor picklist field as radio buttons without the "none" option. I know this essentially makes it required, but in this case we want to allow people to not choose a value without cluttering the UI with "none." We are okay with them not being able to unselect once they select. I've been working on a custom field renderer:
var field = arguments[0],value = arguments[1];
if (field.mode == 'edit') {
    var picklistEntries = new Object();
    picklistEntries.value = "A";
    picklistEntries.label = "A";
}
field.element.append(skuid.ui.renderers.PICKLIST.edit({
entries : picklistEntries,
renderas : "RADIO_BUTTONS",
onChange : function(value) {
field.model.updateRow(field.row,field.id,value,{ initiatorId : field._GUID});
},
mode : field.mode,
noneLabel : "ignore"
}));
This only shows the "none" option. Alternatively, I've been able to push new values to the end of the existing values, but that doesn't help. My goal was to be able to replace the list, including "none."

Any ideas?

My next attempt was going to be to actually output the HTML for each radio button and add CSS to the "none" option so that I could hide it. Any code samples for doing something like that?

Thanks,
Seth
Photo of Seth Leonard

Seth Leonard

  • 662 Points 500 badge 2x thumb

Posted 3 years ago

  • 3
Photo of JG GBC

JG GBC

  • 694 Points 500 badge 2x thumb
Picklistentries is an array of objects, so your if block should look like that:

if (field.mode == 'edit') {
var picklistEntries = [];
picklistEntries.push({
value: 'A',
label: 'A'
},{
value: 'B',
label: 'B'
});
}
When this works, you can add the following css:
.nx-fieldtext .nx-radiowrapper:first-child{
display:none;
}
This will hide the '--None--' option. If you want to remove the option completely and not just hide it, you can add an inline JS:
(function(skuid){
var $ = skuid.$;
$(document.body).one('pageload',function(){
$('.nx-fieldtext .nx-radiowrapper:first-child').remove();
});
})(skuid);
(Edited)
Photo of Seth Leonard

Seth Leonard

  • 662 Points 500 badge 2x thumb
Perfect. Thank you, JG!