How to set datasource programatically of dxo-lookup

Question

I have dx-data-grid with 3 columns. Two of them are with dxo-lookups. the dataSource of one of them relay on the value of the other. On what event should i set the datasource of this lookup programatically What i done so far is: I catch onEditorPreparing of the dx-data-grid, and i manage to set the datasource but the problem is, when i expand the lookup it is empty, it did not refresh the UI

<dx-data-grid [dataSource]="dataSource" [allowColumnResizing]="true" columnResizingMode="widget" (onEditorPreparing)="onEditorPreparing($event)">
<dxo-editing
mode="cell"
[allowUpdating]="true"
[allowAdding]="true"
>
>

<dxi-column
    dataField="CategoryID" [allowEditing]="true" caption="Group" [width]="19+'%'" > <!-- provides actual values -->
    <dxo-lookup
        [dataSource]="specCategories"
        valueExpr="ID"
        displayExpr="CategoryName"
        (onValueChanged)="valueChanged($event)"> <!-- provides display values -->
    </dxo-lookup>
</dxi-column>
<dxi-column [width]="10+'%'" dataField="shit" >
     <dxo-lookup  [dataSource]="specValues"  valueExpr="ID"
     displayExpr="Value" >
         
     </dxo-lookup>
</dxi-column>
<dxi-column dataField = "Value" caption="Text" [width]="80+'%'" ></dxi-column>

  onEditorPreparing(e) {
    if (e.parentType === "dataRow" && e.dataField === "shit") {

        this.orderLineSpecService.getspecCategoriesValues(282).subscribe(
            (values) => {
                console.log(e.lookup.dataSource); <-- First is empty
                e.lookup.dataSource = values; <-- I set it
                console.log(e.lookup.dataSource); <-- it is set, but when i expand the look up is still empty
            });

    }

}