How to style a Custom Field radio list as btn-group?

Question

I'm trying to create a custom field which is a radio list, and must be displayed as a btn group. It works as expected when using the standard type="radio"in the XML (rating2), but when rendered as a custom field (rating1), it displays only a regularly formatted radio list.

I can see that there are a number of class names that are different or missing between the two, but can't figure out how or where to specify them, presuming that specifying class="btn-group" in the XML should take care of that.

Has anyone had success doing this, and if so what is missing or wrong with this code?

Form XML

<field name="rating1"
    type="ContentRating"
    class="btn-group"
    label="Rating 1" />

<field name="rating2"
    type="radio"
    class="btn-group"
    label="Rating 2" >
    <option value="Y">TV-Y</option>
    <option value="Y7">TV-Y7</option>
    <option value="G">TV-G</option>
    <option value="PG">TV-PG</option>
    <option value="14">TV-14</option>
    <option value="MA">TV-MA</option>
</field>

models/fields/contentrating.php

class JFormFieldContentRating extends JFormField {
    protected $type = 'ContentRating';
    protected function getInput() {
        $options = array(
            JHtml::_('select.option', 'Y', 'TV-Y'),
            JHtml::_('select.option', 'Y7', 'TV-Y7'),
            JHtml::_('select.option', 'G', 'TV-G'),
            JHtml::_('select.option', 'PG', 'TV-PG'),
            JHtml::_('select.option', '14', 'TV-14'),
            JHtml::_('select.option', 'MA', 'TV-MA')
        );
    // Some of the variations tried - none work
        $html = JHtml::_('select.radiolist', $options, $this->name, null, 'value', 'text', $this->value, $this->id);
        $html = JHtml::_('select.radiolist', $options, $this->name, array('class'=>''), 'value', 'text', $this->value, $this->id);
        $html = JHtml::_('select.radiolist', $options, $this->name, array('class'=>'btn'), 'value', 'text', $this->value, $this->id);
        $html = JHtml::_('select.radiolist', $options, $this->name, "class='btn-group'", 'value', 'text', $this->value, $this->id);
        return $html;
    }
}

Answer 1

Having looked at the JHtml radiolist function, it does not support custom classes. It manually adds the radio class via the actual core file.

What I've done here is taken a copy of the core radio field, stripped a few things and modified it for your needs. Hope this helps:

class JFormFieldContentRating extends JFormField {

    protected $type = 'ContentRating';

    protected function getInput() {

        $options = array(
            JHtml::_('select.option', 'Y', 'TV-Y'),
            JHtml::_('select.option', 'Y7', 'TV-Y7'),
            JHtml::_('select.option', 'G', 'TV-G'),
            JHtml::_('select.option', 'PG', 'TV-PG'),
            JHtml::_('select.option', '14', 'TV-14'),
            JHtml::_('select.option', 'MA', 'TV-MA')
        );

        $html = array();

        $class = !empty($this->class) ? ' class="radio ' . $this->class . '"' : ' class="radio"';

        $html[] = '<fieldset id="' . $this->id . '"' . $class. ' >';

        foreach ($options as $i => $option)
        {
            $checked = ((string) $option->value == (string) $this->value) ? ' checked="checked"' : '';
            $class = !empty($option->class) ? ' class="' . $option->class . '"' : '';

            $onclick = !empty($option->onclick) ? ' onclick="' . $option->onclick . '"' : '';
            $onchange = !empty($option->onchange) ? ' onchange="' . $option->onchange . '"' : '';

            $html[] = '<input type="radio" id="' . $this->id . $i . '" name="' . $this->name . '" value="'
                . htmlspecialchars($option->value, ENT_COMPAT, 'UTF-8') . '"' . $checked . $class . $onclick
                . $onchange . ' />';

            $html[] = '<label for="' . $this->id . $i . '"' . $class . ' >'
                . JText::alt($option->text, preg_replace('/[^a-zA-Z0-9_\-]/', '_', $this->fieldname)) . '</label>';

        }

        $html[] = '</fieldset>';

        return implode($html);
    }
}

Tested and working

Hope this helps