Usage

Tags Provided by plugin

There are two tags provided by the plugin resources and multiSelect.

resources Tag

<ui:resources includeJQuery="true"/>

To use this plugin, you must import the multi-select drop down resources. The Tag resources provide a simple way to import it. You can import resources either on each page using this tag or in the main layout so that you do not have to import it on each page explicitly.

Setting includeJQuery="true" will use the jquery library from the dependent grails jquery plugin (which is automatically installed when you install multi-select plugin).

Setting includeJQuery="false" means you have already included jquery file using a HTML Script tag otherwise the multi-select plugin will not work.

multiSelect Tag

After resources have been imported, you are ready to use multi-select dropdown component. like

 <ui:multiSelect 
                     name="categories"
                     multiple="yes"
                     from="${Categories.list()}" 
                     value="${user.subscribedCategories}"
                     noSelection="['':'Select One']" />

multiSelect attributes

Most of the attributes are similar to the g:select tag.

• name

Similar to g:select. Required attribute. Currently the name attribute value does not support special characters eg. (dot) in name.

• from

Similar to g:select. Required attribute.

• value

Similar to g:select. Optional attribute.

• multiple

If this attribute is present multiple="yes". Then it will behave as a multi select tag. In the absence of this attribute it will behave as a normal <g:select>.

• noSelection

  Similar to g:select. Optional attribute.

  If multiple is set "yes" then provide a map like [' ' : 'Select One' ] for this attribute otherwise the last remaining item in select box could not be selected.

• isLeftAligned

  The alignment of selected list items. Default is false.

• disabled

  If set to "true" the select box and the selected items are disabled. Default is false.

Javascript functions

All the java script functions below takes value of name attribute of ui:multiselect...../

• enableMultiSelect

To disable the multi-select i.e. user will not be able to select items from select box or remove selected items.

• disableMultiSelect

To enable the multi-select i.e. user will be able to select items from select box or remove selected items.

• selectedCount

Total number of selected items.

• deselectedCount

Total number of selected items(excluding the items having value empty).

e.g.

<script type="text/javascript">
    enable('categories');
    alert(selectedCount('categories'));

</script>