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

Question

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?

K Scandrett · Accepted Answer · 2017-02-28 01:42:14Z

1

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;
  });
}

answered Feb 28, 2017 at 1:42

K Scandrett

16.6k4 gold badges43 silver badges69 bronze badges

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

3 Comments

Kacey Ezerioha Over a year ago

Thanks. It worked. But another problem is, it displays all the columns in the table and doesn't use the columns specified in the js code. How can I fix that?

K Scandrett Over a year ago

That's because ColumnDefs needs to be columnDefs. This may help as a reference stackoverflow.com/a/42397210/1544886

Kacey Ezerioha Over a year ago

Cheers mate! I'm in your debt.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related