Login

Collapsed stacked inlines

Author:
Aneon
Posted:
May 6, 2009
Language:
JavaScript
Version:
Not specified
Score:
2 (after 2 ratings)

A simple jQuery javascript that collapses all stacked inline rows for better handling of large inline fieldsets.

It also adds "Show"/"Hide"-buttons for showing/hiding each row, which could be customized and styled using css.

Usage (see below for example):

Include the javascript on your admin page, together with jQuery, and it'll automatically affect all stacked inlines.

Developed for:

  • jQuery 1.3.2
  • Django trunk (tested in Django v1.0.2)
  • (Might work with other versions with or without adjustments, but not tested)

Use example:

admin.py:

class DateInline(admin.StackedInline):
    model = Date
    extra = 10

class EventAdmin(admin.ModelAdmin):    
    inlines = [DateInline]

    class Media:
        js = ['js/jquery-1.3.2.min.js', 'js/collapsed_stacked_inlines.js',]

admin.site.register(Event, EventAdmin)

 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
26
27
28
29
30
31
32
33
/* collapsed_stacked_inlines.js */
/* Created in May 2009 by Hannes Rydén */
/* Use, distribute and modify freely */

jQuery(function($) {
    // Only for stacked inlines
    $('div.inline-group div.inline-related:not(.tabular)').each(function() {
        fs = $(this).find('fieldset')
        h3 = $(this).find('h3:first')

        // Don't collapse if fieldset contains errors
        if (fs.find('div').hasClass('errors'))
            fs.addClass('stacked_collapse');
        else
            fs.addClass('stacked_collapse collapsed');
        
        // Add toggle link
        h3.prepend('<a class="stacked_collapse-toggle" href="#">(' + gettext('Show') + ')</a> ');
        h3.find('a.stacked_collapse-toggle').bind("click", function(){
            fs = $(this).parent('h3').next('fieldset');
            if (!fs.hasClass('collapsed'))
            {
                fs.addClass('collapsed');
                $(this).html('(' + gettext('Show') + ')');
            }
            else
            {
                fs.removeClass('collapsed');
                $(this).html('(' + gettext('Hide') + ')');
            }
        }).removeAttr('href').css('cursor', 'pointer');
    });
});

More like this

  1. Django Collapsed Stacked Inlines by applecat 1 year, 9 months ago
  2. Django Collapsed Stacked Inlines by mkarajohn 3 years, 10 months ago
  3. Dynamically adding forms to a formset. OOP version. by halfnibble 9 years, 6 months ago
  4. Convert multiple select for m2m to multiple checkboxes in django admin form by abidibo 11 years, 7 months ago
  5. Django admin inline ordering - javascript only implementation by ojhilt 11 years, 11 months ago

Comments

gmandx (on March 3, 2010):

Now I'm using Django 1.2 beta 1 SVN-12660, and the admin interface now includes a button to dynamically add new inlines. So I exclude the empty inline that Django has hidden, with this:

$('div.inline-group div.inline-related:not(.tabular):not(.empty-form)')...

Adding ":not(.empty-form)')" to the selector excludes all dynamic inlines, and they always appear expanded (I like that way, so the user knows what just created)

#

xenolog (on June 6, 2010):

For use with Django 1.2 we need change:

jQuery(function($) {

to

(function($) {
    $(document).ready(function() {

and last 

});

to 

    });
})(django.jQuery);

In this case call jQuery-XXXXX.js from Media from admin.ModelAdmin not nessesary.

#

shacker (on July 30, 2010):

Thanks Aneon and xenolog - works perfectly.

#

Please login first before commenting.