echmultiselect Follow @yiiframework

I was getting

Alias "ext.EchMultiSelect.EchMultiselect" is invalid. Make sure it points to an existing PHP file and the file is readable.

Just find out that there is a wrong alias in the examples.

It's

ext.EchMultiSelect.EchMultiselect

and should be

ext.EchMultiSelect.EchMultiSelect
------------------------------------------^ with capital S on last Select word

If you're having problems in Yii 1.1.13 (which includes jQueryUI 1.9.2), try this:
* upgrade assets/jquery.multiselect.js to multiselect v1.13
(from the author's site: http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/)
* in assets/jquery.multiselect.js, make the following changes:
- in destroy(), comment-out
//$.Widget.prototype.destroy.call( this );
- in _setOption(), comment-out
//$.Widget.prototype._setOption.apply( this, arguments );

If js errors, download the updated version of jquery.multiselect.js (http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/)

@Sukhwinder: I really don't know what the problem could be and don't have the required system (debian+chrome) to test. It seems to be a compatiblity problem; maybe the jQuery plugin requires things that are not included in your system..?

@Chris Backhouse: Thanks for sharing the issue and its underlying reasons.

Hi, I'm just trying out your extension and have found that with the following scenario the wrong values are posted.

Form load, specify one entry of the list as pre-selected (eg: 'value'=>array(0) )

Post -> array OK

Click the previously selected entry (unselect)

POST -> same as first post, ie: previously selected entry is still selected. You would expect an empty array.

It looks as though this could be a problem with the jQuery plugin rather than your extension....any ideas?

UPDATE: When no options are selected it returns an empty string which is not returned by the jQuery(form).serialize() function. Therefore this is not passed onto any form submit. Subsequently it appears as though $.fn.yiiGridView.update must cache previous values and, as the multi-select variable is not defined, it is not getting re-initialised and the previous value is being POSTED to the controller action.

Hi i followed your instruction to use this extension, but facing following issues: 1. Old drop down list still showing on page 2. When i open Multi Select List, it opens, i can check/Uncheck, but it is not closing , i have to reload the page. 3. It is opening in black and white colors, no hover effect

PS Im using chrome, and my OS is Ubuntu 12.04

Thanks

Thank you so much for your contribution!! I wanted to do this myself for some time now, but didn't have the opportunity. I implemented your suggestion just now, it works perfectly.

Thanks again, this is very much appreciated! Do you mind if I incorporate this into the extension, with your comments?

Here are the steps taken to make this very useful widget work as a 'filter' for CGridView.

The default behavior of CGridView is to do sorting/pagination/filtering in Ajax mode. After each ajax response, portions of the HTML response are used to update the grid. In this case the multi-select widget goes away and the default drop-down is displayed gain. To fix this, the caller should pass an additional option to indicate that it will be using ajax refresh, as follows:

init()
  $options_default = array(
  ..
  'ajaxRefresh' => false, // add option to redisplay multiselect widgets after ajax refresh

at the end of run(), add the following logic:

run()
  ...
  // for CGridView, <select> is refreshed on each ajax request, so the multiselect must be reapplied
  //   trigger this function to fire after ajax action is complete
  if ($this->options['ajaxRefresh']==true)
    $jscode .= "jQuery('body').ajaxComplete(function() {jQuery('#".$id."').multiselect(".$joptions."); });";
 
  Yii::app()->getClientScript()->registerScript(__CLASS__ . '#' . $id, $jscode);

Usage from within CGridView:

$this->widget('CGridView',....
  'columns' => array (
    'firstColumn',
    'secondColumn',
    // use EchMultiselect for the next column
    array (
      'name'=>'thirdColumn',
      'value'=> ...., 
      'filter'=> $this->widget('EchMultiselect',
        array(
          'model' => $model,
          'dropDownAttribute' => 'thirdColumn',
          'data' => ....
          'options' => array('buttonWidth' => 80, 'ajaxRefresh' => true),
        ),
      true // capture output; needed so the widget displays inside the grid
    ),
  ),

notice the new 'buttonWidth' option. This is because my Grid layout is extremely tight. I need the multi-select buttons to be as narrow as possible, but the drop-down menus to be wider (to show the full description). The default behavior does not support this.

implementation of 'buttonWidth' option in /assets/jquery.multiselect.js:

options: {
 ...
 buttonWidth: '', /*+ JJD */
 ...
}
 
 
  _setButtonWidth: function(){
    var width = this.element.outerWidth(),
      o = this.options;
 
    if( /\d/.test(o.minWidth) && width < o.minWidth){
      width = o.minWidth;
    }
 
    // set widths
    /* JJD if buttonWidth set use it */
    if (o.buttonWidth)
      width = o.buttonWidth;
 
    this.button.width( width );
  },
 
 
  // set menu width
  _setMenuWidth: function(){
    var m = this.menu,
        o = this.options, /* +JJD */
    width = this.button.outerWidth()-
      parseInt(m.css('padding-left'),10)-
      parseInt(m.css('padding-right'),10)-
      parseInt(m.css('border-right-width'),10)-
      parseInt(m.css('border-left-width'),10);
 
     /* JJD if buttonWidth is manually set and minWidth is set and wider, use it */
     if (o.buttonWidth && o.minWidth && o.minWidth > o.buttonWidth)
       m.width(o.minWidth)
     else
       m.width( width || this.button.outerWidth() );  /* orig logic */
  },

instead of hiding the default drop-down with jQuery .hide(), I suggest:

init() {
 ...
 if (!isset($this->dropDownHtmlOptions['style']))
    $this->dropDownHtmlOptions['style']='';
 $this->dropDownHtmlOptions['style'] .= ';display:none';
 ...
 
run() {
  ...
  // following line is not needed
  //echo '<script type="text/javascript">$("#'.$id.'").hide();</script>'; 
  ...
}

In Multiselect mode, if there is a single option, it doesn't work. The checkbox gets checked but it doesn't show "1 selected". Whereas it works with jquery ui demo at

http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/

Regards Deepti

very nice widget:))

thanks, fixed!

Hi maxxer,

please note the following two important points:

1. The data has to be an associative array. It will be used to generate the dropdown list.
2. The dropDownAttribute has to be an array of values; a one deminesional array that contains the preselected values to be specific.

In your example you set

$model->my_search_parameter = CHtml::listData(MyModel::model()->findAll(), 'codice','codice');

This is an associative array that can be used as the 'data' to populate the dropdown list. It can not be used as the 'dropDownAttribute'.

I don't know what MyModel::myDropDownListMethod() is doing/returning, so I cannot say if there lies a problem.

In your Controller Action, there shoud be something like this:

$model->my_options = CHtml::listData(MyModel::model()->findAll(), 'id','values');
/* 
You can load the preselected values from somewhere, from another model for example. But make sure that eventually $model->my_preselected_values is a one dimensional array, like:
*/
$model->my_preselected_values = array('id_1', 'id_2', 'id_3');

Then your view file should look like:

'model' => $model,
'dropDownAttribute' => 'my_preselected_values', 
'data' => $model->my_options,

We discussed this topic of preselected values here in the forum, you might want to take a look. There are a few good examples that shoud make it clearer...

Best regards...

hi. I cannot preselect entries. I'm using the widget in a _search.php form, where I use a modified advanced search. In the action displaying the form I added something like this:

$model->my_search_parameter = CHtml::listData(MyModel::model()->findAll(), 'codice','codice');

the widget is then defined this way:

$form->widget('ext.widgets.EchMultiSelect', array(
                'model' => $model,
                'dropDownAttribute' => 'my_search_parameter', 
                'data' => MyModel::myDropDownListMethod(),
                'dropDownHtmlOptions'=> array(
                    'style'=>'width:378px;',
                ),  
                'options' => array( 
                    'header'=> Yii::t('string','Seleziona gli hotspot'),
                    'minWidth'=>350,
//                    'position'=>array('my'=>'left bottom', 'at'=>'left top'),
                    'filter'=>true,
                    'noneSelectedText'=>'-- '.Yii::t('string','seleziona almeno un hotspot').' --',
                    'checkAllText' => Yii::t('string','Seleziona tutte'),
                    'uncheckAllText' => Yii::t('string','Deseleziona tutte'),
                    'selectedText' =>Yii::t('string','# selezionato/i'),
                ),  
                'filterOptions' => array( 
                    'placeholder'=>Yii::t('string','Ricerca'),
                    'label' => Yii::t('string','Filtra:'),
                ),  
 
            ));

but there's always NO item preselected.

Hi bonnie,

You just have to extract the files under protected/extensions/widgets/. Those file paths show only where the files should be located after the extraction.

If you call the widget with

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

then you don't need to include/import the files in your config file. Because you are specifying the exact path with ext.widgets.EchMultiSelect.

I hope it's clearer now?

Hi, c@cba nice extension but can you specify exactly which file should this information included.

protected/extensions/widgets/EchMultiSelect.php
protected/extensions/widgets/assets/jquery.multiselect.js
protected/extensions/widgets/assets/jquery.multiselect.css
protected/extensions/widgets/assets/jquery.multiselect.filter.js
protected/extensions/widgets/assets/jquery.multiselect.filter.css

What would you think about the following changes/additions to this widget:

• Change the button element (generated by the Multiselect widget) into a textfield. Make it serve as the filter-textfield (that is: filter the options as text is added into this textfield).
• Add the option to make the texfield un-editable if filter is set to false.
• Replace the two text-options 'Check All' and 'Uncheck All' in the header with a checkbox, that controls all checkboxes (check->check all, uncheck->uncheck all).
• Add the option to hide the checkboxes in multiple selection mode (in single select mode, they are hidden), and highlight the selected elements instead (like it is done in the single selection mode).
• Add the option to enter a new text (different from the options) into the textfield (like the 'allowText' option of this combobox)
• Currently, when menu is closed via 'tab' or 'esc', the focus is lost and I can't move to the next element in the form with 'tab'. Thus: make it so, that user can move along form fluently without using the mouse.

Does someting speak against (one of) these changes?