Angular ui-grid grouping showing duplicate rows

Question

I am new to Angular and trying to group row's using Angular ui.grid.grouping. But I am seeing duplicate rows and its not grouped properly. I am using Angular js 1.7.2 version

app.js

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.grouping' ]);

app.controller('MainCtrl', ['$scope', '$http', '$interval', 'uiGridGroupingConstants', function ($scope, $http, $interval, uiGridGroupingConstants ) {
  $scope.gridOptions = {
    enableSorting: true,
    enableGrouping:true,
    treeRowHeaderAlwaysVisible: false,
    columnDefs: [


            { name: 'City', width:'50%', grouping: { groupPriority: 0 },defaultSort: {priority: 0}},
            { name: 'CustomerName', width:'30%' }

    ],
    onRegisterApi: function( gridApi ) {
      $scope.gridApi = gridApi;
    }
  };

  $scope.gridOptions.data = [
                    {    "City": "TEXAS", "CustomerName": "AAA"},
                    {  "City": "TEXAS", "CustomerName": "BBB"},
                    { "City": "TEXAS", "CustomerName": "CCC"  },
                    { "City": "MICHIGAN", "CustomerName": "DDD" },
                    {  "City": "NEW YORK","CustomerName": "EEE"  },
                    {   "City": "MICHIGAN" ,"CustomerName": "FFF"},
                    { "City": "MICHIGAN", "CustomerName": "GGG" },
                    {  "City": "MICHIGAN", "CustomerName": "HHH"  },
                    {   "City": "NEW YORK","CustomerName": "III" }
                ];


}])

HTML:

<div ng-controller="MainCtrl">

  <div id="grid1" ui-grid="gridOptions" ui-grid-grouping class="grid"></div>
</div>

Actual Result:

Expected Result:

Instead of 2 Michigan one Michigan
Instead of 2 New York one New York

Tried same thing using ng-grid and I am getting perfect result as below:Exactly same thing I am trying to achieve it using angular ui-grid

Have you tried changing the column order so that the City comes before CustomerName. Or try setting a sort on the City column — Steve
– Steve, Commented Jun 13, 2019 at 0:40
Changes column order, still same result. What do you mean by setting sorting on city column? enableSorting: true? Tried that, no luck. Am I missing anything? — subha
– subha, Commented Jun 13, 2019 at 1:15
Looks like an existing issue github.com/angular-ui/ui-grid/issues/5495. Workaround is to either apply a sort to the data before you assign it to the gridOptions.data, or delay a clear/re-group through the api after its been rendered. gridApi.grouping.clearGrouping(); gridApi.grouping.groupColumn(GroupColumnName); — Steve
– Steve, Commented Jun 13, 2019 at 2:56

subha · Accepted Answer · 2019-06-13 13:56:04Z

0

@Steve, thanks for your suggestions. As per your suggestion I added grouping with delay while registeringApi as below:

 onRegisterApi: function( gridApi ) {
      $scope.gridApi = gridApi;
      $timeout(function(){
        $scope.gridApi.grouping.clearGrouping();
        $scope.gridApi.grouping.groupColumn('City');
    }, 300);
    }

And it fixed it.

answered Jun 13, 2019 at 13:56

subha

1,0702 gold badges16 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Roman Kostetskyi · Accepted Answer · 2019-09-05 11:17:29Z

0

Try to add for column this row, it helps me:

sort: { priority: 0, direction: 'asc' }

answered Sep 5, 2019 at 11:17

Roman Kostetskyi

2042 silver badges4 bronze badges

Collectives™ on Stack Overflow

Angular ui-grid grouping showing duplicate rows

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related