Angular Grid (ag-grid) show/hide not working

Question

I am using Angular Grid (ag-grid) to display data. In my gridOptions, I use cellClicked to call a function when one of the columns is clicked. That function, SeeDetails simply sets a variable on the scope to true or false to hide/show the div containing the ag-grid. It does not work for some reason.

To test, I created a button outside the ag-grid which calls the same SeeDetails function. When doing it this way, the div hides the grid just fine (in my html, I have ng-show="vm.ShowDetails == 'false'" to show hide the grid).

I am thinking it has something to do with scope, just not sure what. Any ideas?

HTML:

<div ng-show="vm.ShowDetails == 'false'">
    <div style="height: 800px" ag-grid="vm.gridOptions" class="ag-fresh"></div>
</div>

VIEWMODEL:

var vm = this;
vm.ShowDetails = 'false';

vm.gridOptions = {
    rowData: null,
    enableColResize: true,
    enableSorting: true,
    enableFilter:  true,
    columnDefs: [
        {
            field: 'LogID',
            headerName: 'Log ID a',
            width: 100
        }, {
            headerName: 'Log ID',
            name: 'Log ID',
            cellClicked: function (params) {
                vm.SeeDetails(params.data.LogID);
            },
            cellRenderer: function (params) {
                return '<a>' + params.data.LogID + '</a>';
            }
        }, {
            headerName: 'Date Of Error',
            name: 'Col Name',
            cellRenderer: function (params) {
                return moment(params.data.TimeOfError).format('DD/MMM/YYYY')
                //return params.data.TimeOfError;
            }
        }
    ]
};

vm.SeeDetails = function SeeDetails(LogID) {
    if (vm.ShowDetails == 'false') {
        vm.ShowDetails = 'true';
    } else {
        vm.ShowDetails = 'false';
    }
}

Niall Crosby Niall Crosby · Accepted Answer · 2015-08-04T18:03:47

The digest cycle is not called by ag-grid on this particular callback.

To fix, just make sure the digest cycle is kicked off.

Do this by:

vm.SeeDetails = function SeeDetails(LogID) {
    if (vm.ShowDetails == 'false') {
        vm.ShowDetails = 'true';
    } else {
        vm.ShowDetails = 'false';
    }
    setTimeout( function() { $scope.$apply(); }, 0 );
}

The timeout is done as a guard, to make sure the digest cycle is not already running. Calling the native timeout instead of using the angular timeout service is required, as the angular one will guarantee a digest is running (which you don't want).

Angular Grid (ag-grid) show/hide not working

2 Answers