Save the state of ag-grid in angularjs

Question

Hi when i click on a button my ag-grid loads the data from database.Next time how to see the data in ag-grid without clicking on a button.Basically i want to save and restore the state of ag-grid to avoid the button click every time in order to load the data in ag-grid.

agGrid.initialiseAgGridWithAngular1(angular);

var module = angular.module("example", ["agGrid"]);

module.controller("exampleCtrl", function($scope, $http) {

var columnDefs = [
    {headerName: "Athlete", field: "athlete", width: 150, cellRenderer: athleteCellRendererFunc},
    {headerName: "Age", field: "age", width: 90, cellRenderer: ageCellRendererFunc},
    {headerName: "Country", field: "country", width: 120, cellRenderer: countryCellRendererFunc},
    {headerName: "Year", field: "year", width: 90},
    {headerName: "Date", field: "date", width: 110},
    {headerName: "Sport", field: "sport", width: 110},
    {headerName: "Gold", field: "gold", width: 100},
    {headerName: "Silver", field: "silver", width: 100},
    {headerName: "Bronze", field: "bronze", width: 100},
    {headerName: "Total", field: "total", width: 100}
];

$scope.gridOptions = {
    columnDefs: columnDefs,
    rowData: null,
    angularCompileRows: true
};

function ageClicked(age) {
    window.alert("Age clicked: " + age);
}

function athleteCellRendererFunc() {
    return '<span ng-bind="data.athlete"></span>';
}

function ageCellRendererFunc(params) {
    params.$scope.ageClicked = ageClicked;
    return '<button ng-click="ageClicked(data.age)" ng-bind="data.age"></button>';
}

function countryCellRendererFunc(params) {
    return '<country name="'+params.value+'"></country>';
}

$scope.getData = function(){
  //console.log("hello");
  $http.get("https://raw.githubusercontent.com/ag-grid/ag-grid-docs/master/src/olympicWinners.json")
    .then(function(res){
        $scope.gridOptions.api.setRowData(res.data);
    });
}

});

module.directive('country', function () {

var FLAG_CODES = {
    'Ireland': 'ie',
    'United States': 'us',
    'Russia': 'ru',
    'Australia': 'au',
    'Canada': 'ca',
    'Norway': 'no',
    'China': 'cn',
    'Zimbabwe': 'zw',
    'Netherlands': 'nl',
    'South Korea': 'kr',
    'Croatia': 'hr',
    'France': 'fr'
};

var flagHtml = '<img ng-show="flagCode" class="flag" border="0" width="20" height="15" src="https://flags.fmcdn.net/data/flags/mini/{{flagCode}}.png" />';
var nameHtml = '<span ng-bind="countryName" />';

return {
    scope: true,
    template: flagHtml + ' ' + nameHtml,
    link: function(scope, element, attrs) {
        var countryName = attrs.name;
        scope.countryName = countryName;
        scope.flagCode = FLAG_CODES[countryName];
    }
};

});

Below is the plunker code link: https://plnkr.co/edit/PKTiFpd9WM1UeELT72ht?p=preview`

Alexander Zbinden Alexander Zbinden · Accepted Answer · 2018-04-27T08:31:40

Are you trying to retrieve the data as soon as the grid has been initialized? If so, you can use the onGridReady event:

// create and inject a factory, e.g. "gridStateFactory"

$scope.gridOptions = {
    columnDefs: columnDefs,
    rowData: null,
    angularCompileRows: true,
    onGridReady: function() {          
      if (gridStateFactory.isInitialized) {
        $scope.getData();
      }
    };
$scope.getData = function(){
  //console.log("hello");
  $http.get("https://raw.githubusercontent.com/ag-grid/ag-grid-

docs/master/src/olympicWinners.json")
        .then(function(res){
            gridStateFactory.setInitialized();
            $scope.gridOptions.api.setRowData(res.data);
        });
    }

Save the state of ag-grid in angularjs

1 Answers