using row.entity does not work when grouping is enabled

Question

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?

@Kathir I made a quick plunk, you should notice that I am grouping by zip code, but row.entity does not renders there,, plnkr.co/edit/0iynttvUc98Gzpi4jTtK?p=preview — Ganesh Vellanki
– Ganesh Vellanki, Commented Jul 10, 2015 at 5:09

Kathir · Accepted Answer · 2015-07-10 06:28:58Z

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

Collectives™ on Stack Overflow

using row.entity does not work when grouping is enabled

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related