angular ui grid save and restore state

Question

I need to know how to implement save and restore state in angularui grid without using any buttons. I need to save the state automatically when ever we do any changes in the grid. We have to auto restore the saved state also. Even if we refresh the page the saved state should be restored

I'm not sure why you have been down voted. I am also trying to figure this out. Have you had any luck? — Devon Sams, Sep 04 '15 at 18:13

score 25 · Answer 1 · answered Sep 09 '15 at 17:55

Here's what I figured out. I couldn't find a single event for grid state changes, but It does look like they have individual events for almost everything. Here are a few that i'm using. I just set a break point in the onRegisterApi callback and dug through the gridApi object to find the events. http://plnkr.co/edit/LAMZvOkpx6jsD4CWSz04?p=preview

HTML:

<div ui-grid="gridOptions"
     ui-grid-selection 
     ui-grid-resize-columns 
     ui-grid-auto-resize 
     ui-grid-move-columns 
     ui-grid-grouping 
     ui-grid-save-state>
</div>

JS:

$scope.gridOptions = {
  data: [
    { name: 'Jack', title: 'manager', phone: '123456789', location: 'india'},
    { name: 'Suzy', title: 'developer', phone: '465189798', location: 'usa'},
    { name: 'George', title: 'secretary', phone: '82656517', location: 'japan'},
    { name: 'Michael', title: 'analyst', phone: '31321687', location: 'egypt'},
    { name: 'Sara', title: 'consultant', phone: '59595847', location: 'germany'},
    { name: 'Chris', title: 'engineer', phone: '789456123', location: 'russia'},
    { name: 'Elizabeth', title: 'clerk', phone: '963852741', location: 'china'},
    { name: 'Jane', title: 'intern', phone: '147258369', location: 'australia'},
    { name: 'Bill', title: 'accountant', phone: '951487623', location: 'brazil'}
  ],
  columnDefs: [
    { name: 'name' },
    { name: 'title' },
    { name: 'phone' },
    { name: 'location' }
  ],
  enableGridMenu: true,
  enableRowSelection: true,
  enableRowHeaderSelection: false,
  enableColumnResizing: true,
  enableColumnReordering: true,
  enableFiltering: true,
  onRegisterApi: function(gridApi) {
    // Keep a reference to the gridApi.
    $scope.gridApi = gridApi;

    // Setup events so we're notified when grid state changes.
    $scope.gridApi.colMovable.on.columnPositionChanged($scope, saveState);
    $scope.gridApi.colResizable.on.columnSizeChanged($scope, saveState);
    $scope.gridApi.grouping.on.aggregationChanged($scope, saveState);
    $scope.gridApi.grouping.on.groupingChanged($scope, saveState);
    $scope.gridApi.core.on.columnVisibilityChanged($scope, saveState);
    $scope.gridApi.core.on.filterChanged($scope, saveState);
    $scope.gridApi.core.on.sortChanged($scope, saveState);

    // Restore previously saved state.
    restoreState();
  }
};

function saveState() {
  var state = $scope.gridApi.saveState.save();
  localStorageService.set('gridState', state);
}

function restoreState() {
  $timeout(function() {
    var state = localStorageService.get('gridState');
    if (state) $scope.gridApi.saveState.restore($scope, state);
  });
}

Wrapping the restoreState function with $timeout is key, as it would not apply the restored state without adding that. — Schreinbo, Oct 15 '15 at 23:22
Can I put saveState and restoreState into service? There's $scope obj that can't be passed to the function in the service. I have lots of grid tables located at different controllers, I want to have their state saved but don't want to write the same function in each controller, how can I achieve this? — codebrew, Sep 10 '21 at 00:53

score 0 · Answer 2 · answered Sep 25 '17 at 16:56

Here's a service easy to use with localforage

angular.module('starter.controllers')
    .factory('SaveStateGridService', function SaveStateGridService($timeout, $state, $rootScope) {
        var self = {
            stateName: null,
            keyLocalStorage: null,
            listener: null,
            init: function (gridApi) {

                self.stateName = $state.$current.name;
                self.keyLocalStorage = 'grid-' + self.stateName;

                if (self.keyLocalStorage != null) {

                    // save the state before we leave
                    self.listerner = $rootScope.$on('$stateChangeStart',
                        function (event, toState, toParams, fromState, fromParams, options) {
                            if (fromState.name === self.stateName) {
                                var item = gridApi.saveState.save();
                                localforage.setItem(self.keyLocalStorage, item);
                            }
                            self.listerner();
                        }
                    );

                    //restore the state when we load if it exists
                    localforage.getItem(self.keyLocalStorage, function (err, item) {
                        if (item != null) {
                            $timeout(function () {
                                gridApi.saveState.restore(null, item);
                            }, 1);
                        }
                    });

                }

            }
        };
        return self;
    });

Controller / Component

 $scope.gridOptions.onRegisterApi = function (gridApi) {  
   SaveStateGridService.init(gridApi); 
 };

Html

 <div
      ui-grid="gridOptions"
      ui-grid-save-state></div>

score 0 · Answer 3 · answered Nov 15 '17 at 01:02

0

it's relatively easy to save the state using Angular $cookies

    function saveState() {
  var state = $scope.gridApi.saveState.save();
        $cookies.put('gridState', JSON.stringify(state));
}

Then, to restore:

$scope.restoreState = function() {
     $timeout(function() {
    var state = JSON.parse($cookies.get('gridState'));
    if (state) {
        $scope.gridApi.saveState.restore($scope, state);
}

answered Nov 15 '17 at 01:02

Klindberg

1
1

cookies doesn't work: angular.js:14791 Cookie 'gridState' possibly not set or overflowed because it was too large (9040 > 4096 bytes)! – Slava Feb 21 '18 at 21:35

Son Phuong Do · Answer 4 · 2015-10-07T08:38:22.940

-2

I couldn't find a single event for grid state changes =>

                window.onbeforeunload = function(e) {
                $scope.saveState();
            };
            $scope.restoreState();

in case you want to reset the grid

                if(localStorage.getItem("justReset")!="1")
                $scope.restoreState();
            localStorage.setItem("justReset","0")

edited Oct 07 '15 at 08:38

answered Oct 07 '15 at 08:17

Son Phuong Do

1
2

angular ui grid save and restore state

4 Answers4

Linked