Render Cjuibutton Buttonset Horizontal Radio Buttons

Yii 1.1 General Discussion
1

So I want to display a time span represented as four segments where the user chooses one of the segments in the time span. Each time segment will be represented by a button whose width will be proportional to the total time span (time seg/time span) as a visual clue. The buttons should be exclusive so only one button can show as selected/active due to the fact that the contents of another div will depend on which time seg is currently selected.

My first thought was:




?php 

$this->beginWidget('zii.widgets.jui.CJuiButton', array(

	'buttonType'=>'buttonset',

	'name'=>'spanType-set',

));

?>

	<?php 

	$this->widget('zii.widgets.jui.CJuiButton',array(

		'name'=>'spanSeg_0',

		'caption'=>'Seg 1',

		'buttonType' => 'radio',

		'htmlOptions' => array('style' => 'width: 35%;'),

	

	));

	....more segments here like the one above

	?>

<?php

$this->endWidget();

?>

Two immediate problems:

[list=1]

[*] Each button is rendered as a row giving ‘n’ rows of buttons as opposed to the desired result of one row. I will add that that buttons still have rounded corners on only the first and last button element.

[*] The exclusivity of the buttons does not appear to be retained.

[/list]

To the first issue since the styling of the buttons appears to render properly and this all of this code is rendered not only inside a


<div class="form">

but also inside a


$this->beginWidget('CActiveForm')

I believe the default css is giving me the unwanted line breaks between each button element. Not sure how best to go about getting stronger control over css rendering.

To the second issue I am even less knowledgeable.

The desired result will be a set of N (3 to as many as 6) exclusive buttons using the CJuiButton with button type of buttonset.

2

So after a little more frustration I could not get the inner CJuiButton widget to work within another CJuiButton widget, here I am assuming the nesting was the problem. So I replaced the inner CJuiButtons with the following:




<?php echo CHtml::label('Choice 4', 'radio4'); ?>

<?php echo CHtml::radioButton('radio4', false); ?>

<input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>

<input type="radio" id="radio2" name="radio"><label for="radio2">Choice 2</label>

<input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>

I got both the straight html to work as well as the yii code snippets. I did notice that both of lines of yii code is needed, omitting the label does not work as expected. Do not use this as a study guide but the label is needed by the jQuery UI button widget. The label not the actual input field, or something along those lines, is the element that receives the click event. Like I said not a study guide.

NOTE: The use of the Yii code lost the exclusivity of the button select, though it was retained for the buttons rendered with straight html even with the presence of yii code mixed in.

Additionally, the


<div class="form">

is the cause of my buttons not rendering on one line. I like the formatting this give my form but I will need to get around the radio input type being rendered on seperate rows. That will be a tough one, for me at least.

3

So tried another iteration:




<?php

$this->beginWidget('zii.widgets.jui.CJuiButton', array(

	'buttonType'=>'buttonset',

	'name'=>'ChoiceType-set',

	'htmlOptions' => array('id' => 'stones'),

));

echo CHtml::activeRadioButtonList($model, 'anchor', array(0 => 'Choice 1', 1 => 'Choice 2',), array('separator' => ' ', 'uncheckValue' => null));

$this->endWidget();

?>

This did not work as expected either. The formatting was there but the radios were on two rows instead of one and the exclusivity of the button click was not there.

The only solution that I have found to work properly is:


<?php 

$this->beginWidget('zii.widgets.jui.CJuiButton', array(

	'buttonType'=>'buttonset',

	'name'=>'spanType-set',

	'htmlOptions' => array('id' => 'stgs'),

));

?>

	<input type="radio" id="radio1" name="radio"><label for="radio1" style="width: 30%; float: left;">Choice 1</label>

	<input type="radio" id="radio2" name="radio"><label for="radio2" style="width: 50%; float: left;">Choice 2</label>

	<input type="radio" id="radio3" name="radio"><label for="radio3" style="width: 20%; float: left;">Choice 3</label>

<?php

$this->endWidget();

?>

I like the fact that I can get the above to work properly but I need to be able to populate the buttons and the formatting with an ajax call based on the selected value of a dropdownlist.

Within the framework is there a solution short of using PHP to code each radio button line in html?

4

CURRENT SOLUTION:




$this->beginWidget('zii.widgets.jui.CJuiButton', array(

	'buttonType'=>'buttonset',

	'name'=>'stepType-set',

	'htmlOptions' => array('id' => 'stepsN'),

));

foreach($model->anchorSel as $i=>$step):

	echo CHtml::radioButton('step', false, array('id'=>'step'+$step->stindex,));

	echo CHtml::label($step->stname, 'step'+$step->stindex, array('style'=>'float: left;'));

endforeach;

$this->endWidget();

Now just need to figure out where the value is when the form is submitted, but that is fodder for another post.