UI grid not displaying data Angular

Question

I do have a UI grid which displays the Group Name.

$scope.gridOptions = {
            enableSorting : false,
            columnDefs: [
            { name:'GroupName' ,enableCellEdit:false}
            ],


            data: [
            { 'GroupName' : groupData}
            ]
        };

For the data in UI grid , i am passing an Object array in the form of :

groupData = [{"GroupName": "Mathematicians"}{"GroupName":"Scientist"}]

But am not getting anything in the UI grid.

Thanks in advance

<div id="Group_grid" ui-grid="gridOptions" ui-grid-edit class="groupslist"></div> — Pravin Bhasker
– Pravin Bhasker, Commented Mar 27, 2017 at 6:06
You just need to change your data assignment to data : groupData — Saurabh Tiwari
– Saurabh Tiwari, Commented Mar 27, 2017 at 6:09

Rohìt Jíndal · Accepted Answer · 2017-03-27 10:54:02Z

Some observations :

Your $scope.groupData is not having a valid JSON.

It should be $scope.groupData = [{"GroupName": "Mathematicians"},{"GroupName":"Scientist"}]

Your gridOptions object should be like this.

$scope.gridOptions = {
        data: 'groupData',
        enableSorting : false,
        columnDefs: [{ 
          field: 'GroupName',
          displayName: 'Group Name',
          name:'GroupName',
          enableCellEdit:false
         }]
        };

DEMO

var app = angular.module('uigrid', ['ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', function ($scope) {
    $scope.gridOptions = {
            data: 'groupData',
            enableSorting : false,
            columnDefs: [{ 
              field: 'GroupName',
              displayName: 'Group Name',
              name:'GroupName',
              enableCellEdit:false
             }]
            };
            
            $scope.groupData = [{"GroupName": "Mathematicians"},{"GroupName":"Scientist"}]
}]);

</style> <!-- remove this, it is just for jsfiddle --> 
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script> 
<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script> 
<style>
.grid {
  width: 500px;
  height: 250px;
}

<div ng-app="uigrid">
    <div ng-controller="MainCtrl">
        <div ui-grid="gridOptions" class="grid"></div>
    </div>
</div>

GregL · Accepted Answer · 2017-03-27 06:06:30Z

0

You are nesting one level too deep when passing the data.

Instead of (the equivalent of):

data: [ { 
    GroupName: [ 
       { GroupName: 'Mathematicians' },
       { GroupName: 'Scientist' }
    ]
} ]

you just want to pass all the data in the data property, so you get:

data: groupData

answered Mar 27, 2017 at 6:06

GregL

38.2k8 gold badges65 silver badges68 bronze badges

1 Comment

Tim Harker Over a year ago

@PravinBhasker Please mark this as the "accepted" answer so people can see at a glance that this question is resolved. Thanks and please!

Collectives™ on Stack Overflow

UI grid not displaying data Angular

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related