Login

Django Collapsed Stacked Inlines

Author:
mkarajohn
Posted:
January 11, 2021
Language:
JavaScript
Version:
2.1
Score:
0 (after 0 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.

Works with

Django 3.1.4 (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/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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/* collapsed_stacked_inlines.js */
/* Created in May 2009 by Hannes Rydén */
/* Use, distribute and modify freely */

// Original script
// https://djangosnippets.org/snippets/1492/

// 2021 updates by Dimitris Karagiannis
// @MitchKarajohn

jQuery(function ($) {
  var linkStyle =
    'cursor: pointer; color: #fff; border-radius: 4px; font-weight: 400; padding: 5px 10px; background: #417690; border: none;';
  
  // Only for stacked inlines
  $('div.inline-group div.inline-related:not(.tabular)').each(function () {
    const $h3 = $(this.querySelector('h3'));
    const $fs = $(this.querySelector('fieldset'));
    const fsErrorsExist = $fs.children('.errors').length;
    const initialButtonText = fsErrorsExist ? gettext('Hide') : gettext('Show');
    const $button = $(
      $.parseHTML(
        '<a role="button" style="' +
          linkStyle +
          '" class="stacked_collapse-toggle">' +
          initialButtonText +
          '</a> '
      )
    );

    // Don't collapse initially if fieldset contains errors
    if (fsErrorsExist) $fs.addClass('stacked_collapse');
    else $fs.addClass('stacked_collapse collapsed');

    // Add toggle link
    $button.click(function () {
      if (!$fs.hasClass('collapsed')) {
        $fs.addClass('collapsed');
        this.innerHTML = gettext('Show');
      } else {
        $fs.removeClass('collapsed');
        this.innerHTML = gettext('Hide');
      }
    });

    $h3.prepend($button);
  });
});

More like this

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

Comments

Please login first before commenting.