how to hide/show ng-grid column externally?

Question

I am using ng-grid where i want to hide/show columns on external button click.

I tried this, but its not working

$scope.gridOptions.$gridScope.columns[0].toggleVisible()

Baxter

You maybe missing $scope.$apply() if this is being called from outside angular context. – Euonymus

Please provide a little more context (i.e. code). – Toddle

Answer 1

Try using the ng-click directive

your html button could look like this

<input type="button" ng-click="toggleCol(0)" />

and your js like this

var app = angular.module('myCoolGridApp', ['ngGrid']);
app.controller('MyCtrl', function ($scope) {
    $scope.toggleCol= function(i) {
       $scope.gridOptions.$gridScope.columns[i].toggleVisible()
    }
}

Bluejacket

Thanks for the reply. I was doing the same, but i am getting an error like TypeError: Cannot read property 'columns' of undefined. When i try to log the $gridScope its says 'undefined'. Still i can see that when I log the entire $scope $scope>gridOptions>$gridScope>columns – Baxter

Not sure what's wrong for you, this code works for me. So also in this quick Plunker example : plnkr.co/edit/I9ajQw?p=preview – Bluejacket

Thanks. It worked for me also. The issue i had was the delay in registering the object. – Baxter

Nice hack, thank you. May I add that column definition must be set to visible: false or visible: true first? That worked for me as well. – Haskel