EchMultiSelect Widget

c111 · May 29, 2012, 3:42pm

Yes, the labels have the class ‘ci-corner-all’, that only has the effect of rounding the corners of the label (the gray area).

the <ul> element has the class ‘ui-multiselect-checkboxes’, so it looks like this:




<ul class="ui-multiselect-checkboxes">

  <li>

    <label class="ui-corner-all"> ... </label>

  </li>

</ul>

It is really difficult to say something without seeing the code, but I have the suspicion that somewhere in your css files there is a style declaration for the ‘label’ element that sets a fixed width for it and makes the text within right aligend, i.e. something like this:




label {

   width:100px;

   text-align:right;

}

This is often done to style form elements, where a label is followed by a text-field for example, to produce forms like here: http://jeffhowden.com/code/css/forms/

Note that the labels are right aligned and how they are styled further below:




form div label {

  display: block;

  float: left;

  width: 130px;

  padding: 3px 5px;

  margin: 0 0 5px 0;

  text-align: right;

}

More than likely something like this is happening in your case…

Best regards…

roussel2nis · May 30, 2012, 10:33am

c@cba:

Yes, the labels have the class ‘ci-corner-all’, that only has the effect of rounding the corners of the label (the gray area).

the <ul> element has the class ‘ui-multiselect-checkboxes’, so it looks like this:
<ul class="ui-multiselect-checkboxes">

  <li>

    <label class="ui-corner-all"> ... </label>

  </li>

</ul>
It is really difficult to say something without seeing the code, but I have the suspicion that somewhere in your css files there is a style declaration for the ‘label’ element that sets a fixed width for it and makes the text within right aligend, i.e. something like this:
label {

   width:100px;

   text-align:right;

}
This is often done to style form elements, where a label is followed by a text-field for example, to produce forms like here: http://jeffhowden.com/code/css/forms/

Note that the labels are right aligned and how they are styled further below:
form div label {

  display: block;

  float: left;

  width: 130px;

  padding: 3px 5px;

  margin: 0 0 5px 0;

  text-align: right;

}
More than likely something like this is happening in your case…

Best regards…

I found the problem.

I think there is a conflict with the Bootstrap extension (it overwrite indeed the label tag).

I’m not an expert in css, do you have a workaround for me?

Many thanks

c111 · May 30, 2012, 11:04am

In the assets folder of the extension, there is the file "jquery.multiselect.css"

Add the following code into that file should work:




.ui-multiselect-checkboxes label  { width:auto !important; text-align:left !important; }

Best regards…

roussel2nis · May 30, 2012, 11:13am

c@cba:

In the assets folder of the extension, there is the file "jquery.multiselect.css"

Add the following code into that file should work:
.ui-multiselect-checkboxes label  { width:auto !important; text-align:left !important; }
Best regards…

Ok, works like a charm. I change the width:auto (the cornered box width takes just the label characters length) to 98% (the scroll bar hides the end)

roussel2nis · May 30, 2012, 11:18am

Hi,

I want to tune the component to fit my needs.

I want to display it like a multiple checkbox list but without the user to click on the scroller => always display the entire list (and abusing : is it possible in that case that the checkboxes take the entire height before the next component? - css? my weakness)

Is it possible?

c111 · May 30, 2012, 11:54am

So you don’t want a “drop-down-checkbox-list”?

You want a list of checkboxes that are always visible?

EchMultiSelect is a JQuery widget, there is a lot of javascript-code behind its behavior ((dis)appearing of the boxes etc.).

It will not be easy to make it behave like you want it to, it is not just a matter of css.

So if you don’t need/want a drop-down element, I would recommend for example the CheckBoxList of Yii:

http://www.yiiframework.com/doc/api/1.1/CActiveForm#checkBoxList-detail

Best regards…

roussel2nis · May 30, 2012, 11:58am

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.

c111 · May 30, 2012, 12:42pm

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…

upadeshng · June 8, 2012, 5:32am

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

c111 · June 10, 2012, 9:32pm

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…

upadeshng · June 11, 2012, 10:26pm

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'=&gt;'colors',


'data'=&gt;&#036;my_colors,


'value'=&gt;array(0,3),


'dropDownHtmlOptions'=&gt; array(


    'class'=&gt;'span-10',


    'id'=&gt;'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.

nyanev · July 24, 2012, 8:09am

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

Shamdit · August 29, 2012, 7:36am

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

Vedran · October 20, 2012, 3:31pm

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:

c@cba:

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);

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.

c111 · December 16, 2012, 9:16pm

@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…

c111 · December 17, 2012, 12:41am

Nikolay Yanev:

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 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

c111 · December 17, 2012, 12:44am

upadeshng:

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'=&gt;'colors',


'data'=&gt;&#036;my_colors,


'value'=&gt;array(0,3),


'dropDownHtmlOptions'=&gt; array(


    'class'=&gt;'span-10',


    'id'=&gt;'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.

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

Best regards…

c@cba

broke · February 9, 2013, 11:21pm

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.

broke · February 10, 2013, 12:00pm

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.

c111 · February 10, 2013, 12:55pm

Hi brok,

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

I didn’t download the latest version of the jQuery widget.
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…