{% extends "base" %}

{% block title %}Javascript tree with multiple select{% endblock %}
{% block h1 %}Example 8 - multiple select{% endblock %}

{% block previous_url %}autoscroll.html{% endblock %}
{% block previous_title %}Example 7{% endblock %}

{% block next_url %}custom_html.html{% endblock %}"
{% block next_title %}Example 9{% endblock %}

{% block contents %}
    <p>
        This example implements multiple select using the following functions and events:
    </p>
    <ul>
        <li>
            <strong>addToSelection</strong>: add node to selections
        </li>
        <li>
            <strong>isNodeSelected</strong>: is this node selected?
        </li>
        <li>
            <strong>removeFromSelection</strong>: unselect this node
        </li>
        <li>
            <strong>tree.click event</strong>: this event is fired when a user clicks on a node
        </li>
    </ul>

    <div id="tree1"></div>

    <h3>html</h3>

<pre><code class="language-markup">&lt;div id="tree1" data-url="/nodes/"&gt;&lt;/div&gt;</code></pre>

    <h3>javascript</h3>

<pre><code class="language-javascript">$(function() {
    var $tree = $('#tree1');
    $tree.tree({
        data: ExampleData.example_data,
        autoOpen: true,
    });
    $tree.bind(
        'tree.click',
        function(e) {
            // Disable single selection
            e.preventDefault();

            var selected_node = e.node;

            if (selected_node.id == undefined) {
                console.log('The multiple selection functions require that nodes have an id');
            }

            if ($tree.tree('isNodeSelected', selected_node)) {
                $tree.tree('removeFromSelection', selected_node);
            }
            else {
                $tree.tree('addToSelection', selected_node);
            }
        }
    );
});
</code></pre>
{% endblock %}

{% block script %}
    <script>
        $(function() {
            var $tree = $('#tree1');
            $tree.tree({
                data: ExampleData.example_data,
                autoOpen: true
            });
            $tree.bind(
                'tree.click',
                function(e) {
                    // Disable single selection
                    e.preventDefault();

                    var selected_node = e.node;

                    if (selected_node.id == undefined) {
                        console.log('The multiple selection functions require that nodes have an id');
                    }

                    if ($tree.tree('isNodeSelected', selected_node)) {
                        $tree.tree('removeFromSelection', selected_node);
                    }
                    else {
                        $tree.tree('addToSelection', selected_node);
                    }
                }
            );
        });
    </script>
{% endblock %}
