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 3 years ago
  2. Django Collapsed Stacked Inlines by mkarajohn 5 years, 2 months ago
  3. Dynamically adding forms to a formset. OOP version. by halfnibble 10 years, 10 months ago
  4. Convert multiple select for m2m to multiple checkboxes in django admin form by abidibo 12 years, 11 months ago
  5. Django admin inline ordering - javascript only implementation by ojhilt 13 years, 3 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.