0

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

Paul Witherspoon
  • 211
  • 3
  • 13
  • 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 May 12 '14 at 21:43
  • can you add a example/fiddle? because it's hard to understand what you mean. – Alex Choroshin May 12 '14 at 22:02
  • 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: http://plnkr.co/edit/Bp2h2Lg6YzJoMbjocgg2?p=info. Thanks. – Paul Witherspoon May 13 '14 at 12:56
  • 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="
    {{row.label CUSTOM_FILTERS}}
    "     – Paul Witherspoon May 13 '14 at 14:24

2 Answers2

1

Just add showTreeRowHeader: false, to your grid option

Mohamed NAOUALI
  • 2,092
  • 1
  • 23
  • 29
0

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>
Paul Witherspoon
  • 211
  • 3
  • 13