Topic: Editable Nested Datagrids


I am wondering if anyone has done any work trying to create an editable nested datagrid where
at the top level are parent records.  If there are any child records, then there would be a +
sign to the left of the parent record, then for each child record, if there are any child records for that child record, there would be + signs next to those.  All records should be able to be edited in line.

I have seen an ASP solution for this, but not a Rails solution.  The ASP solution I saw was one that used paging for multiple pages.

Could this same paradigm be developed, but instead of paging, use a real grid?  Is an
AJAX solution possible here?


Paging mechanism

- parent rec. 1
   - child rec. 1
      grandchild rec. 1
      grandchild rec. 2
   + child rec. 2
+ parent rec. 2

1 2 3  <- paging mechanism underneath view
- - -

Real grid

- parent rec. 1            ^
   - child rec. 1             |
      grandchild rec. 1  | <- scrollbar inside a grid
      grandchild rec. 2  |
   + child rec. 2            |
+ parent rec. 2           v

Re: Editable Nested Datagrids

I'm assuming if a parent is clicked you want it to show the child entries?

Are you doing this with a model which has acts_as_tree? It will make things easier if so.

Railscasts - Free Ruby on Rails Screencasts

Re: Editable Nested Datagrids


I have not coded anything yet.  I am just in the researching stage for approaches.
But, the answer to your question is yes, when the user clicks on the + sign of a record, then the children underneath will show.

The example which I will most likely try to write in rails code is found at: … taGrid.asp

I would love to work on this with another developer in order to make a nice widget available to alot of people.  If you or anyone else wants to work on this with me, that would be great.

I am new to Rails although I have 18 years of development experience.  I need this widget for my app, but I am thinking that others could use something similar and I don't see anything like it
out there right now.

If you can think of anything else that maybe useful in doing this, e.g. model acts_as_tree,
and want to share that, I would appreciated it.

I think if a grid could be created versus a paging mechanism, that would make the user experience better.

Interested in collaboration?  Anyone?



Re: Editable Nested Datagrids

Sorry I'm too busy to collaboratively work on it, but I can give some suggestions to get you started.

If you have a model that acts_as_tree (let's call it Item) you can do this:

# in view
<div id="items">
  <%= render :partial => 'item', :collection => Item.find_all_by_parent_id(nil) %>

# in _item.rthml partial
<div id="item_<%= %>">
  <%= item.children.empty? ? '-' : link_to_remote '+', :url => { :action => 'expand_item', :id => item } %>
  <%= %>

Here the partial is called for every item that doesn't have a parent (it's a top level item). If that item doesn't have children we simply display a minus sign. If it does have children we create a remote link (AJAX) which will expand the item. We can use RJS to handle the expanding by replacing the appropriate div with a different, expanded, partial:

# expand_item.rjs
page["item_#{params[:id]}"].replace :partial => 'expanded_item', :locals => { :item => Item.find(params[:id]) }

# in _expanded_item.rthml partial
<div id="item_<%= %>">
  <%= link_to_remote '-', :url => { :action => 'collapse_item', :id => item } %>
  <%= %>
  <div id="items">
    <%= render :partial => 'item', :collection => item.children %>

The collapse action is very similar, we just render the old item partial which won't render the children:
# collapse_item.rjs
page["item_#{params[:id]}"].replace :partial => 'item', :locals => { :item => Item.find(params[:id]) }

You can use CSS to handle the scrolling. As for in place editing and adding, I would get this working first.

Railscasts - Free Ruby on Rails Screencasts

Re: Editable Nested Datagrids

Good stuff...this certainly gives me a good start.  Appreciate it.


Re: Editable Nested Datagrids


You could also check out Streamlined to give you some ideas.  It's a total package, but the code generated might help you roll your own.