Angularjs ui-grid row rest call

Question

I have tried making a rest call with $http via die ui-grid(v3.0.0-rc.20-8199eb5) field function approach. See example below.

$scope.gridOptions = {
        enableSorting: true,
        columnDefs: [
          { name:'name', field: 'name' },
          { name:'getDepartment', field: 'getDepartment()', enableCellEdit:false}
        ],
        data : [      {
                           "name": "Rex",
                           "getDepartment" : function() {return deparmentService.findByName(this.name);}
                       }
                   ]
      };

}]);

The browser goes into a infinite loop. The departmentService $http call is dependent on a name parameter begin passed to it.

How can I make a $http ajax call from within the ui-grid when it is loading rows?

PaulL · Accepted Answer · 2015-04-16 10:47:01Z

1

Why would you not get the data, and then populate all the departments, and then give it to the grid?

Or, get the data, give it to the grid, and in the background, run an iterator that gets all the departments and fills them into the data.

You don't really want the grid calling an http service every time it renders a row - it re-renders the rows every time someone scrolls. (not quite, but on lots of events, and some scrolls)

So you'd end up with:

$scope.getDepartment = function(name) {
  return departmentService.findByName(name);
};

$scope.data = [
  name: 'Rex'
];

$scope.gridOptions = {
  enableSorting: true,
  columnDefs: [
    { name:'name', field: 'name' },
    { name:'getDepartment', field: 'getDepartment()', enableCellEdit:false}
  ],
  data: 'data'
};

// I'm imagining here that getDepartment is expensive
// so you may want to do this in batches or something
// but this illustrates that it's out of band - after the grid renders
$timeout( function() {
  $scope.data.forEach(function(row) {
    row.getDepartment = $scope.getDepartment(row.name);
  });
}, 100);

edited Apr 16, 2015 at 10:47

answered Apr 16, 2015 at 10:38

PaulL

6,6503 gold badges37 silver badges39 bronze badges

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

2 Comments

Rentius2407 Over a year ago

Hi PaulL thank you for the explanation. Just one thing, when doing the $timeout function call is it the iteration that you mentioned and will it kick off automatically when it reaches the $timeout line or must I call it from somewhere?

PaulL Over a year ago

Yes, the $timeout has the iteration inside it (the forEach). It will kick off automatically 100ms after the controller inits. You could adjust that up or down. The main issue is if you have hundreds of rows, and if the call is slow, this will potentially block your browser a bit whilst it runs, depending on a few things. So if you had a lot of rows you might want to kick off the first 20, wait 1s, then kick of 20 more etc. It'd be better to change your server to give you all this data in one go, but I'm assuming you can't do that.

suresh G · Accepted Answer · 2015-04-16 09:46:54Z

0

Try to use service in a separate file. This will help you to organize your code.

app.factory('yService', ['$http', 'sessionService', function ($http, sessionService) {
    return {
        GetNames: function () {
            return $http({
                method: "get",
                url: "/api/Common/GetNames"
             });
        }
    }
}]);

From your controller, Call like the following,

    yService.GetNames().success(function (data) {
                // copy your data to one object
//$scope.departments
            }).
                error(function (data) {

                });

On ng-init call the above yservice.GetNames and do like following,

$scope.departments={};
    $scope.gridOptions = {
            enableSorting: true,
            columnDefs: [
              { name:'name', field: 'name' },
              { name:'getDepartment', field: 'getDepartment()', enableCellEdit:false}
            ],
            data : [      {
                               "name": "Rex",
                               "getDepartment" : $scope.departments;}
                           }
                       ]
          };

    }]);

answered Apr 16, 2015 at 9:46

suresh G

11 bronze badge

1 Comment

Rentius2407 Over a year ago

don't think you understand my question. I have updated the example please see above. I'm making a call to the departmentService with the current name which is 'Rex'. When the ui-grid loads it needs to make a separate call for each row name to the departmentService. So I do not need the names because it is already pre-loaded as ui-grid data.

Collectives™ on Stack Overflow

Angularjs ui-grid row rest call

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related