Update Angular

Author: AlisherAmonulloev

Angular/package-lock.json

@@ -1,32 +1,40 @@
 <div class="data-grid-demo">
   <dx-data-grid [dataSource]="data" [showBorders]="true">
-    <dxo-editing mode="row" [allowUpdating]="true" [allowAdding]="true">
-    </dxo-editing>
+    <dxo-data-grid-editing
+      mode="row"
+      [allowUpdating]="true"
+      [allowAdding]="true"
+    >
+    </dxo-data-grid-editing>
 
-    <dxi-column
+    <dxi-data-grid-column
       dataField="StateID"
       caption="State"
       [setCellValue]="setStateValue"
       [cellTemplate]="arrayCellTemplate"
       editCellTemplate="stateDropDownBoxTemplate"
     >
-      <dxo-lookup [dataSource]="states" displayExpr="Name" valueExpr="ID">
-      </dxo-lookup>
-    </dxi-column>
+      <dxo-data-grid-lookup
+        [dataSource]="states"
+        displayExpr="Name"
+        valueExpr="ID"
+      >
+      </dxo-data-grid-lookup>
+    </dxi-data-grid-column>
 
-    <dxi-column
+    <dxi-data-grid-column
       dataField="CityID"
       caption="City"
       [cellTemplate]="arrayCellTemplate"
       editCellTemplate="cityDropDownBoxTemplate"
     >
-      <dxo-lookup
+      <dxo-data-grid-lookup
         [dataSource]="getFilteredCities"
         displayExpr="Name"
         valueExpr="ID"
       >
-      </dxo-lookup>
-    </dxi-column>
+      </dxo-data-grid-lookup>
+    </dxi-data-grid-column>
 
     <div *dxTemplate="let cellInfo of 'stateDropDownBoxTemplate'">
       <dx-drop-down-box
@@ -45,9 +53,9 @@
             [height]="250"
             (onInitialized)="stateDataGrid = $event.component"
           >
-            <dxi-column dataField="ID"></dxi-column>
-            <dxi-column dataField="Name"></dxi-column>
-            <dxo-selection mode="multiple"></dxo-selection>
+            <dxi-data-grid-column dataField="ID"></dxi-data-grid-column>
+            <dxi-data-grid-column dataField="Name"></dxi-data-grid-column>
+            <dxo-data-grid-selection mode="multiple"></dxo-data-grid-selection>
           </dx-data-grid>
           <dx-button
             text="Apply"
@@ -74,9 +82,9 @@
             [height]="250"
             (onInitialized)="cityDataGrid = $event.component"
           >
-            <dxi-column dataField="ID"></dxi-column>
-            <dxi-column dataField="Name"></dxi-column>
-            <dxo-selection mode="multiple"></dxo-selection>
+            <dxi-data-grid-column dataField="ID"></dxi-data-grid-column>
+            <dxi-data-grid-column dataField="Name"></dxi-data-grid-column>
+            <dxo-data-grid-selection mode="multiple"></dxo-data-grid-selection>
           </dx-data-grid>
           <dx-button
             text="Apply"

Angular/src/app/app.component.html

@@ -36,9 +36,9 @@ export class AppComponent {
     this.cities = service.getCities();
   }
 
-  getFilteredCities = (options: EditCellInfo<Employee, number>): { store: City[]; filter: [string, string, number[]] | null } => ({
+  getFilteredCities = (options: EditCellInfo<number>): { store: City[]; filter: [string, string, number[]] | null } => ({
     store: this.cities,
-    filter: options.data ? ['StateID', '=', options.data.StateID] : null,
+    filter: options.data ? ['StateID', '=', options.data['StateID']] : null,
   });
 
   getCityDropDownDs(cellInfo: DxDataGridTypes.ColumnEditCellTemplateData<Employee, number>): DataSource {

Angular/src/app/app.component.ts

@@ -1,8 +1,8 @@
 import { DataSource } from 'devextreme-angular/common/data';
 
-export interface EditCellInfo<TItem=any, TKey=any> {
-  data?: TItem;
-  key?: TKey;
+export interface EditCellInfo<TKey> {
+  data: Record<string, any>;
+  key: TKey;
 }
 
 export interface CityDropDownInfo {