Angular UI-Grid can not get data to display

Question

I've been reading the examples of Angular UI-Grid b/c we want to use it in a project. I'm following the docs and examples here on stack. But I can not get my data to display in my table. I've created this plunk based on others, simplified for what I'm doing. I'm not sure why the data will not display?? Any help is appreciated.

http://plnkr.co/edit/jOOePX4X1BliOXdG95pC?p=preview

index.html

<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular-touch.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.2.5/ui-grid.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.2.5/ui-grid.css" type="text/css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>

<div ng-controller="appController ">
    <div ui-grid="gridOptions" ui-grid-edit ui-grid-row-edit ui-grid-cellNav class="mygrid" ></div>
</div>


<script src="app.js"></script>

</body> 


</html>

app.js

var myApp =  angular.module("myApp", ['ngTouch','ui.grid', 'ui.grid.edit',  'ui.grid.rowEdit', 'ui.grid.resizeColumns'])

myApp.controller("appController", ['$scope', '$http', '$q', '$interval', function ($scope, $http, $q, $interval) {


$scope.columns = [
    { name: 'colA', enableCellEdit: true},
    { name: 'colB', enableCellEdit: true },
    { name: 'colC', enableCellEdit: true },
    { name: 'colD', enableCellEdit: true },
    { name: 'colE', enableCellEdit: true },
    { name: 'colF', enableCellEdit: true }
];

$scope.gridOptions = {
    enableCellEditOnFocus: false,
    enableSorting: true,
    enableGridMenu: true,
    columnDefs: $scope.columns,
    onRegisterApi: function(gridApi){
        $scope.gridApi = gridApi;
        gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);
    }
};

$scope.saveRow = function( rowEntity ) {
    // create a fake promise - normally you'd use the promise returned by $http or $resource
    console.log("record EDIT" + angular.toJson(rowEntity));
    var promise = $q.defer();
    $scope.gridApi.rowEdit.setSavePromise(rowEntity, promise.promise );

    // fake a delay of 3 seconds whilst the save occurs, return error if gender is "male"
    $interval( function() {
        if(rowEntity.test_status === 'Active') {
             console.log("accepting edit, b/c status is Active");
            promise.resolve();
        }else {
            console.log("rejecting edit, b/c status is Inactive");
            promise.reject();
        }
    }, 1000, 1);
};

  $http.get('data.json')
  .success(function(data) {
    console.log("data == " + angular.toJson(data));
    $scope.gridOptions.data = data;
  });
}]);

JSON Data

   [
    {
        "testA": "1","description": "test1","order": "1","test_status": "Active"
    },
    {
        "testB": "2","description": "test2","order": "2","test_status": "Active"
    },
    {
        "testC": "3","description": "test3","order": "3","test_status": "Active"
    },
    {
        "testD": "4","description": "test4","order": "4","test_status": "Inactive"
    },
    {
        "testE": "5","description": "test5","order": "5","test_status": "Active"
    }
  ]

CSS

.mygrid {
  width: 450px;
  height: 150px;
}

From the UI-Grid docs ... "UI-Grid is currently compatible with Angular versions ranging from 1.2.x to 1.4.x.". You're using Angular 1.5.2 — jbrown
– jbrown, Commented Jul 8, 2016 at 17:03

Matt M · Accepted Answer · 2016-07-08 16:58:53Z

2

The reason is actually, a simple one. Your column names in your columnDefs object don't match the json you're getting back from your $http call. Change

$scope.columns = [
{ name: 'colA', enableCellEdit: true},
{ name: 'colB', enableCellEdit: true },
{ name: 'colC', enableCellEdit: true },
{ name: 'colD', enableCellEdit: true },
{ name: 'colE', enableCellEdit: true },
{ name: 'colF', enableCellEdit: true }
];

to this:

$scope.columns = [
{ name: 'test', enableCellEdit: true},
{ name: 'description', enableCellEdit: true },
{ name: 'order', enableCellEdit: true },
{ name: 'test_status', enableCellEdit: true }
];

and make sure you change the value of the json data from "testA", "testB", "testC", etc to simply "test".

answered Jul 8, 2016 at 16:58

Matt M

3,7795 gold badges53 silver badges78 bronze badges

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

1 Comment

Matt M Over a year ago

@jbrown I just did. The grid does populate, but there is a css style that makes the header row really big and pushes the data to the bottom (this happens even when the data is not bound). I also tried it on a sample project using Angular 1.5.7 and that works.

Collectives™ on Stack Overflow

Angular UI-Grid can not get data to display

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related