search

angular-ui / ui-grid

UI Grid: an Angular Data Grid
http://ui-grid.info
MIT License
5.39k stars 2.47k forks source link

unable to restore saved cache state ui grid custom filter drop down? #7080

Closed ankit9giri closed 4 years ago

ankit9giri commented 4 years ago

I have been trying to restore saved ui grid table from cache, but if i use ui grid custom drop down like age in below example, it does't show anything.

steps

  1. filter data by multi select ages. ( grid state will be saved in browser cache).
  2. refresh (It should show grid based on saved state, but show blank table).

state is saved without age filtering i.e. pinning or something else it works fine.

ankit9giri commented 4 years ago 
<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-animate.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-aria.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/lodash.min.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/jszip.min.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/excel-builder.dist.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.8.3/ui-grid.pinning.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.8.3/ui-grid.saveState.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.11/ngStorage.min.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
<script src="localstorage.service.js"></script> 

    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

<div ng-controller="MainCtrl">
  <div id="grid1" ui-grid="gridOptions" class="grid" ui-grid-save-state ui-grid-pinning ui-grid-selection></div>
</div>

    <script src="app.js"></script>
  </body>
</html>
``
ankit9giri commented 4 years ago 
`

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.selection','ui.grid.pinning','ui.grid.saveState', 'LocalStorageModule']);

app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', '$timeout', 'localStorageService', function ($scope, $http, uiGridConstants, $timeout, localStorageService) {

$scope.gridOptions = { enableFiltering: true, onRegisterApi: function(gridApi){ $scope.gridApi = gridApi;

            gridApi.pinning.on.columnPinned($scope, $scope.saveState);
            gridApi.core.on.filterChanged($scope, $scope.saveState);

            $scope.restoreState();

},
columnDefs: [
  { field: 'name' },
  { field: 'age',
    filterHeaderTemplate: '<div class="ui-grid-filter-container" ng-repeat="loopVariable in col.filters"><div my-custom-modal></div></div>'
  }
]

};


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

        $scope.restoreState = function() {
            console.log("java")
            $timeout(function() {
                var state = localStorageService.get('multifilterrr');
                if (state) {
                    $scope.gridApi.saveState.restore($scope, state);
                    $scope.gridApi.saveState.restore($scope, state);
                    $scope.gridApi.saveState.restore($scope, state);
                }
            });
        };

 var data = '[{"id":0,"age":30,"name":"Sandoval Mclean"},{"id":1,"name":"Nieves Mack","age":22},{"id":2,"age":20,"name":"Terry Clay"},{"id":3,"age":21,"name":"Bishop Carr"},{"id":4,"age":33,"name":"Hatfield Hudson"},{"id":5,"age":29,"name":"Madge Wilkerson"},{"id":6,"age":30,"name":"Harrell Gaines"},{"id":7,"age":23,"name":"Christensen Wall"}]'; 

 $scope.gridOptions.data = JSON.parse(data);     
}])

.controller('myCustomModalCtrl', function($scope, $compile, $timeout,localStorageService ) {

  var $elm;

$scope.showDropDownModal = function() { $scope.listOfAges = [];

$scope.col.grid.appScope.gridOptions.data.forEach( function ( row ) {
  if ( $scope.listOfAges.indexOf( row.age ) === -1 ) {
    $scope.listOfAges.push( row.age );
  }
});
    $scope.listOfAges.sort();

    $scope.gridOptions = { 
      data: [],
      enableColumnMenus: false,
      onRegisterApi: function( gridApi) {
        $scope.gridApi = gridApi;

        if ( $scope.loopVariable && $scope.loopVariable.listTerm ){
          $timeout(function() {
            $scope.loopVariable.listTerm.forEach( function( age ) {
              var entities = $scope.gridOptions.data.filter( function( row ) {
                return row.age === age;
              }); 

              if( entities.length > 0 ) {
                $scope.gridApi.selection.selectRow(entities[0]);
              }
            });
          });
        }
      } 
    };

$scope.listOfAges.forEach(function( age ) { $scope.gridOptions.data.push({age: age}); });

    var html = '<div class="modal" ng-style="{display: \'block\'}"><div class="modal-dialog"><div class="modal-content"><div class="modal-header">Filter</div><div class="modal-body"><div id="grid1" ui-grid="gridOptions" ui-grid-selection class="modalGrid"></div></div><div class="modal-footer"><button id="buttonClose" class="btn btn-primary" ng-click="close()">Filter</button></div></div></div></div>';
    $elm = angular.element(html);
    angular.element(document.body).prepend($elm);

    $compile($elm)($scope);

  };

  $scope.close = function() {
       console.log("neww scopee", $scope.gridApi);
    var ages = $scope.gridApi.selection.getSelectedRows();
    $scope.loopVariable.listTerm = [];

    ages.forEach( function( age ) {
      $scope.loopVariable.listTerm.push( age.age );
    });

    $scope.loopVariable.term = $scope.loopVariable.listTerm.join(', ');
    $scope.loopVariable.condition = new RegExp($scope.loopVariable.listTerm.join('|'));  
    if ($elm) {
      $elm.remove();
      $elm.null;
    }
  };
})

.directive('myCustomModal', function() {
  return {
    template: '<label>{{colFilter.term}}</label><button ng-click="showDropDownModal()">...</button>',
    controller: 'myCustomModalCtrl'
  };
});
`
stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

ankit9giri commented 4 years ago

I have been waiting for long for some valuable response from nice developer in the world.

stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale[bot] commented 4 years ago

This issue has been automatically closed because it has not had recent activity. If you believe that this is still an issue in the latest version, feel free to re-open it. Thank you for your contributions.