How to display django-treebeard MP in template as dropdown menu?

Question

Following the treebeard docs api example, I created an annotated_list of my tree using get_annotated_list(parent=None, max_depth=None) with parent=<my root node>. I pass this to my template and using the example they attribute in the docs to Alexey Kinyov, I am able to successfully display my tree using

{% for item, info in annotated_list %}
    {% if info.open %}
        <ul><li>
    {% else %}
        </li><li>
    {% endif %}

    {{ item }}

    {% for close in info.close %}
        </li></ul>
    {% endfor %}
{% endfor %}

What I would like though is to be able to give these nested lists dropdown features. Borrowing from this standard example on w3schools, I modified it to work with my annotated_list template variable and ended up with this:

<ul id="myUL">
    <li><span class="caret">{{ annotated_list.0.0 }}</span>
        {% for item, info in annotated_list|slice:"1:" %}
            {% if info.open %}
                <ul class="nested"><li>
            {% else %}
                </li><li>{% if item.get_children_count > 0 %}<span class="caret">
                        {% endif %}
            {% endif %}

            {{ item }}
            {% if item.get_children_count > 0 %}</span>
                    {% endif %}

            {% for close in info.close %}
                </li></ul>
            {% endfor %}

        {% endfor %}
    </li>
</ul>

My code almost works, but does not seem to display node children for left-most nodes and I can't figure out why.

Note: CSS & JS not included in question but needed to make the dropdown menu work (I'm just using the out-of-the-box CSS/JS used in that w3schools example)

Answer 1

You can try this Code:

<ul id="myUL">
  {% for item, info in annotated_list %}
  {% if item.get_children_count > 0 %}
  <li><span class="box">{{item}}</span><ul class="nested">
  {% else %}
  <li>{{item}}</li>
  {% endif %}
  {% for close in info.close %}
  </ul>
  {% endfor %}
  {% endfor %}
</ul>

It worked for me.

To add some missing context:

views.py:

def tree(request):
    annotated_list = Category.get_annotated_list()
    # template_name = 'JsonDefine/tree.html'
    context = {
        'annotated_list': annotated_list
    }
    return render(request, 'JsonDefine/tree3.html',context)

urls.py

from django.urls import path
from . import views

app_name = 'MyApp'
urlpatterns = [
    path('tree/', views.tree, name='tree'),
]

Answer 2

The most likely reason is that there is a problem with the tree. Run Model.find_problems() to confirm.

Model.fix_tree() can fix most of the common problems.

Note that the get_annotated_list_qs() function doesn't really work at all.