How to display Loading symbol inside on ui-grid before data render?

Question

This is my code

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

app.controller('MainCtrl', ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) {
  $scope.gridOptions = {
    enableSorting: true,
    columnDefs: [
      { field: 'name' },
      { field: 'gender' },
      { field: 'company', enableSorting: false }
    ]
  };
  
  $timeout(function () {
    $http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
      .success(function(data) {
        $scope.gridOptions.data = data;
      });
  }, 2000);
}])

.directive('gridLoading', function () {
  return {
    restrict: 'C',
    require: '^uiGrid',
    link: function ($scope, $elm, $attrs, uiGridCtrl) {
      $scope.grid = uiGridCtrl.grid;
    }
  }
});

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <link data-require="font-awesome@*" data-semver="4.1.0" rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.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/release/ui-grid-unstable.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css" />
    <link rel="stylesheet" href="main.css" type="text/css" />
  </head>

  <body>
    <div ng-controller="MainCtrl">
  Click on a column header to sort by that column. (The third column has sorting disabled.)
                    <br />
      <br />
      <div ui-grid="gridOptions" class="grid">
        <div class="well grid-loading" ng-show="grid.rows.length == 0">
          <i class="fa fa-spin fa-spinner"></i>
          <strong>Data Loading...</strong>
        </div>
      </div>
    </div>
    <script src="app.js"></script>
  </body>

</html>

In the above code i got loading symbol on ui-grid before data rendering on grid, but the loading symbol appear on down of ui-grid.so i want to display loading symbol inside on ui-grid before data rendering on grid. This is my plunker http://plnkr.co/edit/6ED6fPdGGwLNb1Zqubls?p=preview

FOR · Accepted Answer · 2016-01-06 16:29:43Z

2

One quick fix that may do what you need is purely a CSS change. I added top: 0px; left: 0px; to the styles for the loading progress container, and it seems to cover the grid as you wish. Here's my plunker.

answered Jan 6, 2016 at 16:29

FOR

4,3682 gold badges28 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to display Loading symbol inside on ui-grid before data render?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related