# Acts\_as\_tree edit view?

**URL:** <https://www.ruby-forum.com/t/acts-as-tree-edit-view/120317>\
**Category:** Rails\
**Created:** [November 15, 2007, 7:07pm UTC](https://www.ruby-forum.com/t/acts-as-tree-edit-view/120317 "2007-11-15T19:07:47Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![markthomas](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/90db22/32.png) [@markthomas](https://www.ruby-forum.com/u/markthomas)\
**Post date:** [November 15, 2007, 7:07pm UTC](https://www.ruby-forum.com/t/acts-as-tree-edit-view/120317/1 "2007-11-15T19:07:47Z")

</div>

How would I make an acts\_as\_tree (or acts\_as\_nested\_set) model  
editable? Anyone know any nifty rjs in-place tree editor? Or a  
treeview js widget that is editable (and is or can be integrated into  
Rails)?

Thanks,

- Mark.

---

<div class="post-metadata">

**Author:** ![markthomas](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/90db22/32.png) [@markthomas](https://www.ruby-forum.com/u/markthomas)\
**Post date:** [November 17, 2007, 8:21am UTC](https://www.ruby-forum.com/t/acts-as-tree-edit-view/120317/2 "2007-11-17T08:21:15Z")

</div>

On Nov 15, 2007 9:55 AM, Mark T. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote:

> How would I make an acts\_as\_tree (or acts\_as\_nested\_set) model  
> editable? Anyone know any nifty rjs in-place tree editor? Or a  
> treeview js widget that is editable (and is or can be integrated into  
> Rails)?

I use this drag and drop editor:  
[http://wiki.oriontransfer.co.nz/main/show/SortableTreeTutorial](http://wiki.oriontransfer.co.nz/main/show/SortableTreeTutorial) Sadly the  
wiki for this software seems to get defaced regularly - but right now  
that  
page is still showing non-spam content.

---

<div class="post-metadata">

**Author:** ![markthomas](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/90db22/32.png) [@markthomas](https://www.ruby-forum.com/u/markthomas)\
**Post date:** [November 18, 2007, 5:33pm UTC](https://www.ruby-forum.com/t/acts-as-tree-edit-view/120317/3 "2007-11-18T17:33:17Z")

</div>

Mark,

here is something I knocked up the other day. It allows navigation  
and editing all on one screen, using ajax to do the updates and  
navigate the select list. My plan is to integrate it into a redBox  
popup for product categories. You may find some of it useful. The  
select list part could be used in isolation for allocating the  
category and the edit/add/delete fields included when editing  
categories. this is still in early form, and there is room for  
improvement. Perhaps it needs to be better crudded. But it works as  
an example of a possible solution. Table has id, parent\_id and name  
fields. I havn’t added sort to it yet, but I probably will. For  
clarity and brevity, I have removed the css formatting stuff that  
makes it pretty, but you will get the idea.

## Controller:

class CategoryController \< ApplicationController

def show  
@category=Category.find\_by\_parent\_id nil  
end

def pick  
if params[:id]  
@category=Category.find params[:id]  
elsif params[:new]  
@category=Category.find params[:category\_id]  
@new\_category=@category.children.build :name=\>params[:name]  
@category.save  
@category=@new\_category # optional - to go to new category rather  
than stay in current one  
elsif params[:delete]  
@category=Category.find params[:delete\_id]  
@parent=@category.parent  
r=@category.destroy  
@category=@parent if r  
elsif params[:category\_id]  
@category=Category.find params[:category\_id]  
@category.update\_attribute :name, params[:name]  
else  
@category=Category.find\_by\_parent\_id(nil)  
end  
render :update do |page|  
page.replace\_html ‘pick\_category’, :partial=\>‘pick’  
page.replace\_html :prompt, :partial=\>‘layouts/all\_messages’  
end  
end  
end

* * *

VIEWS:

## show.rhtml

 \<%=render :partial=\>'pick' %\>
--------------------- \_pick.rhtml -------------------- Select Category: \<%= category\_select(@category)%\>   
\<%= observe\_field 'category\_select', :url=\>{:action=\>'pick'}, :with=\>'id' %\> Edit Category Name: \<%= text\_field(:category, :name) if @category.ancestors.length\>0 %\>  
\<%= observe\_field('category\_name', :url=\>{:action=\>'pick', :category\_id=\>@category}, :with=\>'name') if @category.ancestors.length\>0 %\> New Sub Category: \<%= text\_field\_tag('new\_category') if @category.ancestors.length\<3 %\>  
\<%= observe\_field('new\_category', :url=\>{:action=\>'pick', :category\_id=\>@category, :new=\>true}, :with=\>'name') if @category.ancestors.length\<3 %\> Delete Category: \<%= link\_to\_remote(@category.name, :url=\>{:action=\>'pick', :delete=\>true, :delete\_id=\>@category}) if @category.ancestors.any? and !@category.children.any? %\>   

* * *

## HELPERS: def category\_select(cat) depth,options=build\_ancestors(cat) cat.children.each {|c| options\<\< ["…/"\*depth+c.name, c.id]} select\_tag ‘category\_select’, options\_for\_select(options, cat.id) end def build\_ancestors(cat) if cat.parent\_id depth, options=build\_ancestors(cat.parent) return depth+1, options \<\< ["…/"\*depth+cat.name, cat.id] else return 0,[[cat.name, cat.id]] end end

Note 1. I particularly wanted to navigate the tree rather than  
display the whole tree with all branches in the  
select field so I have written the helpers to do that. You may prefer  
to populate all branches, in which case there is example code on the  
rails wiki.

Note 2. I don’t offer the delete option if the category has child  
categories. You may prefer to allow deletion of the whole sub  
branch.

hope this may be of some value  
Tonypm