ui-grid dropdown editor with complex json object

I had a quite similar issue and I found a solution which worked for me: https://github.com/angular-ui/ng-grid/issues/2808 mltroutt's comment on Feb 20 - a generic filter.

based on that, in your pluncker I tried that in the following way: your product column should be look like this:

name: 'product', 
    field: 'product.id',
    cellFilter: "griddropdown:editDropdownOptionsArray:editDropdownIdLabel:editDropdownValueLabel:row.entity.product.name",
    editableCellTemplate: 'ui-grid/dropdownEditor',
    editDropdownIdLabel: 'id',
    editDropdownValueLabel: 'name',
    editDropdownOptionsArray: $scope.products

then after your controller, you have to insert a filter like this:

.filter('griddropdown', function () {
    return function (input, map, idField, valueField, initial) {
        if (typeof map !== "undefined") {
            for (var i = 0; i < map.length; i++) {
                if (map[i][idField] == input) {
                    return map[i][valueField];
                }
            }
        } else if (initial) {
            return initial;
        }
        return input;
    };
})

This can be solved by using the same product objects in your data array and the editDropdownOptionsArray array and getting the whole product structure placed into your data structure when a new one is selected. First, in the columnDef change the field to just product instead of product.name, change the editDropdownIdLabel to ref (explained in the next step), and add a cellTemplate as shown.

field: 'product',
editDropdownIdLabel: 'ref',
cellTemplate: '<div>{{row.entity.product.name}}</div>'

Second, create a self-referencing field ref inside each product so that you can return that instead of just id when a selection is made. Also, replace the product inside your data with a reference to the actual product object.

let prods = {};
angular.forEach($scope.products, (product) => {
  prods[product.id] = product;  // hash for products by id
  product.ref = product;        // self reference
});
angular.forEach(data, (person) => {
  person.product = prods[person.product.id];
});

Now, when an item is selected everything is kept in sync. Also, you are (arguably) actually using the grid and select tools as intended and not creating filters, watchers, etc., etc. to try to fix things up.

Now, if ui-grid had an option (like maybe the default) where the object in the options array would be returned instead of requiring a field of the object to be returned this would be a lot easier and would not create circular data structures. Maybe editDropdownIdLabel: '' or 'self' or null? Or, maybe somebody knows of a better way to get the reference.

Plunker here: http://plnkr.co/edit/wjtuwgvZYIxWpkenJS7a?p=preview and a simpler version based on the gender field example from @bagavathi - http://plnkr.co/edit/JJduek?p=preview

This solution does assume that your product data really is the same and can be shared but is probably a typical use case.

Try this

 $scope.gridOptions = {
            enableSorting: false,
            enableCellEditOnFocus: false,
            data: data,
            columnDefs: [
                {
                   name: 'product', 
                    field: 'productName',
                    enableCellEdit: true, 
                    editType: 'dropdown', 
                    editDropdownOptionsArray: $scope.products,
                    editableCellTemplate: 'ui-grid/dropdownEditor', 
                    editDropdownIdLabel: 'name',
                    editDropdownValueLabel: 'name'
                }
            ],
            onRegisterApi: function (gridApi) {
                //set gridApi on scope
                $scope.gridApi = gridApi;
                gridApi.edit.on.afterCellEdit($scope, function (rowEntity, colDef, newValue, oldValue) {
                    if (colDef.name === 'product') {
                        for (var i = 0; i < $scope.products.length; i++) {
                            var prod = $scope.products[i];

                            if (prod.name === newValue) {
                                rowEntity.product = prod;
                                break;
                            }
                        }
                        calculateBOption(rowEntity);
                    }                        
                });
            }

}