EchMultiSelect Widget

Indeed I know the checkboxlist from Yii.

But there is an issue to make it working with Ajax requests (boxes don’t stay checked), that’s why I’d prefer a Select/Option approach.

hmm…

I’m afraid I don’t know an easy way to tweak EchMultiSelect like you want… apart from trial-error…

I have a few ideas, but I don’t know if they would work properly:

  • With the ‘autoOpen’ set to true, you can make the checkboxes appear on page load

  • If you comment out the ‘close’ function in the js-file (jquery.multiselect.js), the displayed checkbox container then would never close.

  • with the ‘height’ option you could fix the height (for example 500px;)

  • To make sure the the checkbox container is not positioned over other elements, you could put the EchMultiSelect widget into a div with the style="height:550x; display:block;" (adjust height to the height of the container)

etc…

Hope that helps somewhat.

Best regards…

Hi there,

I am always getting only one values even though i have selected multiple of data.If i use dropDownAttribute instead of name ,then it works but if I want to update it doesn’t work with dropDownAttribute but shows the value while using name. So i want to use name instead of dropDownAttribute in EchMultiselect,but the problem is it doesn’t save the multiple selected value

Hi.

I’m not sure I understand what you mean.

But generally speaking, to use the ‘name’ attribute and save the selected values, your view fiel should look like (I use the example from the extension page):




$my_colors = array('red','yellow','orange','black','green','blue');

$this->widget('ext.widgets.EchMultiselect', array(

    'name'=>'colors',

    'data'=>$my_colors,

    'value'=>array(0,3),

    'dropDownHtmlOptions'=> array(

        'class'=>'span-10',

        'id'=>'colors',

    )

));



This will produce a dropdown list of the six colors.

‘red’ and ‘black’ will be preselected (because declared in ‘value’ attribute).

In your controller actionUpdate, $_POST[‘colors’] will be an array that contains the keys of the selected colors. If for example yellow, green and blue are selected before update, then $_POST[‘colors’] will be:


$_POST['colors'] = array(1, 4, 5);

Note that you have to save these selected values manually where you want to have them saved. That will not happen automatically!

In this example I could have a table ‘obj_color’, in which I want to store the selected colors for an object with the id $obj_id. I would have to save these values in the Update action like so:




  foreach($_POST['colors'] as $color_id) {

    $ocolor = new ObjColor;

    $ocolor->obj_id = $obj_id;

    $ocolor->color_id = $color_id;

    $ocolor->save();

  }



In any case, you will have to use a foreach-loop in your controller to loop through the selected values and process/save them.

Please take a look at the following post:

http://www.yiiframework.com/forum/index.php/topic/28524-echmultiselect-widget/page__view__findpost__p__145762.

I also highly recommend this article: Handling Related Models in Yii Forms from Larry Ullman.

Hope this helps.

Best regards…

Hi,

Thank you anyways.I couldn’t solve the problem since a week.And i found a simple mistake ie.

$my_colors = array(‘red’,‘yellow’,‘orange’,‘black’,‘green’,‘blue’);

$this->widget(‘ext.widgets.EchMultiselect’, array(

'name'=>'colors',


'data'=>$my_colors,


'value'=>array(0,3),


'dropDownHtmlOptions'=> array(


    'class'=>'span-10',


    'id'=>'colors',


)

));

Here in the ‘name’=>‘colors’, It should actually be ‘name’=>‘colors[]’.

Now the value is taking as array in the controller, otherwise it doesn’t take array value.

Thank you.

I want to use this widget as filter of CGridView. My code look like this:




