Django: Displaying Parents And Children In Templates

Aug 14, 2025 by Viktoria Ivanova 53 views

How to Display Parents and Children Separately in Django HTML Templates

Displaying hierarchical data in a clear and organized manner is crucial for user experience, especially when dealing with categories, subcategories, or any parent-child relationships. In Django, when using a model like MPTT (Modified Preorder Tree Traversal) to manage hierarchical data, you often need to display the "parent" and "children" items separately in your HTML templates. Let's dive into how you can achieve this effectively.

Understanding the Challenge

Often, when you fetch data from an MPTT model, you might end up with a list where parent and child items are mixed together. The challenge is to structure this data in your template so that parents and their respective children are displayed in a visually distinct way. For example, you might want to display a list of device types (parents) and, under each device type, list its modifications (children).

The initial approach might lead to displaying all items in a single column, making it difficult to distinguish between parent and child items. The goal is to create a structure where the parent items are clearly identified, and their children are grouped under them. This enhances readability and makes navigation more intuitive for the user.

Setting Up Your Django Project and MPTT Model

Before we delve into the template logic, let's ensure you have a basic Django project set up with an MPTT model. First, make sure you have Django and django-mptt installed. You can install them using pip:

pip install django django-mptt

Next, create a Django project and an app. Let’s call our project hierarchical_data and our app devices:

django-admin startproject hierarchical_data
cd hierarchical_data
python manage.py startapp devices

Now, let's define our MPTT model in devices/models.py. We’ll create a model called Device that represents our hierarchical data:

from django.db import models
from mptt.models import MPTTModel, TreeForeignKey

class Device(MPTTModel):
 name = models.CharField(max_length=100)
 parent = TreeForeignKey('self', null=True, blank=True, related_name='children', on_delete=models.CASCADE)

 class MPTTMeta:
 order_insertion_by = ['name']

 def __str__(self):
 return self.name

In this model:

name is the name of the device or modification.
parent is a foreign key to the same model, creating the tree structure.
MPTTMeta is used to define the order of insertion.

Don't forget to add mptt and your app (devices) to the INSTALLED_APPS in your project’s settings.py:

INSTALLED_APPS = [
 'django.contrib.admin',
 'django.contrib.auth',
 'django.contrib.contenttypes',
 'django.contrib.sessions',
 'django.contrib.messages',
 'django.contrib.staticfiles',
 'mptt',
 'devices',
]

Next, run migrations to create the database tables:

python manage.py makemigrations
python manage.py migrate

Now that our model is set up, let's create some sample data. You can do this in the Django admin panel or through a data migration. For simplicity, let’s use the Django shell. Run python manage.py shell and enter the following:

from devices.models import Device

# Create parent devices
printer = Device.objects.create(name='Printer')
scanner = Device.objects.create(name='Scanner')

# Create child devices (modifications)
Device.objects.create(name='Laser Printer', parent=printer)
Device.objects.create(name='Inkjet Printer', parent=printer)
Device.objects.create(name='Flatbed Scanner', parent=scanner)
Device.objects.create(name='Document Scanner', parent=scanner)

print("Devices created successfully!")

Fetching Data in Your View

To display the data in your template, you need to fetch it in your view. Let's create a simple view in devices/views.py:

from django.shortcuts import render
from .models import Device

def device_list(request):
 devices = Device.objects.all()
 return render(request, 'devices/device_list.html', {'devices': devices})

This view fetches all Device objects and passes them to the device_list.html template. Now, let’s create the template to display the data.

Displaying Parents and Children in the Template

To display parent and child items separately, we need to iterate through the devices and identify which ones are parents and which are children. We can use the is_root_node() method provided by django-mptt to check if a node is a root node (i.e., a parent).

Create a template file devices/templates/devices/device_list.html with the following content:

<!DOCTYPE html>
<html>
<head>
 <title>Device List</title>
