Login

Django Collapsed Stacked Inlines

Author:
applecat
Posted:
February 24, 2023
Language:
JavaScript
Version:
Not specified
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
49
50
51
52
/* 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
// https://djangosnippets.org/snippets/10817/

// 2023 updates by Dmitry Akinin

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');

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

  // Hide/Show button click
  $('div.inline-group').on('click', '.stacked_collapse-toggle', function () {
    const $fs = $(this).parents('.inline-related').children('fieldset')
    if (!$fs.hasClass('collapsed')) {
      $fs.addClass('collapsed');
      this.innerHTML = gettext('Show');
    } else {
      $fs.removeClass('collapsed');
      this.innerHTML = gettext('Hide');
    }
  })
});

More like this

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

Comments

Please login first before commenting.