angular-ui-grid load state on controller creation

Question

I want to load the last state of a ui-grid when the controller is created. I've set up a plunkr. http://plnkr.co/edit/cOhLUUABVStfoTH6QVZd?p=preview In my controller I use a restoreOnLoad function which is called immediately at the end of the controller. I get a TypeError: Cannot read property 'saveState' of undefined because the gridApi is undefined at the time of controller creation.

restoreOnLoad = function(){
  //retrieve stateinfo. For simplicity: inline object...
  var stateInfo = {
    "columns": [
        {
            "name": "",
            "visible": true,
            "width": 50,
            "sort": {
                "direction": "asc",
                "priority": 0
            },
            "filters": [
            ]
        },
        {
            "name": "M",
            "visible": true,
            "width": 50,
            "sort": {
            },
            "filters": [
            ]
        },
        {
            "name": "Company",
            "visible": true,
            "width": 200,
            "sort": {
            },
            "filters": [
            ]
        }
    ],
    "scrollFocus": {
    },
    "selection": {
    }
  }
  $scope.gridApi.saveState.restore($scope, stateInfo);
}

restoreOnLoad();

Any ideas how to avoid this error?

Answer 1

Your restore call is running before the grid's API is registered, so you just need to wait for that to happen.

You can move your restoreOnLoad() call to your onRegisterApi handler:

vm.gridOptions = {
  onRegisterApi: function (gridApi) {
    $scope.gridApi = gridApi;
    restoreOnLoad();
  }
}