Installation¶

You can install this bundle with composer using the symfony-cmf/tree-browser-bundle package on Packagist.

Both the CmfTreeBrowserBundle and FOSJsRoutingBundle must be registered in the AppKernel:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// app/appKernel.php
// ...
public function registerBundles()
{
    $bundles = [
        // ...
        new FOS\JsRoutingBundle\FOSJsRoutingBundle(),
        new Symfony\Cmf\Bundle\TreeBrowserBundle\CmfTreeBrowserBundle(),
    ];
    // ...

    return $bundles;
}

Routing¶

The bundle will create routes for each tree implementation found. In order to make those routes available you need to include the following in your routing configuration:

Usage¶

The TreeBrowserBundle provides the select_tree.js and admin_tree.js files, which are wrappers to build a jQuery tree. Use them with SelectTree.initTree resp. AdminTree.initTree.

• SelectTree in select_tree.js is a tree to select a target tree node, e.g. in a form. The id of the target is put into a text field;
• AdminTree in admin_tree.js is a tree to create, move and edit nodes.

Both have the following options when creating:

• config.selector: jQuery selector where to hook in the js tree;
• config.rootNode: id to the root node of the tree, defaults to /;
• config.selected: id of the selected node;
• config.ajax.children_url: URL to the controller that provides the children of a node;
• config.routing_defaults: array for route parameters (e.g. _locale);
• config.path.expanded: tree path where the tree should be expanded to at the moment;
• config.path.preloaded: tree path what node should be preloaded for faster user experience.

Examples¶

Look at the templates in the SonataDoctrinePHPCRAdminBundle for examples how you could build a tree:

• admin_tree.js
• select_tree.js (look for doctrine_phpcr_type_tree_model_widget)

In the same bundle, the PhpcrOdmTree implements the tree interface and provides an example how to implement the methods.

Customizing the Tree Behavior¶

The TreeBrowserBundle is based on jsTree. jsTree works with events, dispatched every time the user does an action. A simple way to customize the tree behavior is to bind your actions to those events.

If you have a look at admin_tree.js and select_tree.js, you will notice that actions are already bound to some of the tree events. If the default behavior is not what you need, jQuery provide the unbind method to remove the default events. Here is a simple way to remove the context menu from the admin tree:

By default, the item selection opens the edit route of the admin class of the element. This action is bind to the select_node.jstree. If you want to remove it, you just need to call the unbind function on this event:

1
2
3

$(document).ready(function() {
    $('#tree').unbind('select_node.jstree');
});

Then you can bind it on another action.

For example, if your want to open a custom action:

Read On¶

• Configuration Reference