[Tree] examples of using the Tree Behavior with forms

[docteurklein]

Basically, I want to have a parent dropdown in a form. If the parent changes, obviously I need to update the tree which I suppose could be done with a listener similar to the Timestampable listener.

[docteurklein]

Indeed, one possible and interesting way would be to automatically rebuild the tree before flushing using an event listener and a explicit change strategy for tree columns.

[moafred]

Would be usefull.

[CharlyPoppins]

Hi,
can't find any example of how to use tree behavior in forms.

Do I have to create a custom type ? Does someone can show me an example ?

[moafred]

@CharlyPoppins Hey, i put in pastbin an implementation to show ordered and indented tree in form for parent node: http://pastebin.com/P9ntWM3r
If this is what you search...

[CharlyPoppins]

Thanks, it's helping.
Now that I have done this with a choice list, I'm trying to have a tree view like this :

[moafred]

@CharlyPoppins to show a tree expanded view in a backoffice, i wrote this Twig extension: http://pastebin.com/5dqnjHws.
In parameter of this twig extension you can give the "getTreeOrdered" result from the previous pastebin.

[CharlyPoppins]

Nice, works fine too,
then I'm still trying to use a tree view in a form (with radio or checkboxes).

[moafred]

You can make your tree view outside of the form and writting JavaScript to
update the form values (wich will be hidden).

Le dim. 29 mars 2015 19:30, Charly Poppins notifications@github.com a
écrit :

Nice, works fine too,
then I'm still trying to use a treeview in a form (with radio or
chexkboxes).
[image: Tree view in form]
https://cloud.githubusercontent.com/assets/7072633/6886790/c9809aec-d649-11e4-8b0a-44dc77c89fe5.png

—
Reply to this email directly or view it on GitHub
#38 (comment)
.

[moafred]

Or use the generateTreeFlat and write JavaScript to modify the view.

Le dim. 29 mars 2015 19:58, Frédéric Oudry frederic.oudry@gmail.com a
écrit :

You can make your tree view outside of the form and writting JavaScript
to update the form values (wich will be hidden).

Le dim. 29 mars 2015 19:30, Charly Poppins notifications@github.com a
écrit :

Nice, works fine too,
then I'm still trying to use a treeview in a form (with radio or
chexkboxes).
[image: Tree view in form]
https://cloud.githubusercontent.com/assets/7072633/6886790/c9809aec-d649-11e4-8b0a-44dc77c89fe5.png

—
Reply to this email directly or view it on GitHub
#38 (comment)
.

[CharlyPoppins]

Yes but it can be nice if I manage to add a TreeViewFormType that can be called in a FormBuilder.-,
with parametre a recordset $em->getRepository('CharlyBundle:Categorie')->getTreeOrdered()
and this have to return null, one or multiple choices/entities.

[docteurklein]

i agree it would be nice, but it would be in another repo, to keep this one simple, single-purpose.

[moafred]

Agree with you @docteurklein

[CharlyPoppins]

I finally managed to build my tree view :)
Used a macro that I call in a view.

{% import "CharlyBaseBundle:Vendors:treeview.macros.html.twig" as treeview %}
{{ treeview.affiche(formCategories.categories) }}

{% macro affiche(form) %}
    {% import _self as myMacro %}
    {% set listeFormViews = form.children %}
    {% set listeChoiceViews = form.vars.choices %}
    {#{ dump(listeFormViews) }}
    {{ dump(listeChoiceViews) }#}
    <ul id="categories-tree" class="tree">
        {% if form.vars.empty_value != null %}
        <li class="tree-folder">
            <span class="tree-folder-name">
                {#% if form.vars.multiple %}
                    <input type="checkbox" id="{{ form.vars.id }}_placeholder" name="{{ form.vars.full_name }}" {{ block('widget_attributes') }} value=""{% if checked %} checked="checked"{% endif %} />
                {% else %#}
                    <input type="radio" id="{{ form.vars.id }}_placeholder" name="{{ form.vars.full_name }}" {{ block('widget_attributes') }} value=""{% if form.vars.data == null %} checked="checked"{% endif %} />
                {#% endif %#}
                <i class="fa fa-circle"></i>
                <label class="tree-toggler" for="{{ form.vars.name }}_placeholder">{{ form.vars.empty_value|trans }}</label>
            </span>
        </li>
        {% endif %}
        {% for choiceView in listeChoiceViews %}
            {% if choiceView.data.categorieParente == null %}
                {% for formView in listeFormViews %}
                    {% if formView.vars.value == choiceView.data.id %}
                        {{ myMacro.recursive(choiceView.data, listeChoiceViews, listeFormViews) }}
                    {% endif %}
                {% endfor %}
            {% endif %}
        {% endfor %}
    </ul>
    {% do form.setRendered %}
{% endmacro %}

{% macro recursive(objet, listeChoiceViews, listeFormViews) %}
    {% import _self as myMacro %}
    {% set choiceView = listeChoiceViews[objet.id] %}
    {% set formView = listeFormViews[objet.id] %}
        {{ myMacro.affichage(choiceView, formView) }}
        {% if choiceView.data.childNodes|length > 0 %}
        <ul>
            {% for element in choiceView.data.childNodes %}
                {#{ dump(element) }#}
                {{ myMacro.recursive(element, listeChoiceViews, listeFormViews) }}
            {% endfor %}
        </ul>
        {% endif %}
    </li>
{% endmacro %}

{% macro affichage(choiceView, formView) %}
    {% import _self as myMacro %}
    {% if formView != null %}
    {% set parentForm = formView.parent %}
    <li class="tree-folder">
        <span class="{% spaceless %}
            {% if choiceView.data == null or choiceView.data.childNodes|length > 0 %}
                tree-folder-name
            {% else %}
                tree-item-name
            {% endif %}
            {#% if formView.vars.checked %}
                 tree-selected
            {% endif %#}
            {% endspaceless %}">
            {% if parentForm.vars.multiple %}
                <input type="checkbox" id="{{ parentForm.vars.id }}_{{ choiceView.value }}" name="{{ parentForm.vars.full_name }}" {{ block('widget_attributes') }} value="{{ choiceView.value }}"{% if formView.vars.checked %} checked="checked"{% endif %} />
            {% else %}
                <input type="radio" id="{{ parentForm.vars.id }}_{{ choiceView.value }}" name="{{ parentForm.vars.full_name }}" {{ block('widget_attributes') }} value="{{ choiceView.value }}"{% if formView.vars.checked %} checked="checked"{% endif %} />
            {% endif %}
            {% if choiceView.data == null or choiceView.data.childNodes|length > 0 %}
                <i class="fa fa-folder-open"></i>
            {% else %}
                <i class="fa fa-circle"></i>
            {% endif %}
            <label class="tree-toggler" for="{{ parentForm.vars.name }}_tree_branch_{{ choiceView.value }}">{{ choiceView.label }}</label>
        </span>
    {% endif %} 
{% endmacro %}

Maybe it's not the best way, but it works for now.

[TomasVotruba]

I'm going through the old issues/PRs and closing most of them so we can focus on now.
This one is missing any feedback or reasoning so I cannot deduce anything from it.

Thanks for you though, but closing for reasons above.

If the bug still remains, please send failing test case to verify it. Only with test we'll be albe to help.