angular ui-grid grouping from object

Question

I am using ui-grid v3.0.0-rc.22 in my application.

I use grouping in my grid. I have data as follow

[{
            "_id": "559dfaa671c2bd2c0a00002f",
            "title": "dfds",
            "sku": "fdsf",
            "price": "34535",
            "desc": "dsfsdf",
            "main_image": "NOPQR09345.png",
            "added_by": "558a526b977459300a00002b",
            "user": {
                "_id": "558a526b977459300a00002b",
                "name": "Merchant",
            }
        }, {
            "_id": "559e0a0f71c2bd2c0a000031",
            "title": "dfdxf",
            "sku": "esdf",
            "price": "345",
            "desc": "xcfgvxdvf",
            "main_image": "NOPQR09345.png",
            "added_by": "558a526b977459300a00002b",
            "user": {
                "_id": "558a526b977459300a00002b",
                "name": "Merchant",
            }
        }, {
            "_id": "559e11084a3df01808000029",
            "title": "Product 1",
            "sku": "KJH",
            "price": "12508",
            "desc": "This istest",
            "main_image": "NOPQR09345.png",
            "added_by": "558a6ade977459300a00002c",
            "user": {
                "_id": "558a6ade977459300a00002c",
                "name": "Merchant",
            }
        }]

I use grouping on user._id and i want to display name in grouping header. For that i use columnDefs as Follow.

    [
       {name: 'Merchant Name', field: 'user._id', grouping: {groupPriority: 0},
                    cellTemplate: '<span style="padding:15px;">{{row.entity.user.name}}</span>'},
       {name: 'Name', field: 'title', enableCellEdit: true},
       {name: 'SKU', field: 'sku'},
       {name: 'Category', field: 'pro_category.name'},
       {name: 'Price', field: 'price', treeAggregationType: uiGridGroupingConstants.aggregation.SUM}
]

The problem is that it show username in grouped column but not showing in groupHeader rows as follow

enter image description here

How can i do that. Any help greatly appreciated.

Kathir · Accepted Answer · 2015-07-09 19:04:01Z

This is little tricky, since the grouped row does not have any actual entity associated with it. I think you can probably use the first row in the group's children to get the group header.

$scope.gridOptions = {
    enableFiltering: true,
    treeRowHeaderAlwaysVisible: false,
    columnDefs:[
       {name: 'Merchant Name', field: 'user._id', grouping: {groupPriority: 0},
                    cellTemplate:  '<span style="padding:15px;">{{grid.appScope.name(grid, row)}}</span>'},
       {name: 'Name', field: 'title', enableCellEdit: true},
       {name: 'SKU', field: 'sku'},
       {name: 'Category', field: 'pro_category.name'},
       {name: 'Price', field: 'price', treeAggregationType: uiGridGroupingConstants.aggregation.SUM}
],
    onRegisterApi: function( gridApi ) {
      $scope.gridApi = gridApi;
    }
  };

  $scope.name = function(grid,row,col)
  {
    if(row.groupHeader)
    {
      var entity = row.treeNode.children[0].row.entity;
      return entity.user.name;
    }
    else
    {
      return row.entity.user.name;
    }
    return "SAmple";
  }

Here is a plnkr http://plnkr.co/edit/N6I78SWkLK8wzZjHm8ds?p=preview

Collectives™ on Stack Overflow

angular ui-grid grouping from object

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related