</head>
<body>
 <h1>Device Types and Modifications</h1>
 <ul>
 {% for device in devices %}
 {% if device.is_root_node %}
 <li>
 <strong>{{ device.name }}</strong>
 {% if device.children.all %}
 <ul>
 {% for child in device.children.all %}
 <li>{{ child.name }}</li>
 {% endfor %}
 </ul>
 {% endif %}
 </li>
 {% endif %}
 {% endfor %}
 </ul>
</body>
</html>

In this template:

We iterate through all devices.
We check if the device is a root node using device.is_root_node. If it is, we display it as a parent item.
For each parent, we check if it has children using device.children.all. If it does, we iterate through the children and display them as list items under the parent.

Enhancing the Template with MPTT Tags

django-mptt provides template tags that can simplify the display of tree structures. To use these tags, you need to load the mptt_tags library at the beginning of your template:

{% load mptt_tags %}

One useful tag is recursetree, which recursively renders the tree structure. We can modify our template to use this tag:

<!DOCTYPE html>
<html>
<head>
 <title>Device List</title>
</head>
<body>
 <h1>Device Types and Modifications</h1>
 <ul>
 {% recursetree devices %}
 <li>
 {{ node.name }}
 {% if not node.is_leaf_node %}
 <ul>
 {{ children }}
 </ul>
 {% endif %}
 </li>
 {% endrecursetree %}
 </ul>
</body>
</html>

In this version:

{% recursetree devices %} starts the recursive rendering of the tree.
{{ node.name }} displays the name of the current node.
{% if not node.is_leaf_node %} checks if the node has children. If it does, it renders the children using {{ children }}.

This approach simplifies the template code and makes it more readable. However, it displays all nodes in a hierarchical structure. To achieve the initial goal of displaying parents and children separately with more control over styling, we might prefer the first approach.

Adding CSS for Better Presentation

To enhance the visual distinction between parent and child items, you can add some CSS to your template. Let’s add a simple style to highlight the parent items:

<!DOCTYPE html>
<html>
<head>
 <title>Device List</title>
 <style>
 .parent {
 font-weight: bold;
 }
 </style>
</head>
<body>
 <h1>Device Types and Modifications</h1>
 <ul>
 {% for device in devices %}
 {% if device.is_root_node %}
 <li>
 <strong class="parent">{{ device.name }}</strong>
 {% if device.children.all %}
 <ul>
 {% for child in device.children.all %}
 <li>{{ child.name }}</li>
 {% endfor %}
 </ul>
 {% endif %}
 </li>
 {% endif %}
 {% endfor %}
 </ul>
</body>
</html>

We’ve added a CSS class parent that makes the text bold. This makes the parent items stand out more clearly.

Advanced Techniques and Considerations

Custom Template Tags and Filters

For more complex scenarios, you might want to create custom template tags or filters. For example, you could create a filter that returns only the root nodes or a tag that renders the children of a specific parent. This can help in cases where you need more control over how the data is displayed.

Performance Considerations

When dealing with large datasets, performance can become a concern. Fetching all nodes at once and then filtering in the template might not be the most efficient approach. Consider using database queries to fetch only the necessary data. For example, you can fetch all root nodes separately and then fetch the children for each root node.

Using a Custom Context Processor

If you need to access the hierarchical data in multiple templates, you can use a custom context processor. This allows you to make the data available in every template without having to pass it explicitly in each view.

Conclusion

Displaying parent and child items separately in Django HTML templates can be achieved using various techniques, from simple iteration and conditional checks to advanced template tags and custom logic. The key is to understand the structure of your data and choose the method that best suits your needs. By leveraging the features of django-mptt and Django’s templating system, you can create clear and intuitive displays of hierarchical data, enhancing the user experience of your application. Whether you are displaying device types and modifications, categories and subcategories, or any other hierarchical data, these techniques will help you present the information in an organized and user-friendly manner. Remember, guys, the goal is to make the data accessible and easy to navigate for your users!