lookup to display also values not in its datasource

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>DevExtreme Demo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.6/css/dx.spa.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.6/css/dx.common.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.6/css/dx.dark.css" />

    <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js@0.6.25/dist/zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>

    <script src="config.js"></script>
    <script>
        System.import('app')
            .then(function(viz) {
                System.import("devextreme/viz/themes").then(function(viz) {
                    viz.currentTheme("generic.dark");
                    viz.refreshTheme();
                });
            })
            .catch(console.error.bind(console));
    </script>

</head>

<body class="dx-viewport">
    <div class="demo-container">
        <demo-app>Loading...</demo-app>
    </div>
</body>

</html>

// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular and DevExtreme here:
// https://github.com/DevExpress/devextreme-angular/blob/master/README.md 

System.config({
    transpiler: 'ts',
    typescriptOptions: {
        module: "commonjs",
        emitDecoratorMetadata: true,
        experimentalDecorators: true
    },
    meta: {
        'typescript': {
            "exports": "ts"
        }
    },
    paths: {
        'npm:': 'https://unpkg.com/'
    },
    map: {
        'ts': 'npm:plugin-typescript@7.0.6/lib/plugin.js',
        'typescript': 'npm:typescript@2.2.2/lib/typescript.js',

        '@angular/core': 'npm:@angular/core@4.1.0/bundles/core.umd.js',
        '@angular/common': 'npm:@angular/common@4.1.0/bundles/common.umd.js',
        '@angular/compiler': 'npm:@angular/compiler@4.1.0/bundles/compiler.umd.js',
        '@angular/platform-browser': 'npm:@angular/platform-browser@4.1.0/bundles/platform-browser.umd.js',
        '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@4.1.0/bundles/platform-browser-dynamic.umd.js',
        '@angular/http': 'npm:@angular/http@4.1.0/bundles/http.umd.js',
        '@angular/router': 'npm:@angular/router@4.1.0/bundles/router.umd.js',
        '@angular/forms': 'npm:@angular/forms@4.1.0/bundles/forms.umd.js',

        'rxjs': 'npm:rxjs@5.3.1',

        'devextreme': 'npm:devextreme@17.1',
        'jquery': 'npm:jquery@3.1.1/dist/jquery.min.js',
        'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js',
        'devextreme-angular': 'npm:devextreme-angular@17.1'
    },
    packages: {
        'app': {
            main: './app.component.ts',
            defaultExtension: 'ts'
        },
        'devextreme': {
            defaultExtension: 'js'
        },
        'devextreme-angular': {
            main: 'index.js',
            defaultExtension: 'js'
        }
    }
});

<span>the Type ID in the first row contains a value that is not retrieved by the the lookup datasource.load but it can be found by the byKey</span>
<br/>
<span>No call to byKey is performed and the first row ID is empty</span>
<dx-data-grid id="gridContainer" [dataSource]="source" [columns]="columns">
</dx-data-grid>
<br/>

<span>the ID underlying the selectbox has a value that is not retrieved by the the lookup datasource.load but it can be found by the byKey</span>
<br/>
<span>A call to byKey is made and the value is correctly displayed, expanding the dropdown it's correctly not present</span>
<dx-select-box [dataSource]="selectBoxDataSource" [value]="selectBoxValue" 
                displayExpr="Description"
                valueExpr="ID"></dx-select-box>
                
<br/>
<h3>Why, in the grid scenario, the byKey method is not being called?</h3>

import { NgModule, Component, Inject, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Http, HttpModule } from '@angular/http';

import { DxDataGridModule } from 'devextreme-angular';
import { DxSelectBoxModule } from 'devextreme-angular';
import CustomStore from 'devextreme/data/custom_store';
import DataSource from 'devextreme/data/data_source';
import { Observable }     from 'rxjs/Rx';

if(!/localhost/.test(document.location.host)) {
    enableProdMode();
}

@Component({
    styleUrls: ['app/app.component.css'],
    selector: 'demo-app',
    templateUrl: 'app/app.component.html'
})
export class AppComponent {
    source: any = {};
    columns: any = {};

    selectBoxDataSource = {}
    selectBoxValue = 1;

    constructor() {
        this.columns = [
      {
        dataField: 'typeID',
        dataType: 'number',
        lookup: {dataSource: this.getLookupDataSource(), displayExpr: "Description", valueExpr: "ID"},
        showEditorAlways: true
      },
      {
        dataField: 'anotherField',
        dataType: 'string'
      }
    ];
    this.source = this.getTableDataSource(); // [{typeID:2, anotherField:'wellà'},{typeID:2, anotherField: 'olèolè'}];
    
    this.selectBoxDataSource = this.getTypeDataSource();
    }
    
     getLookupDataSource()
    {
      return this.getTypeDataSource().store(); //see https://www.devexpress.com/Support/Center/Question/Details/T331417/lookup-in-dxdatagrid-can-not-load-data-when-using-odata-as-datasource
                // on why we're not return the whole datasource
    }
    
    getTypeDataSource()
    {
       return new DataSource({
        store: new CustomStore({
          byKey: (key: number) => {
            console.log('lookup.datasource.byKey key', key)
            let found = [
                      {ID:1, Description:"Desc1"},
                      {ID:2, Description:"Desc2"},
                      {ID:3, Description:"Desc3"}
                    ].find(x => x.ID == key);
            console.log('lookup.datasource.byKey ', key ,' found', found.ID, ',', found.Description)
            return Observable.of(found).toPromise();
          },
          load: (loadOptions) => {
            console.log('lookup.datasource.load loadOptions', loadOptions)
            return Observable.of([
                      //{ID:1, Description:"Desc1"}, remove this intentionally
                      {ID:2, Description:"Desc2"},
                      {ID:3, Description:"Desc3"}
                    ])
                    .toPromise();
          }
        }),
      })
    }
    
    getTableDataSource()
    {
      return new DataSource({
        store: new CustomStore({
          load: (loadOptions) => {
            console.log('table.datasource.load loadOptions', loadOptions)
            return Observable.of([{typeID:1, anotherField:'wellà'},{typeID:2, anotherField: 'olèolè'}])
                    .toPromise();
          }
        }),
      })
      .store();
    }
}

@NgModule({
    imports: [
        BrowserModule,
        DxDataGridModule,
        DxSelectBoxModule,
        HttpModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);