Saturday, September 1, 2012

Using CTreeView with NestedSetBehavior in Yii

Getting this whole thing to work took me a few days of experimenting. Finally I've got it working. Posting it here hoping that it would save others some time and if I need it back in the future.

The Yii nested set behavior extension can be found at http://www.yiiframework.com/extension/nestedsetbehavior/.

Download the zip file and then extract it into the "app root"/protected/extensions/NestedSetBehavior folder. Make sure that the NestedSetBehavior.php can be found at "app root"/protected/extensions/NestedSetBehavior/NestedSetBehavior.php.

Then modify the model file which you want to use the behavior with. For example, I have a model Areas and the file "app root"/protected/models/Areas.php. Add to the mentioned file the following lines:
 public function behaviors()
 {
  return array(
   'nestedSetBehavior'=>array(
    'class'=>'application.extensions.NestedSetBehavior.NestedSetBehavior',
    'leftAttribute'=>'lft',
    'rightAttribute'=>'rgt',
    'levelAttribute'=>'level',
    'hasManyRoots'=>true,
    'rootAttribute'=>'root_area',
   ),
  );
 }

The table for the model has to have the lft, rgt, level, and root_area field. All the field of type integer. The hasManyRoots determine whether the behavior should support more than 1 root per table, and so if it is true, the root_area will contain the root node id.

Then you need to modify the actionCreate and the actionUpdate method of the controller to use $model->saveNode(); rather than $model->save();

And that should be it to get nested behavior working. But.... how would you display it using the CTreeView widget? And how would you update it using that?

To display the tree, in the view, it is as simple as:
$this->widget('CTreeView', array(
 'id'=>'treelink',
 'data'=>$treedata,
)); 

But to get the $treedata? I've added the following 2 function into the model file.
 
public function treechild($id)
 {
  $curnode = Areas::model()->findByPk($id);
  if($curnode){
   $childrens = $curnode->children()->findAll();
   if(sizeOf($childrens)>0){
    $out = array();
    foreach($childrens as $children){
     $currow=['id'=>$children->id,'text'=>$children->name,'children'=>$this->treechild($children->id)];
     $out[]=$currow;
    }
    return $out;
   }
   else{
    return null;
   }
  }
  return null;
 }

 public function treedata()
 {
  $roots = Areas::model()->roots()->findAll();
  $out = array();
  foreach($roots as $root){
   $currow=['id'=>$root->id,'text'=>$root->name,'children'=>$this->treechild($root->id)];
   $out[]=$currow;
  }
  return $out;
 }


The treedata function would iterate over all the root nodes in the table and the treechild function would iterate over all the child nodes so that the data would be put into a properly formatted data structure. The CTreeView require an array with at least the id field for id, and text field to be displayed in the tree.

And so the controller is as simple as:
  $this->render('tree',array(
   'dataProvider'=>$dataProvider,
   'treedata'=>Areas::model()->treedata(),
  ));


But that's only good for displaying the tree, to fully modify the tree (add new nodes and updating existing nodes), I need to add the following javascript to the view:
Yii::app()->clientScript->registerScript('clickscript',"
$('#treelink li').on('click', function(event) {
 event.stopPropagation();
 $('#create').attr('href',$.param.querystring($('#create').attr('href'),'parent_id='+$(this).attr('id')));
 $('#edit').attr('href',$.param.querystring($('#edit').attr('href'),'id='+$(this).attr('id')));
});
",CClientScript::POS_READY);


And the following menu (do note that I'm currently using the default layout which displays the menu widget):
$this->menu=array(
 array('linkOptions'=>array('id'=>'create'),'label'=>'Create Areas', 'url'=>array('create')),
 array('linkOptions'=>array('id'=>'edit'),'label'=>'Edit Area', 'url'=>array('update')),
 array('label'=>'Manage Areas', 'url'=>array('admin')),
);


And in the create view:
if(isset($parent_id)){
echo $this->renderPartial('_form', array('model'=>$model,'parent_id'=>$parent_id)); 
}

And in the _form view:
if(isset($parent_id)){
 echo CHtml::hiddenField('parent_id',$parent_id);
}


And in the actionCreate method in the controller, added after the "$model->attributes=$_POST['Areas'];" line:
   if(isset($_POST['parent_id'])){
    $parent = Areas::model()->findByPk($_POST['parent_id']);
    if($parent){
     $model->appendTo($parent);
    }
   }


And the render line would be changed to:
  $this->render('create',array(
   'model'=>$model,
   'parent_id'=>$_GET['parent_id'],
  ));


So what the whole thing actually did, was to bind the li items in the node tree to change the create and edit link when clicked. The create link will be changed so that the currently selected node id set as parent_id and the edit link is changed so that id is the currently selected node id. Once the create method received the parent_id variable, it would be passed on all the way into the form. And once saved, if the parent_id actually exists and points to a real node, the new node would be set to append to the aforementioned node. There isn't much change for the update method.

And that folks, is how you would use the CTreeView with the NestedSetBehavior.

Haiya ala Solah