DataGrid Demos - Update Focused Row to replace OData (#31742)

Author: artem-kurchenko

apps/demos/Demos/DataGrid/FocusedRow/Angular/app/app.component.html

@@ -1,16 +1,25 @@
 <dx-data-grid
   id="gridContainer"
   [dataSource]="dataSource"
-  [columns]="columns"
   [showBorders]="true"
   [focusedRowEnabled]="true"
   [(focusedRowKey)]="focusedRowKey"
   [(autoNavigateToFocusedRow)]="autoNavigateToFocusedRow"
   (onFocusedRowChanging)="onFocusedRowChanging($event)"
   (onFocusedRowChanged)="onFocusedRowChanged($event)"
 >
-  <dxo-paging [pageSize]="10"> </dxo-paging>
-  <dxo-pager [visible]="true"></dxo-pager>
+  <dxo-data-grid-paging [pageSize]="10"> </dxo-data-grid-paging>
+  <dxo-data-grid-pager [visible]="true"></dxo-data-grid-pager>
+  <dxi-data-grid-column
+    *ngFor="let column of columns"
+    [dataField]="column?.dataField"
+    [width]="column?.width"
+    [dataType]="column?.dataType"
+    [caption]="column?.caption"
+    [cssClass]="column?.cssClass"
+    [allowSorting]="column?.allowSorting"
+  >
+  </dxi-data-grid-column>
 </dx-data-grid>
 
 <div class="task-info">

apps/demos/Demos/DataGrid/FocusedRow/Angular/app/app.component.ts

@@ -6,9 +6,10 @@ import {
 } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { DxNumberBoxComponent, DxNumberBoxModule, DxCheckBoxModule } from 'devextreme-angular';
-import { DataSourceOptions } from 'devextreme-angular/common/data';
+import { DataSource, ArrayStore } from 'devextreme-angular/common/data';
 
 import { DxDataGridComponent, DxDataGridModule, DxDataGridTypes } from 'devextreme-angular/ui/data-grid';
+import { type Task, Service } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -24,15 +25,14 @@ if (window && window.config?.packageConfigPaths) {
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],
+  providers: [Service],
   preserveWhitespaces: true,
 })
 export class AppComponent {
   @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent;
 
   @ViewChild(DxNumberBoxComponent, { static: false }) numberBox: DxNumberBoxComponent;
 
-  isReady: boolean;
-
   taskSubject: string;
 
   taskDetailsHtml: SafeHtml;
@@ -45,24 +45,7 @@ export class AppComponent {
 
   autoNavigateToFocusedRow = true;
 
-  dataSource: DataSourceOptions = {
-    store: {
-      type: 'odata',
-      version: 2,
-      key: 'Task_ID',
-      url: 'https://js.devexpress.com/Demos/DevAV/odata/Tasks',
-    },
-    expand: 'ResponsibleEmployee',
-    select: [
-      'Task_ID',
-      'Task_Subject',
-      'Task_Start_Date',
-      'Task_Status',
-      'Task_Description',
-      'Task_Completion',
-      'ResponsibleEmployee/Employee_Full_Name',
-    ],
-  };
+  dataSource: DataSource;
 
   columns: DxDataGridTypes.Column[] = [
     {
@@ -87,9 +70,16 @@ export class AppComponent {
     },
   ];
 
-  constructor(private sanitizer: DomSanitizer) {}
+  constructor(private sanitizer: DomSanitizer, service: Service) {
+    this.dataSource = new DataSource({
+      store: new ArrayStore({
+        data: service.getTasks(),
+        key: 'Task_ID',
+      }),
+    });
+  }
 
-  onFocusedRowChanging(e) {
+  onFocusedRowChanging(e: DxDataGridTypes.FocusedRowChangingEvent) {
     const rowsCount = e.component.getVisibleRows().length;
     const pageCount = e.component.pageCount();
     const pageIndex = e.component.pageIndex();
@@ -108,11 +98,12 @@ export class AppComponent {
     }
   }
 
-  onFocusedRowChanged({ row: { data } }: DxDataGridTypes.FocusedRowChangedEvent) {
-    this.taskSubject = data.Task_Subject;
-    this.taskDetailsHtml = this.sanitizer.bypassSecurityTrustHtml(data.Task_Description);
-    this.taskStatus = data.Task_Status;
-    this.taskProgress = data.Task_Completion ? `${data.Task_Completion}%` : '';
+  onFocusedRowChanged(e: DxDataGridTypes.FocusedRowChangedEvent<Task, number>) {
+    const data = e.row?.data;
+    this.taskSubject = data?.Task_Subject ?? '';
+    this.taskDetailsHtml = this.sanitizer.bypassSecurityTrustHtml(data?.Task_Description ?? '');
+    this.taskStatus = data?.Task_Status ?? '';
+    this.taskProgress = data?.Task_Completion ? `${data?.Task_Completion}%` : '';
   }
 }