Widgets — Django Suit 0.1.4 documentation

### Navigation

- index
- next |
- previous |
- Django Suit 0.1.4 documentation »

# Widgets

Easiest way to change widget for specific fields is define your own `ModelForm` class with `Meta class` and `widgets`. Following this logic, you can override almost any widget in your form.

For example if you want to add some additional CSS class to input you can do following:

    from django.forms import ModelForm, TextInput
    from django.contrib.admin import ModelAdmin
    from .models import Country

    class CountryForm(ModelForm):
        class Meta:
            widgets = {
                'name': TextInput(attrs={'class': 'input-mini'})
            }

    class CountryAdmin(ModelAdmin):
        form = CountryForm
        ...

    admin.site.register(Country, CountryAdmin)

Note

If you define some custom fields for your form, you must specify `model = YourModel` parameter for `class Meta`.

# NumberInput

HTML5 number input `type="number"`:

    from django.forms import ModelForm
    from suit.widgets import NumberInput

    class OrderForm(ModelForm):
        class Meta:
            widgets = {
                'count': NumberInput,

                # Optionally you specify attrs too
                'count': NumberInput(attrs={'class': 'input-mini'})

            }

Note

The same result you can achieve with `HTML5Input(input_type='number')` widget, this is just a shortcut.

# HTML5Input

Specify `input_type` and use any of HTML5 input types. You can see some HTML5 input examples in Django Suit Demo app in KitchenSink forms:

    from django.forms import ModelForm
    from suit.widgets import HTML5Input

    class ProductForm(ModelForm):
        class Meta:
            widgets = {
                'color': HTML5Input(input_type='color'),
            }

Note

Not all major browsers support all the new input types. However, you can already start using them; If they are not supported, they will behave as regular text fields. Also not all types are supported by Twitter Bootstrap.

# EnclosedInput

Supports Twitter Bootstrap prepended/appended form inputs. `EnclosedInput` widget accepts two arguments `prepend=` and `append=`. Values can be `text`, `icon-class` or `html` (starts with html tag). You can also use both `prepend=` and `append=` together:

    from django.forms import ModelForm
    from suit.widgets import EnclosedInput

    class ProductForm(ModelForm):
        class Meta:
            widgets = {

                # Appended by text
                'discount': EnclosedInput(append='%'),
                'size': EnclosedInput(append='m<sup>2</sup>'),

                # By icons
                'email': EnclosedInput(append='icon-envelope'),
                'user': EnclosedInput(prepend='icon-user'),

                # You can also use prepended and appended together
                'price': EnclosedInput(prepend='$', append='.00'),

                # Use HTML for append/prepend (See Twitter Bootstrap docs of supported tags)
                'url': EnclosedInput(prepend='icon-home', append='<input type="button" class="btn"  value="Open link">'),

            }

Preview:

# AutosizedTextarea

`AutosizedTextarea` enables automatic height based on user input for textarea elements. Uses jQuery Autosize plugin. All the required javascript will be automatically attached. Usage:

    from django.forms import ModelForm
    from suit.widgets import AutosizedTextarea

    class ProductForm(ModelForm):
        class Meta:
            widgets = {
                'description': AutosizedTextarea,

                # You can also specify html attributes
                'description': AutosizedTextarea(attrs={'rows': 3, 'class': 'input-xlarge'}),
            }

For demo - see countries description field or kitchensink tabluar inlines

Note

If you want to change height, when vertical scrollbar appears, use CSS `max-height` attribute. By default: `max-height: 150px`

# Date/Time widgets

`SuitDateWidget`, `SuitTimeWidget` and `SuitSplitDateTimeWidget` extends original admin widgets by adding some additional output styling only. Widgets still uses same original JavaScript for calendar and time. You can see example in Demo app: User changeform:

    from django.forms import ModelForm
    from suit.widgets import SuitDateWidget, SuitTimeWidget, SuitSplitDateTimeWidget

    class UserChangeForm(UserChangeForm):
        class Meta:
            model = User
            widgets = {
                'last_login': SuitSplitDateTimeWidget,
                'date_joined': SuitSplitDateTimeWidget,
            }

Preview:

# LinkedSelect

Adds link to related item right after select for foreign key fields:

    from django.forms import ModelForm
    from suit.widgets import LinkedSelect

    class CountryForm(UserChangeForm):
        class Meta:
            widgets = {
                'continent': LinkedSelect
            }

Preview:

# JavaScript goodies

When working with Django inlines and JavaScript, very often we want to hook/attach to event - when new inline row is added. Django Suit gives us such chance.

Use JavaScript `SuitAfterInline.register` to register/attach your function to new inline addition event.

    $(function () {
        SuitAfterInline.register('my_unique_func_name', function(inline_prefix, row){
            // Your code here
            console.info(inline_prefix)
            console.info(row)
        });
    });

### Navigation

- index
- next |
- previous |
- Django Suit 0.1.4 documentation »