Use CTreeView to load content

Yii 1.1 General Discussion
1

Hi, maybe anyone can help me: I have a CTreeView which I use to load hierarchical data from DB as the user expands the nodes. This part works fine. Now, I would like to use the items shown in the treeView to trigger the loading of some content which shall be displayed.

So, on the one hand, the user shall be able to expand nodes, on the other hand he shall be able to select the nodes (click them) to navigate through my homepage. So far, I haven’t found a way to make this work.

I tried to set the the nodes text property to a link, but this causes a complete page reload and thus the status of the CTreeView is lost.

I tried to set the the nodes text property to a CHtml::ajaxLink, but as this ajax link is generate in a ajax request itself, the necessary event handlers don’t get registered.

Am I missing something obvious? Can anyone give me a hint?

2

I am facing the exact same problem. Will also like to be able to select a tree node for it to load content and display in another part of the page, effectively using it as a menu system.

3

Based on your description here is what I would do.

Set the ‘toggle’ property for the CTreeView widget. This sets a javascript callback function whenever a node is toggled. Once in the callback function should be pretty easy to determine the clicked node and do something. Note: If using ‘url’ for dynamic node loading this event fires when the node is click not when child nodes are finish loading via AJAX.

4

Please, could you post a example?

5

In the view file I publish a Javascript file and add the ‘toggle’ option to call a Javascript function when a node is toggled:




<?php

publishJs('/js/treeView.js');

Yii::app()->clientScript->registerCoreScript( 'jquery.ui' );

$this->widget(

    'CTreeView',

    array('url' => array('ajaxFillTree'),

        'toggle' => 'js:toggleTreeNode',

        )

);

?>

Then in the Javascript file ‘treeView.js’ create the function with the ‘this’ variable being the clicked ‘UL’




function toggleTreeNode()

{

    alert('click UL id:' + this.id);

}

Hopefully this provides the basic concept to get what you need done. Keep in mind this event is triggered when a node is click not when the node has finished loading. If you are using ‘url’ option and want to operate on the content of node after being loaded check see my other post.