UI Grid Angular, grid renders but doesn't display data

All we need is an easy explanation of the problem, so here it is.

What am I missing here? The grid renders with no errors, blank rows… I checked and JSON is coming in fine up to this point $scope.gridOptions.data = response['data']; It seems like its rendering the empty array and never getting to the actual data…

  app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
        $scope.myData = [];
        $scope.loading = true;

        $scope.gridOptions = {
            enableSorting: true,
            columnDefs: [
              { name: 'Id', field: 'PK_Inspection' },
              { name: 'Employee Id', field: 'EmployeeId' },
              { name: 'Employee Name', field: 'EmployeeName' },
              { name: 'Equipment Id', field: 'EquipmentId' },
              { name: 'Equipment Name', field: 'EquipmentName' },
              { name: 'Sequence', field: 'SequenceName' },
              { name: 'Details', field: 'SequenceDetails' },
              { name: 'Type', field: 'SequenceTypeName' },
              { name: 'Shift', field: 'ShiftName' },
              { name: 'Status', field: 'StatusName' }
            ],
            data:[]
        };

        $http.get('/Home/GetAllData')
            .then(function (response) {
                $scope.gridOptions.data = response['data'];
            })
            .catch(function (err) {
                $scope.loading = false;
                console.log("Error Receiving Data.");
            })
            .finally(function () {
                $scope.loading = false;
                console.log($scope.gridOptions.data);

            });

    }]);

Data being passed over to $scope.gridOptions.data:

[
    {
        "PK_Inspection": 1,
        "EmployeeId": "4433112",
        "EmployeeName": "",
        "EquipmentId": "1122113",
        "EquipmentName": "",
        "SequenceName": "UNIT 1",
        "SequenceDetails": "Bent, Dented, Broken, Torn or Deformed Parts.",
        "SequenceTypeName": "Visual Inspection",
        "ShiftName": "Day",
        "StatusName": "OK"
    },
    {
        "PK_Inspection": 2,
        "EmployeeId": "4433112",
        "EmployeeName": "",
        "EquipmentId": "1122113",
        "EquipmentName": "",
        "SequenceName": "UNIT 2",
        "SequenceDetails": "Charge, Water Levels, Vent Caps in place, Power Disconnect works.",
        "SequenceTypeName": "Visual Inspection",
        "ShiftName": "Day",
        "StatusName": "OK"
    }
]

Here’s the HTML:

<div ng-controller="MainCtrl">
    <i class="fa fa-spinner fa-spin text-center" ng-show="loading"></i>
    <div id="mainGrid" ui-grid="gridOptions" ui-grid-edit class="myGrid"></div>
</div>

Screenshot

enter image description here

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

I figured it out, and it appears that my problem was a mixture of two things.

  1. The incoming JSON was a string, I’m not 100% sure if I needed to convert to an object by using JSON.parse then pass it along to the $scope.gridOptions.data but that could’ve been the issue for the code I posted in my original question above.
  2. After more research I found a great in-depth example in the official Angular UI Grid docs. Following this technique i was able to get the data rendered correctly.

    var rowCount = 0;
    var i = 0;
    $scope.refreshData = function () {
        $scope.loading = true;
        $scope.myData = [];
    
        $http.get('/Home/GetAllData')
            .success(function (response) {
                var jsonObj = JSON.parse(response);
                rowCount = jsonObj.length;
    
                jsonObj.forEach(function (row) {
                    row.id = i; i++;
                    $scope.myData.push(row);
                });
                $scope.loading = false;
    
            })
            .error(function() {
                $scope.loading = false;
                console.log("Error retrieving data.");
            });
     };
    

In the example it makes use of a string value in gridOptions.data called myData which refers to an object on your scope to watch. So what I’m doing is just pushing each row once the GET request completes.

The full example is Here via Punklr.

Method 2

For me below code worked, once i change data i call below code

if ($scope.gridApi ) {
       $scope.$timeout(() => {
          $scope.gridApi.core.handleWindowResize();
          $scope.gridApi.grid.refresh();
       }, 10);
}

Method 3

You access the wrong JSON data from response (taken from your respone sample, array is not in ‘data’ name). Your response has no-name array with data, in your code you do:

$scope.gridOptions.data = response['data'];

It should be:

$scope.gridOptions.data = response;

Method 4

You can change the fieldId like this:

$scope.gridOptions = 
{
     enableSorting: true,
     columnDefs: [
          { name: 'Id', field: 'PK_Inspection' },
          { name: 'Employee Id', field: 'employeeId' },
          { name: 'Employee Name', field: 'employeeName' },
          { name: 'Equipment Id', field: 'equipmentId' },
          { name: 'Equipment Name', field: 'equipmentName' },
          { name: 'Sequence', field: 'sequenceName' },
          { name: 'Details', field: 'sequenceDetails' },
          { name: 'Type', field: 'sequenceTypeName' },
          { name: 'Shift', field: 'shiftName' },
          { name: 'Status', field: 'statusName' }
        ],
     data:[]
};

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply