ng-grid how to remove auto generated aggregate/grouping columns

0
votes

Does anyone know how can I remove the auto-generated columns that are added whenever a grouping is added to the ng-grid? The columns are blank and appear at the left hand side and are around 30px wide. There are one of these columns per grouping (so if I grouped on 5 fields I would have 5 of these blank columns and it really throws my formatting).

EDIT: I am including a plunker from the ng-grid website to illustrate the issue - for each column "grouped by" an extra auto-generated column appears on the left hand side of the grid.

http://plnkr.co/edit/Bp2h2Lg6YzJoMbjocgg2?p=info

2
angularjsng-gridautogeneratecolumn
Is it not supposed to have an an expand/collapse arrow in it? You're probably missing an image artifact somewhere if they're blank – BenCr
can you add a example/fiddle? because it's hard to understand what you mean. – Alex Choroshin
Thanks for responding Ben and Alex. Alex, I have included a plunker directly from the ng-grid site as it shows what I am trying to do. If you drag any columns up to the grouping bar at the top of the grid (where it says "Drag a column header here and drop it to group by that column") then you will see an extra auto generated row appear at the left of th grid for each row included in the groupings. Here is the link: plnkr.co/edit/Bp2h2Lg6YzJoMbjocgg2?p=info. Thanks. – Paul Witherspoon
Hi Ben, you are right in that the column does normally have an arrow. I have modified the aggregate template to remove that arrow, as I don't allow the groups to be expanded/collapsed. So the column that would normally have the arrow just is empty space, so I was hoping to get rid of it. This is my aggregate template:var htmlAggregateTemplateEdit="<table ng-style=\"rowStyle(row)\" class=\"ngAggregate\"> <tbody><tr> <td > <div class=\"ob_gRGHC\"> <span class=\"ngAggregateText \">{{row.label CUSTOM_FILTERS}}</span> </div> </td> </tr></tbody> </table>" – Paul Witherspoon

2 Answers

1
votes

Just add showTreeRowHeader: false, to your grid option

0
votes

I figured it out. I had to use the ndGridEventGroups event. 

    $scope.$on('ngGridEventGroups', function (newColumns) {

        var log = [];
        angular.forEach(newColumns.targetScope.columns, function (value) {
        if (value.isAggCol != undefined)
            {value.visible = !value.isAggCol;}

        }, log);

    });

then for css you need to use (note you need to replace "table" with whatever html object you are using in your aggregate template - obviously, mine was a table :)

<style type="text/css">
span.ngAggregateText {left:0px !important;}
table.ngAggregate {left:0px !important;}
</style>