CODEWITHSUNDEEP
angularjsangular-ui-grid
Dayan
Dayan

Reputation: 8031

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

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

Upvotes: 9

Views: 28850

Answers (4)

Diwakar
Diwakar

Reputation: 1

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

Upvotes: 0

Govardhan Reddy Renati
Govardhan Reddy Renati

Reputation: 1

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:[]
};

Upvotes: -1

Dayan
Dayan

Reputation: 8031

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.

Upvotes: 6

Michał Wiatr
Michał Wiatr

Reputation: 481

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;

Upvotes: -1

Related Questions