Menu
I am using Angular Grid (ag-grid) to display data. i am trying to display nested json data in my angular grid. but i was unsuccessful.
below is the sample json data and colDefs. please suggest that why dot operator is not working unlike jqgrid, to map grid columns with nested json fields.
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', ['$scope', '$http',
function($scope, $http) {
$scope.myData = [{
"defaultColumns1": {"region":"PA"},
"defaultColumns2": {"LocationName": "loc1",
"LegalName": "legName1"
}
},
{
"defaultColumns1": {"region":"PB"},
"defaultColumns2": {"LocationName": "loc2",
"LegalName": "legName2"
}
}];
$scope.gridOptions = {
data: 'myData',
columnDefs: [{
field: 'defaultColumns1.region',
displayName: 'Region'
}, {
field: 'defaultColumns2.LocationName',
displayName: 'Location',
headerGroup: 'address'
}, {
field: 'defaultColumns2.LegalName',
displayName: 'Legal Name',
headerGroup: 'address'
}],
enableColumnResize: true,
groupHeaders : true
}
}]);
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8" />
<title>Custom Plunker</title>
<link rel="stylesheet" href="../dist/ag-grid.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.js"> </script>
<script src="http://code.angularjs.org/1.2.15/angular.js"></script>
<script src="../dist/ag-grid.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ag-grid="gridOptions"></div>
</body></html>
993
ag-grid field attribute can only refer to a property of the data row, but the valueGetter attribute allows expressions. So, while
field: 'defaultColumns1.region'
won't work, switching to
valueGetter: 'data.defaultColumns1.region'
will work fine. Sample plunker forked from yours is at http://plnkr.co/edit/8enzrjt2MQwfa8VjGaIy?p=preview
109
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
