Login

Multiple Select Widget with jQueryUI

Author:
maguspk
Posted:
June 23, 2010
Language:
Python
Version:
1.2
Tags:
jquery widget multiple select multiselect jqueryui
Score:
1 (after 1 ratings)

This widget can be imported in your forms.py file and used like so:

formfield = forms.ModelMultipleChoiceField(widget=MultiSelectWidget, queryset=Model.objects.all())

The javascript is provided by Michael's Multiselect. In addition to the javascript you will need jQuery (the latest release is fine) and jQuery UI. The convenient thing is that this widget will style to match whichever jQuery UI you've 'rolled' or selected, making it highly customizable!

Hopefully this helps others who wanted a nice widget with jQuery and were sad to find there were no nice default options, enjoy! :)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
class MultiSelectWidget(forms.SelectMultiple):
    class Media:
        css = {
            'all': (
                iasettings.MEDIA_URL + 'js/michael-multiselect/css/ui.multiselect.css',
            )
        }
        js = (
            iasettings.MEDIA_URL + 'js/michael-multiselect/js/plugins/tmpl/jquery.tmpl.1.1.1.js',
            iasettings.MEDIA_URL + 'js/michael-multiselect/js/plugins/blockUI/jquery.blockUI.js',
            iasettings.MEDIA_URL + 'js/michael-multiselect/js/ui.multiselect.js',
        )

    def __init__(self, language=None, attrs=None):
        self.language = language or settings.LANGUAGE_CODE[:2]
        super(MultiSelectWidget, self).__init__(attrs=attrs)

    def render(self, name, value, attrs=None):
        rendered = super(MultiSelectWidget, self).render(name, value, attrs)
        return rendered + mark_safe(u'''<script type="text/javascript">
            $(document).ready(function afterReady() {
                var elem = $('#id_%(name)s');
                elem.multiselect();
            });
            </script>''' % {'name':name})

More like this

  1. Select Dropdown Widget with jQueryUI by maguspk 4 years, 10 months ago
  2. Convert multiple select for m2m to multiple checkboxes in django admin form by abidibo 2 years ago
  3. jQuery Autocomplete by zeeg 7 years, 10 months ago
  4. Orderable inlines using drag and drop with jQuery UI by simon 6 years, 7 months ago
  5. Drag and drop ordering of admin list elements using jQuery UI by johj 4 years, 10 months ago

Comments

Please login first before commenting.