Is it possible to have a select drop down inside of the AngularJS ng-grid?

Question

I have coded the following:

$scope.gridOptions = {
    data: 'myData',
    enableCellEdit: true,
    multiSelect: false,
    columnDefs: [
        { field: 'Id', displayName: 'Id' },
        { field: 'Name', displayName: 'Name', enableCellEdit: true, editableCellTemplate: cellEditableTemplate },
        { field: 'Description', displayName: 'Description', enableCellEdit: true, editableCellTemplate: cellEditableTemplate }
    ]
};

The myData actually contains four colums Id, Name, Status and Description. Where status is a simple javascript array with three types of status called myStatus.

Is it possible for me to somehow link in the data from myStatus to a field in the ng-grid so I can then select a new value from a select drop down?

Answer 1

Here is output of some experiment.

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

It seems that you can put select in cell template. And you can make use of row object to retrieve whatever you need. I used row.rowIndex to property access to the original data.

template example:

<div>
  <select ng-model="myData[ row.rowIndex ].myStatus">
    <option ng-repeat="st in statuses">{{st}}</option>
  </select>
</div>

(It would be beutiful if we can write to ogirinal data through row object. I do not know how.)