DevExtreme AngularJs DataGrid lookup column with dataSource within same object

Question

I have data as follows :

var customers = [
    {
     "ID": 1,
     "Name":"John Mayor"
     "Company": [{"ID": 1, "Name":"Super Mart"},{"ID": 2, "Name":"Big Mart"}]
     "CompanyID":1
    }, {
     "ID": 2,
     "Name": "Rick Bard",    
     "Company": [{"ID": 1, "Name":"Oracle"},{"ID": 2, "Name":"Google"}]
     "CompanyID":2
    }
];

I would like to represent that data in dxDataGrid using AngularJs and DevExtreme. So that Company column will be lookup and selected company's ID to be bound with CompanyID.

I would like to achieve something like :

$scope.dataGridOptions = {
    dataSource: customers,
    columns: ["Name", 
              { 
                dataField: "CompanyID", 
                lookup: {
                        dataSource:customers[rowindex].Company,
                        valueExpr: 'ID', 
                        displayExpr: 'Name'
                        },
                 caption: 'Company' 
                }]
};

Answer 1

You can add an editCellTemplate to the column to achieve your goal. Something like that:

$scope.valueChangeAction = function (e) {
    this.setValue(e.value);
};
...
columns: [{ 
    dataField: "CompanyID",
    editCellTemplate: "lookupEditCell"
}]

And define the template:

<div data-options="dxTemplate:{ name:'lookupEditCell' }" dx-item-alias="cell">
    <div dx-lookup="{
        dataSource: cell.data.Company,
        valueExpr: 'ID',
        displayExpr: 'Name',
        onValueChanged: $parent.valueChangeAction
    }"></div>
</div>