CODEWITHSUNDEEP
angularjsangular-ui-grid
Kacey Ezerioha
Kacey Ezerioha

Reputation: 1198

Angular ui-grid displays the Grid Container Without Rows & Columns

I am trying out Angular ui-grid for the first time on an application but can't get it to work as expected. I created a sample JSON Data to test and it displayed the grid with all data pretty nicely. But when I decided to try it with real data from my database, it shows an empty grid content with no rows and colums.

HTML

<div ui-grid="gridOptions" ui-grid-pagination style="width: 100%; height: 400px"></div>

App.js

(function() {
    angular.module('app').controller('app.views.users.index', [
        '$scope', '$modal', 'abp.services.app.user',
        function ($scope, $modal, userService) {

            $scope.usersList = [];

            $scope.gridOptions = {
                //grid pagination
                paginationPageSizes: [10, 25, 50, 75],
                paginationPageSize: 10,
                enableSorting: true,
                //enabling filtering
                enableFiltering: true,
                //column definations
                //we can specify sorting mechnism also
                ColumnDefs: [
                    { name: 'Username', field: 'username' },
                    { name: 'Full Name', field: 'fullName' },
                    { name: 'Email Address', field: 'emailAddress' },
                    { name: 'Active' ,field: 'isActive', enableFiltering: false }
                ],
            };
            //api that is called every time
            // when data is modified on grid for sorting
            $scope.gridOptions.onRegisterApi = function (gridApi) {
                $scope.gridApi = gridApi;
            }


            function getUsers() {
                userService.getUsers({}).success(function (result) {
                    $scope.usersList = result.items;
                });
            }
            //Bind data to grid
            $scope.gridOptions.data = $scope.usersList;

        }
    ]);
})();

And yes the array object returned has data in it. I confirmed it by using a simple html table to display data and the data displayed. Please what am I missing?

Upvotes: 0

Views: 836

Answers (1)

K Scandrett
K Scandrett

Reputation: 16540

The problem is GetUsers() has an asynchronous callback, so the program continues on to the next line - $scope.gridOptions.data = $scope.usersList before the callback is executed. Hence no data is bound.

What you need to do is set gridOptions.data within the success function:

function getUsers() {
  userService.getUsers({}).success(function (result) {
    $scope.usersList = result.items;
    //Bind data to grid
    $scope.gridOptions.data = $scope.usersList;
  });
}

Upvotes: 1

Related Questions