angularjs ng-grid: parent child relations between the rows (hide/show rows)

Question

I'm trying to implement rendering the ng-grid with predefined hidden rows and on some particular event I want to show them. I'm trying to simulate kind of parent-children relation between rows, but all rows will be rendered and placed in usual manner.

By default the "child" rows will be rendered as "collapsed"

When the parent item is clicked the children rows will be shown as expanded

I'm trying to find some solutions with gridOptions rowTemplate settings, but I hope somebody has already faced with this kind of problem and maybe you have already solved it and it would be very helpful if you can share your ideas/solutions.

Or if it's a new issue, what will be the best way to solve it?

Thanks

Answer 1

I added a few fields to the model for id, parentId, and expanded. On ng-click of the toggle row, it calls toggleExpansion to set the expanded state for the row. ng-show determines whether to show a row based on the expanded flag.

I made a Plunker to demonstrate: http://plnkr.co/edit/fOMMXePQhWAF4DOnF3dW?p=preview

Here are some links to related questions. See the caveats about the row height css solution in the second link.

How to get ng-grid to hide certain rows

Angular ng-grid row height