Yii Bootstrap widget non based on model

Question

What is the best approach (if any) to render any Yii-Bootstrap widget, that is not based on model?

I have a create/update form for all model's attributes and now I want to add an additional drop down list, that will let user select some value from pure array, that has nothing to do with current model.

In other words I'm looking for CHtml::dropDownList equivalent, that would let me render this particular list styled in Yii-Bootstrap mood, precisely as all other elements on my form.

So far I tried to introduce own helper method containing direct call to Yii::app()->controller->widget('bootstrap.widgets.input.TbInputHorizontal', array());. But that failed. All Yii-Bootstrap widgets and methods seems dying without model and attribute.

I also tried overloading TbInputHorizontal::dropDownList() and forcing it to use CHtml::dropDownList instead of $this->form->dropDownList, but I don't know, how to force TbActiveForm to use my widget instead of TbInputHorizontal.

Answer 1

Well, Bootstrap depends on markup and classes, what i do is to replicate the same markup needed by Bootstrap and adding the classes to the elements via htmlOptions's array.

This is an example made by me (some words are on spanish), it's a horizontal form with some dropDowns and Input boxes, observe how i pass them bootstrap classes:

• array('class' => 'col-lg-2 control-label') for labels
• array('class' => 'form-control') for input controls

Here is the example (it includes an example of Yii's jQuery UI datepicker):

<?php $form=$this->beginWidget('CActiveForm', array(
    'id'=>'subscriber-form',
    'htmlOptions' => array('class'=>'form-horizontal'),
)); ?>

<fieldset>
    <legend>Datos del usuario</legend>
    <div class="form-group">
        <?php 
            echo CHtml::label('Pasarela de pago','gateway', array(
            'class' => 'col-lg-2 control-label'
            )) 
        ?>
        <div class="col-lg-2">
            <?php 
                echo CHtml::textField('gateway',$gateway, array(
                    'id'=>'gateway',
                    'class' => 'form-control', 'disabled'=>'true'
                ));
            ?>
        </div>
    </div>
    <div class="form-group">
        <?php 
            echo CHtml::label('Fecha de suscripción','subscriptionDate', array(
            'class' => 'col-lg-2 control-label'
            )) 
        ?>
        <div class="col-lg-2">
            <?php
            $this->widget('zii.widgets.jui.CJuiDatePicker',array(
                'name'=>'subscriptionDate',
                'attribute'=>'subscriptionDate',
                'language'=>'es',
                'options'=>array(        
                    'showButtonPanel'=>true,
                    'dateFormat'=>'dd/mm/yy',
                    'maxDate'=>'0',
                ),
                'htmlOptions'=>array(
                    'class'=>'form-control'
                ),
            ));
         ?>
        </div>
    </div>
    <div class="form-group">
        <?php echo CHtml::label('Estado','status', array(
            'class'=>'col-lg-2 control-label'
            )); 
        ?>
        <div class="col-lg-2">
            <?php 
                echo CHtml::dropDownList('status', $status, $statusList , array(
                'class'=>'form-control'
                )); 
            ?>
        </div>
    </div>

    <div class="col-lg-3 col-lg-offset-2">
        <?php echo CHtml::submitButton('Guardar cambios', array(
            'class'=>'btn btn-primary'
        )) ?>
        <a class="btn btn-default" href="<?php echo Yii::app()->urlManager->createUrl('admin/suscriptores'); ?>">Cancelar</a>
    </div>
</fieldset>
<?php $this->endWidget() ?>

Answer 2

The only solution, that I came up so far, was to directly replicate Yii-Bootstrap styles in my view:

<?php $fieldName = 'Boards['.$type.']'; ?>

<div class="control-group">

    <div class="controls">

        <div class="input-prepend">

            <span style="width: 215px; text-align: left" class="add-on">

                <label for="<?php echo $fieldName; ?>"><?php echo ucfirst($committees['boards']['roles'][$type]); ?></label>

            </span>

            <?php echo CHtml::dropDownList($fieldName, $committee, $committees['boards']['names'], array('style'=>'width: 650px')); ?>

        </div>

    </div>

</div>

Nasty, but it is working. However, I'd like to see some other options.