The app I am working on requires me to access the paginationChanged function which is only available to me if I were to add an onRegisterApi object to my gridOptions in the table. I need to access the paginationChanged function so that I can change the height of the grid as the PageSize increases. The only way that I know of to access the the gridApi is to inject $scope which is no longer being used in since Angular 1.6 and up. Right now I am using Angular 1.6 and to access the gridOptions on the html view is through the use of ui-grid= $ctrl.gridOptions. Does anyone know of a way to access the gridApi when part of the onRegisterApi object without having to use $scope?
2 Answers
The way to access gridApi without the usage of $scope in the controller or service where your gridOptions object lives is to make sure that you add the following properties: appScopeProvider: which allows you to set the name of your this object which is my case was $ctrl. and onRegisterApi: which is needed to allow you to access to the gridApi. Reference http://ui-grid.info/docs/#/api/ui.grid.class:GridOptions
When you use appScopeProvider to reset the name of your this object , you also are setting the name for the gridApi. So in instead of using the $ctrl.gridapi you would only need to use $ctrl by itself. So in my case the solution was the following:
var OverViewTable = function ($ctrl) {
var gridOptions = {
enableSorting: true,
enablePagination: true,
enablePaginationControls: true,
paginationPageSizes: [50, 100, 200],
paginationPageSize: 50,
rowHeight: 60,
appScopeProvider:$ctrl,
onRegisterApi: function ($ctrl){
$ctrl.pagination.on.paginationChanged(null, function(newPage,
pageSize){}
I also had to set where you would normally see $scope to null as an argument in the function paginationChanged() since I didn't want to use $scope.
Comments
The gridApi object does not get added to your $ctrl automatically. If you want it there, you have to attach it yourself.
Here's how to access the gridApi through the onRegisterApi callback:
$ctrl.gridOptions = {
onRegisterApi = function(gridApi){
//Save a reference to the gridApi for later
$ctrl.gridApi = gridApi;
//Attach your event handlers
gridApi.cellNav.on.navigate($scope,function(newRowCol, oldRowCol){
$log.log('navigation event');
});
}
}
3 Comments
Stephanie Cray
I tried what you are saying but $ctrl.gridApi comes up as undefined in the console. It seems like onRegisterApi will on define gridApi with $scope attached.
JC Ford
$ctrl.gridApi will be undefined until you define it in the onRegisterApi callback.Stephanie Cray
Thanks @JCFord, I was able to find a solution and will post it below with code.
onRegisterApicallback is there specifically to give you access to the gridApi. You can attach your grid event handlers at that point and even save a controller reference to the gridApi for use in other event handlers if necessary. Can you elaborate on what you're trying that isn't working?