customize django admin field based on another drop-down field - django

Question

I have a simple Django app with three models:
class Category(models.Model):
name = models.CharField(max_length=100)
description = models.TextField(("Description"))
class ItemType(models.Model):
name = models.CharField(max_length=100)
description = models.TextField(("Description"))
category = models.ForeignKey(Category, on_delete=models.CASCADE)
class Plant(models.Model):
category = models.ForeignKey(Category , on_delete=models.SET_NULL , null=True)
type = models.ForeignKey(ItemType, on_delete=models.SET_NULL,null = True)
name = models.CharField()
what I need is in the admin panel when I chose a category the type dropdown is filter base on that for example I have category1 and category2 and type1 related to category1 and type2 related to category2 when I choose category1 from the dropdown the type dropdown show only type1

Answer 1

I had to do this the other day, it's a bit of a pain, but doable and I've used it several times since I've come up with this method.
Steps
Add the required information to the context in render_change_form.
For your instance I'd imagine you'd want something along the lines of this
def render_change_form(self, request, context, add=False, change=False, form_url='', obj=None):
# Implement get_map to return a hierarchical dict that represents your category, item type, and plant
context['map'] = self.get_map()
return super().render_change_form(request, context, add, change, form_url, obj)
Hide rows that can't be filed yet.
window.addEventListener('DOMContentLoaded', (event) => {
django.jQuery("div.field-item_type").css('display', '');
django.jQuery("div.field-plant").css('display', '');
});
Add event listeners to update dependent fields
# When category is changed, you'll need to update options for item_type and plant
django.jQuery("select[name=category]").change(function () {
let category = django.jQuery(this)
update_item_type(category)
update_plant(django.jQuery('select[name=category]'))
});
# When item_type is changed, you'll only need to plant options
django.jQuery("select[name=item_type]").change(function () {
let item_type = django.jQuery(this)
update_plant(item_type)
});
implement update_item_type and update_plant to update options on the respective fields
They'll look something like this
function update_item_type(plant) {
let starting_item_type = django.jQuery("select[name=item_type]").val()
if (plant.val() === '') {
django.jQuery("div.field-item_type").css('display', 'none');
} else {
let item_type_dict = {{ item_type_dict|safe }};
let item_type_dom = django.jQuery('#id_item_type');
item_type_dom.text('')
django.jQuery.each(item_type_dict[plant.val()], function(index, element) {
item_type_dom.append('<option value="' + element[0] + '">' + element[1] + '</option>');
});
django.jQuery("div.field-item_type").css('display', '');
django.jQuery("select[name=item_type]").val(starting_item_type)
}
}
Access your dictionary from Django land like this
let map = {{ map|safe }};
Follow-Up
I probably should create a Django package to do this automatically. If anyone knows of one already I'd be interested to hear about it.