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

Question

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

abhit · Accepted Answer · 2017-11-23 11:11:50Z

2

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

edited Nov 23, 2017 at 11:11

answered Nov 23, 2017 at 11:06

abhit

9793 gold badges17 silver badges41 bronze badges

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

4 Comments

Sudarshan Kalebere Over a year ago

there are filters in grid when they are selected sometimes grid.data.length will be 0 too, in that case it will not work

abhit Over a year ago

did you mean the hide column option in your filter?

Sudarshan Kalebere Over a year ago

Yeah i have filter to select for each column of table, when users clicks any option from column then if data is not there i have to show message

Sudarshan Kalebere Over a year ago

and by the way your code still shows no data available while loading please try stop and run in plunker you will see.

lin · Accepted Answer · 2017-11-23 11:05:47Z

1

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)

edited Nov 23, 2017 at 11:05

answered Nov 23, 2017 at 11:00

lin

18.5k4 gold badges66 silver badges88 bronze badges

2 Comments

Sudarshan Kalebere Over a year ago

Hi thank you for reply but this is also not working, both the messages are getting intersected and on filter from column if i apply this will never work.

lin Over a year ago

There is no intersection (plnkr.co/edit/D0pUZiCEoKiNwhlPwEiK?p=preview) and there is also no filter inside your plnkr. I don't get ya. It's working like a charm. Please create a plnkr to reproduce your problems.

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Controller

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Controller

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related