Reputation: 27806

Django: Admin list_filter getting too long

The change_list view of my model looks like this:

The list_filter at the right side is getting too long and unusable.

Is there a way to get a more useable way to filter the change_list view of Django?

Upvotes: 6

Answers (3)

Angela

Reputation: 1731

You could try something like this.

Note: Original Post By Gedas here

Create a new template called custom_filter.html
Copy the following code into custom_filter.html. I am including two different versions - one with single select and the other with multiple select.

custom_filter_single.html

{% load i18n %}
<script type="text/javascript">
var go_from_select = function(opt) 
{ window.location = window.location.pathname + opt };
</script>
  <h3>{{ title }}</h3>
  <ul class="admin-filter-{{ title|cut:' ' }}">
  {% if choices|slice:"4:" %}
  <li>
  <select style="width: 95%;"
    onchange="go_from_select(this.options[this.selectedIndex].value)">
    {% for choice in choices %}
       <option{% if choice.selected %} selected="selected"{% endif %}
         value="{{ choice.query_string|iriencode }}">{{ choice.display }}
       </option>
    {% endfor %}
  </select>
  </li>
  {% else %}
  {% for choice in choices %}
    <li{% if choice.selected %} class="selected"{% endif %}>
      <a href="{{ choice.query_string|iriencode }}">{{ choice.display }}</a> 
    </li>
  {% endfor %}

  {% endif %}
  </ul>

custom_filter_multiple.html uses select2 lib, the below could be optimized

{% load i18n %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6- 
rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6- 
rc.0/js/select2.min.js"></script>

<script>
   $(document).ready(function() {
    $("#personnel").select2();
    $("#personnel").change(function() {
    var selected_vals = $('#personnel').val();
    var selections = selected_vals.join().replace(/\?/g, '').replace(/\,/g, 
    '&');
    window.location = window.location.pathname + "?" +selections;
    });

  });
</script>
<h3>{{ title }}</h3>
<ul class="admin-filter-{{ title|cut:' ' }}">
{% if choices|slice:"4:" %}
  <li>
   <select style="width: 95%;" class="js-example-basic-multiple" 
    multiple="multiple" id="personnel">
   {% for choice in choices %}
   <option
      value="{{ choice.query_string|iriencode }}">{{ choice.display }}
   </option>
   {% endfor %}
   </select>
  </li>

  {% else %}
  {% for choice in choices %}
       <li{% if choice.selected %} class="selected"{% endif %}>
        <a href="{{ choice.query_string|iriencode }}">{{ choice.display }}</a> 
       </li>
  {% endfor %}

  {% endif %}
  </ul>

Create a new filter class in filters.py called CustomFilter

from django.contrib.admin.filters import AllValuesFieldListFilter

class CustomFilter(AllValuesFieldListFilter): template = 'admin/custom_filter_single.html' #use appropriate template

Now use the above filter class in admin.py like this

class SomeAdmin(admin.ModelAdmin):
    list_filter = (('personnel_type', CustomDropDownFilter),)
#TIP: for custom filter labels, you can add verbose_name in 
#models.py like this. 
personnel_type = models.CharField(max_length=32, blank=True, 
                  verbose_name="By Personnel Type")

Some screenshots.

Upvotes: 2

Simon Charette

Reputation: 5116

While dal_admin_filters seems to work it hasn't been updated in a while (2017) and predates the introduction of auto-complete fields in Django 2.0.

If I was you I'd try my luck at implementing my own SimpleListFilter subclass based on the new auto-complete endpoints exposed in Django 2.0 and dal_admin_filters implementation.

Upvotes: 2

Kamil Niski

Reputation: 4765

You could try using dal_admin_filters its Django autocomplete light filters for django admin

https://pypi.org/project/dal_admin_filters/

Looks like it may be what you're looking for

Upvotes: 7

Django: Admin list_filter getting too long

Answers (3)

Related Questions