Angular ui grid with multiple extensible levels and merged cells
I have a plunker .
I am using angular-ui-grid with 2 levels of expandable rows.
- People are extensible
- Friends - expandable
- Pets - Regular
The People level has this extensible RowTemplate
<div ui-grid="row.entity.subGridOptions" ui-grid-expandable style="height:150px;"></div>
and these parameters:
$scope.gridOptions = {
expandableRowTemplate: 'expandableRowTemplate.html',
expandableRowHeight: 150
}
The Friends level has this extensible RowTemplate:
<div ui-grid="row.entity.subGridOptions" style="height:150px;"></div>
and these parameters:
data[i].subGridOptions = {
columnDefs: [ {name:"Id", field:"id"},{name:"Name", field:"name"} ],
data: friends,
expandableRowTemplate: 'expandableRowTemplate2.html',
rowTemplate: 'rowTemplate.html'
}
The Home level has the following parameters:
friends[j].subGridOptions = {
columnDefs: [ {name:"Name", field:"name"} ],
data: friends[j].pets
}
In Friends level, I want to show group name with merged cells and one piece of text. Kind of like a title, but inside a list. The list will be sorted ahead of time, so I can just insert multiple group names where I want them. This is done by adding a custom rowtemplate (see above) to this level and checking the row id like this (in fact I will be testing the property):
<div>
<div ng-if="row.entity.id !== 0">
<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }" ui-grid-cell></div>
</div>
<div ng-if="row.entity.id === 0" >
<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name"
class="ui-grid-cell" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }"
>
</div>
<div class="ui-grid-cell-contents">
<div>
{{row.entity.name}}
</div>
</div>
</div>
</div>
This method works great in other examples if you don't use expandable strings.
When using expandable rows, it seems that the row where I want to show the group name appears twice, once correctly and once in the rowheader cell (see Rosanne Barret in the picture below)
how can i prevent this? I want the text to be displayed once
source to share
After some debugging and digging into src. I found the reason is the expandable mesh. The rim creates two containers for the expandable icon and the other for the content. Therefore, when we apply data, the content is duplicated in an extensible container and a container with text.
The only way to solve is to use the merge string functionality and check the property of the container that stores these cells, which can be accessed with the colContainer in the scope.
the expandable button cell is named colContainer as "left" and the content is named colContainer as "body".
What I did for the merge row was add the merge value true and the sample to the dataset
var friends = data[i].friends;
friends.unshift({
merge: true,
title: 'Test',
bodyTitle: 'Body Title'
});
Next is to change rowtemplate.html
<div>
<div ng-if="row.entity.merge && colContainer.name == 'left'">{{row.entity.title}}</div>
<div ng-if="!row.entity.merge" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }" ui-grid-cell></div>
</div>
or
<div>
<div ng-if="row.entity.merge && colContainer.name == 'body'">{{row.entity.title}}</div>
<div ng-if="!row.entity.merge" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }" ui-grid-cell></div>
</div>
Choose one of the options, depending on where you want to display the title. I prefer "body" because of the width constraints placed on the expandable button cell.
Plunkr example http://plnkr.co/edit/wGhvtVGwouO01thkx9Z6?p=preview
Note. Plunkr example has both "left" and "body" in the string template. So you can see the difference.
source to share