array('name'=>'type',

			'value'=>array('PoliciesHelper', 'getPolicyTypes'),

			'filter'=>$this->widget('ext.EchMultiSelect.EchMultiSelect', array(

    'model' => $filter,

    'dropDownAttribute' => 'type',   

'dropDownHtmlOptions'=> array(

		'class'=>'span-10',

        'style'=>'width:200px;',

    ),  

    'data' => PoliciesHelper::getPolicyTypes(),

), true),



The drop down appear like normal drop down but when I select item it look like a multiple select field. How can I fix it?

P.S. Sorry for my bad explanation

Hi,

Thanks for this widget as it was prefect for what I was looking for, but the download from the extension page (link provided on the first post) has a bug in the jquery.multiselect.js when it is loaded with jquery 1.8.0. The bug is that the show and hide functions are incorrectly phrased and causing a TypeError by stating .easing function in jquery does not exist.

In the multiselect.js file these functions that are causing this error are .hide(effect, speed) and .show(effect, speed). These should be phrased as .hide(speed, effect) and .show(speed, effect).

Just a note to all that if you use this with jquery 1.8.0 either repair these functions or download the latest multiselect.js source from the link provided in the first post.

I would provide the links in this post but this website will not let me

Cheers

Hello everybody :) first thank you for this extension, but I just don’t get expected results. For example, when i try to use this code:

after submit i don’t get an array of selected colors like you said:


$_POST['colors'] = array(1, 4, 5);

instead, i get three variables with same name and diferent values. Like this:




$_POST['colors'] = 1;

$_POST['colors'] = 4;

$_POST['colors'] = 5;



So can you explain me how to make this extension output results as an array? Thanks.

@Vedran:

I made a mistake in the code-example on the extension page:


'name'=>'colors',

should be


'name'=>'colors[]',

Then everything works as expected.

Sorry for the late reply and the mistake.

Best regards…

Hi Nikolay,

this reply is quite late and you probably solved your problem by now, but just in case:

I just uploaded a new version, which can be used as a filter in CGridview with just an additional option.

I also added an example to the extension page.

Sorry for the late reply. I didn’t know an answer right away and didn’t have the time to experiment. Today jeremy provided a solution for this (see his comments on the extension page), which I promptly added to the extension.

Best regards…

c@cba

Thank you too, I corrected the example on the extension page accordingly.

Best regards…

c@cba

Does this extension still work? I’ve tried to add it as a filter in a CGridView but I had several problems. The first I could solve by the advice of this post Now the widgets opens and closes but still the filter results aren’t shown in the grid. In the console I see the request for the filtered list (which is the correct one) but the result is just not shown in the table.

I managed to get the filter results shown by commenting out the line “$.Widget.prototype.destroy.call(this);” in jquery.multiselect.js. But after filtering the dropdown box gets replaced by a simple list. How can I fix that? I think this problem is described in this comment but the suggested solution doesn’t solve the problem.

Hi brok,

I’m using this widget with Yii 1.1.9 and currently it works. But:

  1. I didn’t download the latest version of the jQuery widget.

  2. As soon as I check an option in the dropdown, the grid ‘refreshes’. I want the grid to refresh after I check multiple boxes, and then close the widget. But I didn’t get it to work that way yet.

Question: do you have [font=“Lucida Console”]‘ajaxRefresh’=>true[/font] set in your options?

Question 2: Did you make sure that the criteria in your [font=“Lucida Console”]search()[/font] function (especially the [font=“Lucida Console”]‘compare’[/font] criteria) are correct? The second parameter should not be ‘true’ if you want an exact match for a filter attribute.

For example if you have the options “online” and “not online”, and you filter for “online”, then “not online” will also match if the second parameter of the [font=“Lucida Console”]‘compare’[/font] criteria for that attribute is “true”.

Addition:

I just downloaded the new version (1.13), and it still works…

Hi,

this is a very useful extension thank you. I have been able to make good use for it in my applications. However right now I am trying to use it to filter based on comma separated string and I am not sure how to make it work.

It is used as a filter in CGridView, for a field that is a string of comma separated numbers(id’s for another table). Like so- “1,5,7,4,”

If I use the simple

$criteria->compare(‘column_name’,$this->column_name,true);

