angular ui grid with multiple expandable levels and merged cells

Viewed 2481

I have a plunker.

I'm using angular-ui-grid with 2 levels of expandable rows.

  1. People - expandable
  2. Friends - expandable
  3. Pets - regular

The People level has this expandableRowTemplate

<div ui-grid="row.entity.subGridOptions" ui-grid-expandable  style="height:150px;"></div>

and these options:

$scope.gridOptions = {
  expandableRowTemplate: 'expandableRowTemplate.html',
  expandableRowHeight: 150
}

The Friends level has this expandableRowTemplate:

<div ui-grid="row.entity.subGridOptions" style="height:150px;"></div>

and these options:

data[i].subGridOptions = {
      columnDefs: [ {name:"Id", field:"id"},{name:"Name", field:"name"} ],
      data: friends,
      expandableRowTemplate: 'expandableRowTemplate2.html',
      rowTemplate: 'rowTemplate.html'
    }

The Pets level has options like this:

friends[j].subGridOptions = {
      columnDefs: [ {name:"Name", field:"name"} ],
      data: friends[j].pets
    }

On the Friends level, I want to be able to show a groupname with merged cells and a single piece of text. Kind of like a header, but inside the list. The list will be sorted beforehand, so I can just insert a number of groupnames where I want them. This is done by adding a custom rowtemplate (see above) to this level and testing the id of the row like this (in reality I will test a 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 way works fine in other examples when not using expandable rows.

When using expandable rows, it seems like the row where I want to show the groupname is rendered twice, once correctly, and once in the rowheader cell (See Rosanne Barret in picture below)

row is rendered twice

how can i prevent this? I only want the text to be shown once

1 Answers
Related