show category and sub-categories in hierarchy

Question

I am using django-mptt for category model. I want to show a list of categories and sub-categories as in the screenshot. The way I could show is all the list without any structure like below

BEDROOM ITEMS

ALMIRAH

2 PIECE ALMIRAH

3 PIECE ALMIRAH

BED

DOUBLE SIZE LOW BED

QUEEN SIZE LOW BED

This way its hard to know which one is parent category and which one is child category and grand-child category etc. I could either show the above way or show only the parent category using Category.objects.root_nodes()

here is my model, views and template

class Category(MPTTModel):
    name = models.CharField(max_length=100, blank=True, null=True)
    image = models.ImageField(null=True, blank=True,
                              upload_to=upload_furniture_image_path)
    slug = models.SlugField(max_length=200, unique=True)
    parent = TreeForeignKey('self', null=True, blank=True,
                            related_name='children', db_index=True)


def furniture(request, slug):
    instance = get_object_or_404(Furniture, slug = slug)
    cart_obj, new_obj = Cart.objects.new_or_get(request)
    categories = Category.objects.all()
    context = {
        'furniture': instance,
        'cart': cart_obj,
        'categories': categories
    }
    return render(request, 'furnitures/furniture.html', context)




 <div class="panel-body">
      <ul class="nav nav-pills nav-stacked category-menu">
           {% for category in categories %}
              <li>{{category.name}}</li>
           {% endfor %}
       </ul>
  </div>

So my question is how could I separate Parent Category and child category so I can show as in screenshot?

Here is the parent category with its children and grand children

Do you have a parent category called 'Men'？If not where you put the 'Men', 'Ladies', 'Kid' — Neo Ko, Dec 04 '17 at 02:32
I have a parent category of BEDROOM ITEMS which has sub-cateogry as alimrah(it has its sub-category as 2 piece almirah, 3 piece almirah), bed(queen-size-bed, king-size-bed as sub-category) — Serenity, Dec 04 '17 at 04:05
you can view the demo in https://personalized-furniture.herokuapp.com/ . For viewing the sidebar, you have to click on furniture title — Serenity, Dec 04 '17 at 04:08

Saji Xavier · Accepted Answer · 2017-12-04T07:59:15.653

1

Since you are using MPTTModel, best solution is to use the mptt methods to traverse the tree.

And if you want to display tree structure in templates, you might need to either write template tags/filters around mptt methods or use tags/filters provided by the mptt library.

Example solution :

views.py

return render_to_response('furnitures/furniture.html',
                           {'nodes':Category.objects.all()}, 
                           context_instance=RequestContext(request))

template:

<ul class="root">
    {% recursetree nodes %}
        <li>
            {{ node.name }}
            {% if not node.is_leaf_node %}
                <ul class="children">
                    {{ children }}
                </ul>

               {% endif %}
            </li>
        {% endrecursetree %}
    </ul>

it is explained in detail here

edited Dec 04 '17 at 07:59

answered Dec 04 '17 at 04:24

Saji Xavier

2,132
16
21

Thanks for your solution. However I get an error stating invalid literal for int() with base 10: 'tree_id' – Serenity Dec 04 '17 at 04:52
I know why its raising that error. Its asking me to provide id but I need to fetch all the parent categories with their sub-categories not just of the one parent category. – Serenity Dec 04 '17 at 05:01
Is it one single root or multiple roots ? – Saji Xavier Dec 04 '17 at 05:02
then use Category.objects.root_nodes(), i have modified the solution accordingly. let me know if the solution helps. – Saji Xavier Dec 04 '17 at 05:05
this is what i tried earlier but i get only parent node not the children though they have their children – Serenity Dec 04 '17 at 05:57
have you tried mptt tags/filters ? try a small excercise in your shell .. nodes=Category.objects.root_nodes() for node in nodes: print node children = node.get_children() print children .. – Saji Xavier Dec 04 '17 at 06:05
The children is printed . The node is printed as expected the following Bedroom Items Kitchen Wares Modular Kitchen – Serenity Dec 04 '17 at 06:23
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/160398/discussion-between-serenity-and-saji-xavier). – Serenity Dec 04 '17 at 06:24
Thanks a lot. This solved my problem. Thanks for being cooperative. Learnt many things regarding mptt api. – Serenity Dec 04 '17 at 07:54

show category and sub-categories in hierarchy

1 Answers1