CODEWITHSUNDEEP
angular-ui-grid
Ganesh Vellanki
Ganesh Vellanki

Reputation: 421

using row.entity does not work when grouping is enabled

I am using grouping feature in ui-grid, but I want to group by taskId instead of taskName, as taskNames are not unique in my project. So I did this,

 $scope.gridOptions.columnDefs = [

 {
    field:'taskId',
    displayName:'Task Name',
    cellTemplate:'<span>{{row.entity.taskName}}</span>'
    grouping:{
       groupingPriority:0
    }
 }
  .....
]

where the grid is grouped by taskId but taskName is used for representation. But this does not renders properly for the header-row that comes top of a group. But renders properly for children in group. Have anyone faced this issue?

Upvotes: 2

Views: 1355

Answers (1)

Kathir
Kathir

Reputation: 6196

There is no row at the group top level because there could be many child rows grouped under one group. So row.entity is actually an object with group level values. You can traverse the groups children and then use one of them to render the group header.

You can try something along this lines,

 $scope.gridOptions = {
    //enableFiltering: true,
    treeRowHeaderAlwaysVisible: false,
    columnDefs: [
      { name: 'name', width: '30%' },

      { name: 'gender', grouping: { groupPriority: 1 }, sort: { priority: 1, direction: 'asc' }, width: '20%', cellFilter: 'mapGender' },

      { name: 'age', treeAggregationType: uiGridGroupingConstants.aggregation.MAX, width: '20%' },

      { name: 'company', width: '25%' },

      { name: 'registered', width: '40%', cellFilter: 'date', type: 'date' },

      { name: 'zip', displayName:'State' ,grouping: { groupPriority: 0 }, sort: { priority: 0, direction: 'desc' }, width: '35%', cellTemplate: '<span>{{grid.appScope.name(grid, row)}}</span>' },

      //the below commented is the actual col but I did grouping with zip and put state of that zip

      //{ name: 'state', grouping: { groupPriority: 0 }, sort: { priority: 0, direction: 'desc' }, width: '35%', cellTemplate: '<div><div ng-if="!col.grouping || col.grouping.groupPriority === undefined || col.grouping.groupPriority === null || ( row.groupHeader && col.grouping.groupPriority === row.treeLevel )" class="ui-grid-cell-contents" title="TOOLTIP">{{COL_FIELD CUSTOM_FILTERS}}</div></div>' },

    ],
  };

   $scope.name = function(grid,row,col)
  {
    console.log(row);
    if(row.groupHeader && row.treeNode.children[0].row.treeNode.children[0])
    {
      var entity = row.treeNode.children[0].row.treeNode.children[0].row.entity;
      return entity.state;
    }
    else if(row.treeNode.children[0])
    {
      var entity = row.treeNode.children[0].row.entity;
      return entity.state;
    }

    return row.entity.state;
  }

http://plnkr.co/edit/jimngRJ1rKmEIKhtpruU?p=preview

Upvotes: 2

Related Questions