CODEWITHSUNDEEP
javascriptjqueryangularjs
Sudarshan Kalebere
Sudarshan Kalebere

Reputation: 3929

How to avoid AngularJS ui grid showing 'no-data' message while api is loading

I have angularjs ui-grid, i used below condition to check availability of data, which means if data is not there i am showing 'no data available' message. The problem is my api call is little slow because of huge data, so while this call in process no data available will show, I need to hide it in angular way initially. I cant use disply:none initially because there are so many conditions in grid filter after which that message will have to show, so every time i cant say disaply:none and display:block. Any help will be very helpful thank you.

html

<div ng-controller="MainCtrl">
      <div ui-grid="gridOptions" ui-grid-selection ui-grid-exporter class="grid">
        <div class="watermark" ng-show="!gridOptions.data.length">No data available</div>
      </div>
    </div>

Sample js call

$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
  .success(function(data) {
    data = {"data": []};
    $scope.gridOptions.data = data;
  });

Please see the demo in below plunker

Upvotes: 1

Views: 822

Answers (2)

abhit
abhit

Reputation: 981

Add a new variable in controller:

$scope.noData = false;

Change your api call as:

$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500.json')
    .success(function(data) {
      if (data.length > 0) {
        $scope.gridOptions.data = data;
      } else {
        $scope.noData = true;
      }
    });

in the view change:

 <div class="watermark" ng-show="noData">No data available</div>

Test Plunker

Upvotes: 2

lin
lin

Reputation: 18392

Easy doing by using another state handler variable e.g. $scope.loading:

<div ng-controller="MainCtrl">
  <div ui-grid="gridOptions" ui-grid-selection ui-grid-exporter class="grid">
    <div class="watermark" 
         ng-show="!gridOptions.data.length && !loading">No data available</div>
    <div class="watermark" 
         ng-show="loading">loading ...</div>
  </div>
</div>

Controller

$scope.loading = true;

$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json').success(function(data) {
    $scope.loading = false;
    data = {"data": []};
    $scope.gridOptions.data = data;
});

1) plnkr Demo 2) plnkr Demo (inlcuding a little timeout)

Upvotes: 1

Related Questions