How to Load Dropdown List Option Select Item in Django Template from an Object Model in Django Application

By Posted on

Introduction

This is an article where the main focus is to show an alternative way to load a dropdown list option. Basically, it will get all the data available from a certain object model. All those data will appear in the dropdown list component in a Django template file. Generally, that is the content of this article. Basically, there is a running Django-based application exist. In that application, using a certain model, get all the value and then pass it to a certain Django template file for further render process.

Loading Dropdown List with Data from Object Model in Django Application

So, this part will describe in sequence about how to load data from a certain object model to a dropdown list :

  1. Make sure that there is an active URL address to show and render the page. In this context, it is a page that will show the dropdown list component. Check in the ‘urls.py’ file of the Django project. For an example it exist as follows : 

     path('employee-mapping/', employee.views.home_employee_mapping, name='home_employee_mapping'),

  2. After that, first of all, just prepare a model. Get all the data from that model in the ‘views.py’ file. Certainly, it will exist in the ‘views.py’ file inside the employee folder as part of the employee app. The model preparation exist in the function with the name of ‘home_employee_mapping’ as follows : 

    from .models import Program, Task

def home_employee_mapping(request):
    list_program = Program.objects.all()
    list_task = Task.objects.all()
    context = {
        'list_program': list_program,
        'list_task': list_task
    }

    html_template = loader.get_template('employee/mapping.html')
    return HttpResponse(html_template.render(context, request))

  3. Before going on to the Django template file, the following will be the definition of the model with the name of ‘Program’ and ‘Task’. Those two programs will be available in the file with the name of ‘models.py’ as follows : 

    class Program(models.Model):
    id = models.AutoField(primary_key=True)
    code = models.CharField(max_length=10, blank=True, null=True)
    name = models.CharField(db_column='name', max_length=1000)
    def __str__(self):
        return self.name
    def save(self, *args, **kwargs):
        return super().save(*args, **kwargs)
    class Meta:
        db_table = 'employee_program'

    class Task(models.Model):
    id = models.AutoField(primary_key=True)
    name = models.TextField()
    parent = models.ForeignKey('self', blank=True, null=True, related_name='children', on_delete=models.CASCADE)
    class Meta:
        verbose_name_plural = "Task"
    def __str__(self):
        return '%s %s' %(self.kode, self.name)
  4. Finally, the following is the content of the Django template file. That file is a file with the name of ‘mapping.html’. It is  the Django template file for rendering the dropdown list : 
        <div class="card-body" style="padding-bottom: 0.25rem;padding-top: 0.25rem;">
       <h2>Mapping Program Form</h2>
           <form method="post"id="mappingForm" action="{% url 'home_employee_mapping_update' %}"novalidate>
              {% csrf_token %}
              <table>
                  <tr>
                     <td>Program : </td>
                     <td>
                         <select id="program" name="program" class="program-dropdown" style="width:400px;">
                            {% for program in list_program %}
                                <option value="{{ program.id }}">{{ program.name }}</option>
                                    {% endfor %}
                         </select>
                     </td>
                  </tr>
                  <tr>
                     <td>Task : </td>
                     <td>
                         <select id="task" name="task" class="task-dropdown" style="width:400px;">
                            {% for task in list_task %}
                                   <option value="{{ task.id }}">{{ task.name }}</option>
                            {% endfor %}
                         </select>
                     </td>
                   </tr>
              </table>
              <button type="submit">Save</button>       
           </form>
       </div>

Leave a Reply