Angular ui grid how to show a loader

Question

I'm wondering how to show a simple loader before data was loaded. I'm using ng-grid-1.3.2 I'm googling but I didn't find any example. Bye

Answer 1

like Maxim Shoustin suggested you can use the angularjs-spinner from Jim Lavin which uses (deprecated) Response Interceptors.

I think it's explained best here : http://codingsmackdown.tv/blog/2013/04/20/using-response-interceptors-to-show-and-hide-a-loading-widget-redux/

In a nutshell, in his first solution, what you have to do for your ng-grid app is:

1) Add the loading gif to your html (for loading gif look here)

<div id="loadingWidget" class="row-fluid ui-corner-all" style="padding: 0 .7em;" loading-widget >
    <div class="loadingContent">
        <p>
            <img alt="Loading  Content" src="images/ajax-loader.gif" /> Loading
        </p>
    </div>
</div>

2) In your code as soon as you have declared your app level module add the Response Interceptors for http requests to the configuration block

var app = angular.module('myCoolGridApp', ['ngGrid']);

app.constant('_START_REQUEST_', '_START_REQUEST_');
app.constant('_END_REQUEST_', '_END_REQUEST_');
app.config(['$httpProvider', '_START_REQUEST_', '_END_REQUEST_', function ($httpProvider, _START_REQUEST_, _END_REQUEST_) {
    var $http,
     interceptor = /* see extra details on codingsmackdown.tv */
    $httpProvider.responseInterceptors.push(interceptor); 
}

3) and then add your loadingWidget directive

app.directive('loadingWidget', ['_START_REQUEST_', '_END_REQUEST_', function (_START_REQUEST_, _END_REQUEST_) {
return {
    restrict: "A",
    link: function (scope, element) {
        element.hide();
        scope.$on(_START_REQUEST_, function () {element.show();});
        scope.$on(_END_REQUEST_, function () {element.hide();});
    }
 };
}]);

See more details at codingsmackdown

Answer 2

I had the same question as you.

I find this nice tutorial about it: http://brianhann.com/ui-grid-the-easiest-customization-youll-ever-write/

He use vm.loading = true while fetching data from server and changed to false after complete.

var app = angular.module('app', ['ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$http', '$timeout', function ($http, $timeout) {
  var vm = this;

  vm.reset = reset;
  vm.noData = noData;
  vm.gridOptions = {
    columnDefs: [
      { field: 'name' },
      { field: 'age' }
    ]
  };

  reset();

  ////////////

  // Initialize our data source
  function init() {
    $http.get('data.json')
      .success(function (data) {
        vm.gridOptions.data = data;
      })
      .finally(function () {
        vm.loading = false;
      });
  }

  // Reset the data source in a timeout so we can see the loading message
  function reset() {
    vm.loading = true;

    vm.gridOptions.data = [];

    $timeout(function () {
      init();
    }, 1000);
  }

  function noData() {
    vm.gridOptions.data = [];
  }
}]);

In the HTML, he uses ng-hide to show/hide the spinner based on values of gridOptions.data and vm.loading:

<div id="grid1" ui-grid="vm.gridOptions" class="grid">
    <div class="grid-msg-overlay" ng-hide="!vm.loading">
      <div class="msg">
        <span>
          Loading Data...
          <i class="fa fa-spinner fa-spin"></i>
        </span>
      </div>
    </div>
    <div class="grid-msg-overlay" ng-hide="vm.loading || vm.gridOptions.data.length">
      <div class="msg">
        <span>No Data</span>
      </div>
    </div>
</div>

Here is the Plunker of the final version shown.

Answer 3

You have angularjs-spinner, see GitHub sources

Answer 4

I also needed a similar behavior and I came across this answer but I needed to show something inside the grid itself so here is something I put together. My idea is that I change the gridOptions on the fly and show a loader as a row inside the grid.

loaderOptions = {
        "columnDefs": [{
            "name": "",
            "field": "loading",
            "enableColumnMenu": false,
            "cellTemplate": '<div style="width:90px; margin:auto;"><span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>&nbsp;Loading...</div>'
        }],
        "data": [{
            "loading": ""
        }] 
    };