var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit']);
app.controller('MainCtrl', ['$scope', 'uiGridConstants', function($scope, uiGridConstants) {
$scope.myData = [{
"Name": "Cox",
"Number": 41,
"Status": 1,
"Date": "10/06/1981"
}, {
"Name": "Lorraine",
"Number": 431,
"Status": 2,
"Date": "03/04/1983"
}, {
"Name": "Nancy",
"Number": 341,
"Status": 1,
"Date": "10/06/1981"
}];
// grid setup
$scope.gridStore = {
data: $scope.myData,
enableSorting: true,
enableFiltering: true,
flatEntityAccess: true,
fastWatch: true,
enableHorizontalScrollbar: 1,
enableCellSelection: true,
enableCellEditOnFocus: true,
columnDefs: [{
name: 'Number',
field: 'Number',
width: 100,
pinnedLeft: true,
enableCellEdit: false
}, {
name: 'Name',
field: 'Name',
width: 200,
pinnedLeft: true,
enableCellEdit: false
}, {
name: 'Date',
field: 'Date',
width: 100
}
]
};
this.typeLookup = function (val, arr) {
var result = arr.filter(function(v) {
return v.id === val;
})[0].type;
return result;
};
/* simulate getting JSON settings data here ... */
var jsonDef = { name: 'Status', field: 'Status', width: 150, editType: 'dropdown', editableCellTemplate: 'ui-grid/dropdownEditor', editDropdownIdLabel: 'id', editDropdownValueLabel: 'type', filter: { type: uiGridConstants.filter.SELECT, condition: uiGridConstants.filter.EXACT } };
var options = [{
id: 1,
type: 'Closed'
}, {
id: 2,
type: 'Pending'
}, {
id: 3,
type: 'Open'
}];
$scope.gridStore.columnDefs.push(jsonDef);
var idx = $scope.gridStore.columnDefs.length - 1;
$scope.gridStore.columnDefs[idx].cellTemplate = '<div class="ui-grid-cell-contents">{{ grid.appScope.Main.typeLookup(COL_FIELD,' + JSON.stringify(options) + ') }}</div>';
$scope.gridStore.columnDefs[idx].editDropdownOptionsArray = options;
$scope.gridStore.columnDefs[idx].filter.selectOptions = options.map(function(obj) {
var rObj = {'value': obj.id, 'label': obj.type};
return rObj;
});
/* end simulated JSON retrieval */
}]);
.grid {
height: 200px;
}
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl as Main">
<div id="grid1" ui-grid="gridStore" ui-grid-edit class="grid"></div>
</div>
</body>
</html>