Change angular ui-grid's columns visibility

UshaP picture UshaP · Oct 26, 2014 · Viewed 32.7k times · Source

I want to show/hide columns after the grid is rendered. Before i moved to the new ui-grid I called to toggleVisible() but now it doesn't seem to work. I tried to change the column def visibility(or any other property) like bellow

columnDefs[9].visible = false;

When I set the visibility on the column definition(before render) it does work, but after wards i cannot change it.

Answer

mmamane picture mmamane · Apr 29, 2015

Old question, but this works for me in 3.0.0-rc.20. I'm guessing columnDefs needs to be in scope.

$scope.columnDefs = [ 
    { name: 'one' },
    { name: 'two', visible: false }
];

$scope.grid = {
    data: 'data',
    columnDefs: $scope.columnDefs
};

$scope.grid.onRegisterApi = function(gridApi){
    $scope.gridApi = gridApi;
};    

$scope.showColumnTwo = function() {
    $scope.columnDefs[1].visible = true;
    $scope.gridApi.grid.refresh();
};