CTreeView Click Handler

Hi there,

Has anyone got (or know where to find) a quick, nice example of writing own click handler for CTreeView?

Searching through forum, Yii Playground and googling net gave me only a few examples on dynamic render of CTreeView or using AJAX request to load lower-level tree branches. But I wasn’t able to find any example on handling clicks on tree items and I’m wondering if someone has any like that ready or should I craft it myself?

Thanks in advance!


Replying to myself! :] There are several ways to achieve so-called CTreeView handler:

  1. Extend CTreeView to an own class which the only purpose would be to overwrite CTreeView::saveDataAsHtml() - idea provided by fhelix72 in this article.

  2. Use a simple trick also figured out by fhelix72 in this article.

  3. Simple add unique id to each CTreeView’s item and attached jQuery’s onClick event to each of it, somewhere else in the code - similar problem is discussed here.


  1. Instead of only passing text:

$item['text'] ='Something';

pass HTML code with HTML tag a or div surrounding text. Inside newly added tag you can do whatever, you want - add onClick handler, declare on class or style, etc.:

$nodeText = CHtml::openTag('a', $options);

$nodeText.= $item['text'];

$nodeText.= CHtml::closeTag('a')."\n";

$item['text'] = $nodeText;

where $options variable is a standard Yii-htmlOptions, where you can pass, what you want.

A bit off-topic and my personal thoughts: I was kind of very surprised (negatively) to find out that current implenation of CTreeView has nothing done around handling branches’ clicks. Can someone give me any idea, for what treeview without intercepting clicks on branches can be used? Because I find it completely useless in current Yii’s implenation of it.

Can you explain a bit more on this…

As you pointed on 3. you can use jQuery.click() on any ID… so what is the problem…

The main idea behind jQuery is to avoid clutter in the XHTML code… and put all javascript code separate from it… by using onclick="…" you would be doing just the opposite…

The answer is quite simple! :]

But, you’re already doing this! ;] If we have exported (let’s name it like that) toggle - a JS callback executed when toggling tree nodes, I don’t see reason, why do not exported in the very same way new element (param) - data[‘onclick’] or even better - as fhelix72 suggests - data[‘options’].

This is not cluttering in XHTML code with javascript code, because we don’t want to add actual JS code for click reaction. We only want a callback placeholder for each tree node just as this is done with mentioned toggle.

And beside - this does not ends on just JS. Giving us options, you also enable as for adding own class and other elements to li tag holding each node (like for example title etc). Just a few lines of code and a lot of new possibilities. Won’t you agree with that? :]

I agree with you for the additional posibilities like adding class title and so on (will add it in short time)…

but still am on my thinking about your need to use onclick…

note that it’s not the same if you use jquery to bind an click() event (all code in a script tag, the LI tag is “clean”)… or an ‘onclick’ (javascript code directly in the LI tag)…

but that is just a personal liking… :D

And what about Solomon half/half solution? When I add onClick=“function_name” into LI tag and whole code into separate SCRIPT tag? :] Would that satisfy you? :] Because this is what I’m doing most of the time and that’s why I asked for this feature. I was never meant to put whole the juicy/junk JS code directly into LI’s onClick.

As I pointed above… it’s just personal taste…

I like more the version with jQuery where the HTML code is

<li id="itemX">...</li>

then the version with onclick like

<li onclick="javafunction()">...</li>

Anyway I just solved this issue - http://code.google.c…e/detail?r=3002

Can you try it?

Data example with the htmlOptions:

	$dataTree = array(










						array('text'=>'me', 'id'=>'me-id','htmlOptions'=>array('class'=>'odd')),

						array('text'=>'big sis', 'id'=>'sis-id','htmlOptions'=>array('style'=>'background:red')),

						array('text'=>'little brother', 'id'=>'bro-id'),






Thanks for doing this! :]

I would love to test it, but I’m unable! :[ I’m on a business trip for next few days, with my office computer only, on which I don’t have subversion client and where I’m unable to install any new software (enterprice policy). Therefore either I wait for official release or until I get back home to get my hands on my personal computer, where I have SVN client installed. Sorry.

Beside, I’m pretty sure that code written by you is perfect! :]

Thank you… no problem if you cannot test it…

as for the SVN… that is not a real problem…

you can just download the CListView source file from the google code (or even just copy/paste it’s content)… and put it in your Yii folder…

and there you go… :D

Cannot doesn’t mean I don’t want to! :] I’ll try to give it your way, if I only find some time.