in my model criteria, it only works for the rows that contain only 1 number. I.e. if I search for the value with id=1, it will find only the rows that have a value "1,". Anything else like "1,4,…" or "2,5,1," will not be displayed.

Is there something wrong with my compare statement or the widget is just not suited for something like this?

Thanks in advance!

I would do something like this:




$string = $this->column_name;

if(!empty($string)) {

  $ids = explode("," , $string); // $ids is an array with the id's...

  foreach($ids as $id) {

    $criteria->compare('column_name', $id, false, 'OR'); // 3rd param is false = look for exact match

    // $criteria->compare('column_name', $id, false, 'AND'); // <-- use AND or OR

  }

}



Hope this helps.

Best regards…

Ah that’s exactly what I figured out eventually! Should have checked the forum earlier :P Thanks a lot anyways!!

For reference:

While using EchMultiSelect as a filter in CGridView:

In your controller file where you render the grid, you should make the following changes if you have pre-selected values

(thanks to Chris Backhouse for pointing out this issue):




public function actionAdmin()

{

	$model=new SomeModel('search');

	$model->unsetAttributes();  // clear any default values

	$model->thirdColumn = array('red','yellow'); // <-- pre-selected values!!

	if(isset($_GET['SomeModel'])) {

		$model->attributes=$_GET['SomeModel'];

		if(!isset($_GET['SomeModel']['thirdColumn']))

			$model->thirdColumn = array(); // <-- clear pre-selected values!!

	}

}



Is it possible to use it as dependant select?

I’m using this code without success :S

I’m having controllers response, but the multiselect doesn’t show the returned options.

*_form.php




<div class="row">

<?php echo $form->labelEx($model,'aux_provincia'); ?>

<?php 

 echo $form->dropDownList(

  $model,

  'aux_provincia',

  CHtml::listData(CatProvince::model()->findAll(), 'id_province', 'ds_province'),

  array(

   'prompt' =>'All',

   'ajax' => array(

     'type'=>'POST',

     'url'=>CController::createUrl('campaign/dynamicZipcodes'),

     'update'=>'#zipcodes_multi'

   )

  )

 );

?>

</div>


<div class="row">

<?php echo $form->labelEx($model,'aux_zipcodes'); ?>

<?php 

 $form->widget('ext.EchMultiSelect.EchMultiSelect', 

  array(

   'model' =>$model,

   'dropDownAttribute' => 'aux_zipcodes',

   'data' => array(),

   'dropDownHtmlOptions'=> array(

    'style'=>'width:300px;',

    'id'=>'zipcodes_multi'

   ),

   'options' => array(

    'filter'=>true,

    'ajaxRefresh'=>true,

   ),

   'filterOptions'=> array(

    'width'=>200,

   ),

 ));

?>

</div>



*CampaignController.php




public function actionDynamicZipcodes(){

 $auxdata=CatTownZipcode::model()->findAll('id_province=:id_province',array(':id_province'=>$_POST['Campaign']['aux_provincia']));

 $auxdata=CHtml::listData($auxdata,'id_town_zipcode','concatenedCodeTown');

 foreach($auxdata as $id => $value){

  echo CHtml::tag('option', array('value'=>$id),CHtml::encode($value),true);

 }

}



Any advice?

Thx.

@jorgito_ml,

the hidden select is updated with the controllers response. But the multiselect has to be refreshed to show the changes.

In your dropDownList, you could try this:




 echo $form->dropDownList(

  $model,

  'aux_provincia',

  CHtml::listData(CatProvince::model()->findAll(), 'id_province', 'ds_province'),

  array(

   'prompt' =>'All',

   'ajax' => array(

     'type'=>'POST',

     'url'=>CController::createUrl('campaign/dynamicZipcodes'),

     'success'=>'function(data) { $("#zipcodes_multi").html(data); $("#zipcodes_multi").multiselect("refresh"); }',

   )

  )

 );