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';
}
}
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).
$timeout(function() {
$scope.gridOptions.api.checkGridSize()
});
Worked for me.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.