How to add data-attribute to django modelform modelchoicefield

Question

I have a django modelform 'Recipe' with a foreignkey field to a model 'Ingredient'.

When rendering the form I get a SELECT list that have an ID matching the ingredients ID and text display equal to the string representation of the field.

However, I want to add a data-attribute to the select list that matches the rendered option from the Ingredient queryset.

For example, lets say this is what is currently being rendered:

<option value="1158">Carrots</option>
<option value="1159">Strawberry</option>
<option value="1160">Onion</option>
<option value="1161">Spinach</option>

But I want to add a data attribute for the related objects:

<option value="1158" data-ingredient-type="vegetable">Carrots</option>
<option value="1159" data-ingredient-type="fruit">Strawberry</option>
<option value="1160" data-ingredient-type="vegetable">Onion</option>
<option value="1161" data-ingredient-type="vegetable">Spinach</option>

score 8 · Answer 1 · answered Aug 06 '20 at 23:52

One way is using a custom Select widget which allows passing individual attributes in options, through the label part of the widget choices: (code from this great answer)

class SelectWithOptionAttribute(Select):
   
"""
Use a dict instead of a string for its label. The 'label' key is expected
for the actual label, any other keys will be used as HTML attributes on
the option.
"""

def create_option(self, name, value, label, selected, index, 
                  subindex=None, attrs=None):
    # This allows using strings labels as usual
    if isinstance(label, dict):
        opt_attrs = label.copy()
        label = opt_attrs.pop('label')
    else: 
        opt_attrs = {}
    option_dict = super().create_option(name, value, 
        label, selected, index, subindex=subindex, attrs=attrs)
    for key,val in opt_attrs.items():
        option_dict['attrs'][key] = val
    return option_dict

To populate the individual options override label_from_instance method on a ModelChoiceField subclass(see django docs):

IngredientChoiceField(ModelChoiceField):
"""ChoiceField with puts ingredient-type on <options>"""

# Use our custom widget:
widget = SelectWithOptionAttribute

def label_from_instance(self, obj):
# 'obj' will be an Ingredient
    return {
        # the usual label:
        'label': super().label_from_instance(obj),
        # the new data attribute:
        'data-ingredient-type': obj.type
    }

Finally, simple use this field in a form:

RecipeModelForm(ModelForm):

class Meta:
    model = Recipe
    fields = [
        # other fields ...
        'ingredients',
    ]
    
    field_classes = {
        'ingredients': IngredientChoiceField
    }

score 4 · Answer 2 · answered Aug 14 '16 at 17:54

4

Why not render the fields manually?
It''ll be something like

<select>
  {% for option in form.ingredient.choices %}
     <option value="{{ option.id }}" data-ingredient-type={{ option.type }}>{{ option.name }}</option>
  {% endfor %}
</select>

Or maybe in you model form class you add the attribute to it, but this must be a string (or probably a function)

widgets = { ...
     'ingredients' = forms.Select(attrs={'data-ingredient-type': 'fruit'}),
   ...}

answered Aug 14 '16 at 17:54

Resley Rodrigues

2,218
17
17

Where would you put the template code? In the form template? What if you are doing something like `form.as_p`? So now I have to render all of the fields manually instead? – Code-Apprentice Jun 11 '20 at 00:03
And does the second code snippet add a data attribute to each ` – Code-Apprentice Jun 11 '20 at 00:03
I'm so sorry, I did not see this earlier, but I now see that you already have a solution – Resley Rodrigues Oct 28 '20 at 09:59
No worries. Thank you for your answer. – Code-Apprentice Oct 28 '20 at 15:07

score 2 · Answer 3 · answered Jan 16 '23 at 14:21

This got a lot easier on the new versions of Django:

class SelectWithAttributeField(forms.Select):
    def create_option(
        self, name, value, label, selected, index, subindex=None, attrs=None
    ):
        option = super().create_option(
            name, value, label, selected, index, subindex, attrs
        )

        if value:
            option["attrs"]["data-ingredient-type"] = value.instance. ingredient
        return option

While at the Recipe model form use it as:

class RecipeForm(forms.ModelForm):

    class Meta:
        model = Recipe
        fields = "__all__"
        widgets = {
            "ingredient": SelectWithAttributeField,
        }
    
    def __init__(self, *args, **kwargs):
        super(RecipeForm, self).__init__(*args, **kwargs)

        self.fields["ingredient"].queryset = Ingredient.objects.filter(
            recipe=recipe
        )

score 0 · Answer 4 · answered Jun 11 '20 at 00:04

My solution was to create a custom widget that overrides create_option():

class IngredientSelect(forms.Select):
    def create_option(
        self, name, value, label, selected, index, subindex=None, attrs=None
    ):
        option = super().create_option(
            name, value, label, selected, index, subindex, attrs
        )
        if value:
            ingredient = models.Ingredient.objects.get(pk=value)
            option['attrs'].update({
                'data-type': ingredient.type
            })
        return option

Then you need to specify the widget to use for the ingredient field in your form:

class RecipeForm(forms.ModelForm):
    class Meta:
        model = models.Recipe
        fields = '__all__'
        widgets = {
            'ingredient': IngredientSelect,
        }

Thanks to In Django form, custom SelectField and SelectMultipleField to pointing me towards this solution.

I'm not entirely satisfied with this solution because it assumes that value is a pk for Ingredient and executes a direct database query to get the Ingredient option. It seems like the model object should be available from the ModelChoiceField, but I was unable to find a way to get it.

This results in a database query for each option, this will really slow down the application. There is no need to retrieve the instance for every option, it is available in the `create_option` method as `value.instance`. [Tash000's solution](https://stackoverflow.com/questions/38944814/how-to-add-data-attribute-to-django-modelform-modelchoicefield/75135553#75135553) shows how to do it. — Koen De Wit, Jul 21 '23 at 18:48

How to add data-attribute to django modelform modelchoicefield

4 Answers4