EchMultiSelect Widget

Yii 1.1 Extensions
33

I assume that the same problem exists when you define the width via ‘width:450px’ instead of span-10?

It seems to me, that there are other style-declarations (like width, or float:right etc.) that affect the checkboxes and make them appear that way…

Do you use Firebug (the add-on for firefox)?

With firebug you could determine what styles exactly are applied to the checkboxes.

Sometime css-styles do behave unexpectedly and if there are more than one css-file, something overrides the other and there is no way to know what happpens without some tool like firebug…

Best regards…

34

I’ve juste tested this and it appears that the ‘ui-corner-all’ style is applied to the label tag. Is that correct?

35

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…

36

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

37

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…

38

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)

39

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?

40

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…

41

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.

42

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…

43

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

44

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…

45

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.

46

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

47

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

48

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.

49

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

50

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

51

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

Best regards…

c@cba

52

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.