Naomi
Naomi

Reputation: 718

angularJs ng-grid shows blank grid first

I have a complex form with several tabs. One tab has ngGrid on it and I am trying to apply pagination. My code is very similar to what we have on the ng-grid sample page except that it's a bit simpler:

  $scope.getPagedDataAsync = function (pageSize, page, searchText) {
              //setTimeout(function ()
              {
                  var data;
                  if ($scope.currentAccount) {
                      //var acctNameHash = $scope.currentAccount.acctNameHash;
                      //var showFinalized = $scope.showFinalized;
                      var largeLoad = $scope.currentAccount.invoices;
                      if (searchText) {
                          var ft = searchText.toLowerCase();
                          //$http.get('/api/accounts/getAccountInvoices/' + acctNameHash + '/' + showFinalized)
                          //    .success(function (largeLoad) 
                          {
                              data = largeLoad.filter(function (item) {
                                  return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
                              });
                              // Always use first page after applying a filter
                              $scope.setPagingData(data, 1, pageSize);
                          };
                      } else {
                          //$http.get('/api/accounts/getAccountInvoices/' + acctNameHash + '/' + showFinalized)
                          //    .success(function (largeLoad)
                          {
                              $scope.setPagingData(largeLoad, page, pageSize);
                          }
                          //);
                      }
                  }
              }
              //, 100);
          };

So, I load my data right away and when I don't re-load them.

My load method has this code:

accountsService.getAccount(id, isNew, $scope.showFinalized).then(function (data) {
              $scope.currentAccount = data;

              $scope.isNew = isNew;
              if (!isNew) {
                  $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);                 
              }

What I observe - the grid loads empty but shows correct number of items in the total items in the footer. As soon as I activate the Developer Tools (or deactivate them if they were already opened), the grid starts showing data properly and also correctly navigates and filters. So, some sort of initial "refresh" is missing, but I don't know how to do it.

Do you see what may be wrong or how can I do this "refresh" in code?

I commented out the code in the (!isNew) if of initial setting pages. It seems to help a bit but I seem to still have wrong behavior. Also, the grid itself looks awful in IE 11. While in Chrome I can see all columns, in IE I only see 2+ part of the 3rd column and the paging controls are in the wrong place.

Upvotes: 3

Views: 1191

Answers (0)

Related Questions