1

I have one grid and according to some conditions, I have to change the data which comes from the back-end.The first time I load data from the back the grid works fine. When I start switching data the grid displays new data well but stays frozen for a while. I notice that this time is random and is often about 3 seconds or plus.

I tried to assign data to the grid through different ways but the result is the same:

1) 

$scope.gridOptions = {
      //some options,
      data: $scope.myData
}

And then

Demande.query({lb: condition}, function (result) { $timeout(function () {$scope.myData = result;},0);// I also try without $timeout }

2) I try to assign the data directly to the grid

Demande.query({lb: condition}, function (result) {
    $timeout(function () {$scope.gridOptions.data = result;},0);
}

3) I combine the above approachs with

a) $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.ROW)

b) $scope.gridApi.core.refreshRows()

but the problem persists. I am using angular-ui-grid 4.0.1

Any idea will be appreciated.

Tim Harker
  • 2,367
  • 1
  • 15
  • 28
Trymous
  • 39
  • 5
  • The timeout makes no sense at all. What does freeze means? The browser doesnt react / browser prozess is freezing? – lin Mar 27 '17 at 08:33
  • I added the $timeout as suggested here: https://github.com/angular-ui/ui-grid/issues/2674. By freeze I mean that the grid and other UI widgets (buttons, select,...) of my app don't react. Thanks – Trymous Mar 27 '17 at 09:59
  • How many columns do you have in the grid and how many rows are we talking about here – Marcus Höglund Mar 27 '17 at 13:25
  • I have about 80 columns and a various number of rows according to the condition (that I use to fetch data from the back). But the problem appears even if I just have 3 rows. – Trymous Mar 27 '17 at 15:14

1 Answers1

1

Another option:

4) $scope.gridOptions.data = angular.copy($scope.myData);

Should give the grid the little time that it needs to breath!

Update:

angular.module('app', ['ui.grid'])
  .controller('MainCtrl', ['$scope', function($scope) {
    $scope.gridOptions = {
      columnDefs: []
    }
    for (var i = 0; i < 80; i++) {
      $scope.gridOptions.columnDefs.push({
        name: 'C' + (i + 1),
        enableColumnMenu: false
      });
    }
    var dataLoadCounter = 1;
    $scope.switchData = function() {
      $scope.gridOptions.data = [];
      for (var i = 0; i < 1000; i++) {
        $scope.gridOptions.data.push({});
        for (var j = 0; j < 80; j++) {
          $scope.gridOptions.data[i]['C' + (j + 1)] = 'D' + dataLoadCounter + (j + 1);
        }
      }
      dataLoadCounter++;
    }
    $scope.switchData();
  }]);
div[ui-grid] {
  width: 4500px;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.min.css" />
<div ng-app="app" ng-controller="MainCtrl">
  <button ng-click="switchData()">Switch Data</button>
  <div ui-grid="gridOptions">
  </div>
</div>
Tim Harker
  • 2,367
  • 1
  • 15
  • 28
  • Thanks Tim for your response. I try your approach but unfortunately it doesn't work. For information, the problem also appears when I try to insert new rows in the grid when the user click a button. – Trymous Mar 29 '17 at 13:24
  • 80 columns, 1 row, switching data... you see the grid lag, right? – Tim Harker Mar 29 '17 at 14:42
  • With 1 row and 80 columns, the grid lags but during a shorter and acceptable time. This actually goes almost without being noticed. – Trymous Mar 29 '17 at 15:14
  • I tired to create a demo so we could see, want me to increase row count also? Since it's mainly noticeable with a larger record set? – Tim Harker Mar 29 '17 at 15:58
  • Ok, I will give it a try and come back to you as soon as possible. Thanks a lot for your time. – Trymous Mar 29 '17 at 16:59
  • Thanks Tim. I try your solution and it helps me improve the time for displaying data in the grid. Nevertheless the grid is always frozen for a while. I use the chrome dev tools to run a cpu profile and It appears that this is angular digest which takes time. I don't know why at the moment but I continue to search. – Trymous Mar 31 '17 at 09:42
  • Not in front of a computer right now, but look at using one way data binding rather than two way data binding depending on your grid needs (editable?) as this can really increase performance. If one was not using ui-grid you'd use the `::` syntax in front of the variable - try searching the internet on it. – Tim Harker Mar 31 '17 at 09:51
  • Something along these lines, perhaps - [GridOneBind](http://ui-grid.info/docs/#/api/ui.grid.directive:uiGridOneBind). I'll try implementing in my example. – Tim Harker Mar 31 '17 at 13:27
  • One way data binding would be the best but my grid is editable. Here are all the ui-grid plugin I use for the grid:
    – Trymous Mar 31 '17 at 13:47
  • I try to reconfigure my grid step by step (by adding plugins one by one) from your solution. It seems that the problem comes from ui-grid-cellnav. Is this the same for you? I really appreciate your help Tim – Trymous Mar 31 '17 at 15:34