UI Grid groupHeaderRow as first child row

Question

I have been implementing grouping into my UI-Grid implementation. And I've noticed a few idiosyncrasies, such as a row is grouped even if it has no children.

I got around this by applying a cell template to columns to that grabs the data from row.treeNode.children[0].row.entity[col.field]. This way the groupHeader actually displays as the first row in the group.

I've also removed and disabled the expand/collapse icons from rows that are just one row.

Now my issue is that when you expand a row, the first child in the treeNode is the first row beneath the group header row, resulting in two duplicate rows one after another.

Is there a way to remove the first child row when expanding the group? Or better yet - is there a way to stop UI-Grid from grouping all rows no matter if they have children or not (I hope this would solve all issues and my workaround mentioned earlier).

You can see the issue in the screenshot below, and the plunker is also available here: http://plnkr.co/edit/TtchGXbO6RCt3BP6XIER?p=preview

ui grid grouping

Thanks.

I'm trying to splice the first row object from the children object when the user expands the row, it seems to work in the debugger and log but doesn't actually take effect. row.treeNode.children.splice(0, 1) — Gethin

Gethin Gethin · Accepted Answer · 2016-04-27T14:41:12

I ended up solving this by modifying the template file uiGridViewport with an ng-class to add a 'child-row' class to child rows in a group.

Then, in CSS I used the following to hide the row:

.ui-grid-tree-header-row + .child-row {
    display: none;
}

The issue now is that the striped-row nature of the grid is messed up if there an even number of rows in a group, but that belongs in a different question.

UI Grid groupHeaderRow as first child row

1 Answers