Demo DataGrid ExcelJSExportMultipleGrids remove odata by flagmanAndrew · Pull Request #31567 · DevExpress/DevExtreme

flagmanAndrew · 2025-11-03T16:08:44Z

Replace OData with local arrays in the ExcelJSExportMultipleGrids demo

Raushen · 2025-11-03T16:16:41Z

 import { Workbook } from 'devextreme-exceljs-fork';
 import { type DataGridCell as ExсelDataGridCell, exportDataGrid } from 'devextreme-vue/common/export/excel';
 import { type DataSourceOptions } from 'devextreme-vue/common/data';
+import { Product, products } from './data.ts';


Do we need Product here?

no, we don't

Raushen · 2025-11-03T16:16:59Z

 import { Workbook } from 'devextreme-exceljs-fork';
 import { saveAs } from 'file-saver-es';
 import { exportDataGrid } from 'devextreme-react/common/export/excel';
+import { Product, products } from './data.ts';


Do we need Product here?

no, we don't

Copilot

Pull Request Overview

This PR refactors the ExcelJSExportMultipleGrids demo across all framework implementations (jQuery, Angular, React, ReactJs, and Vue) to replace remote OData service calls with local static data arrays. This improves demo performance, reduces external dependencies, and ensures consistent offline functionality.

Key changes:

Replaced OData store configuration with local products data arrays
Added keyExpr property to jQuery DataGrid configurations
Created new data.js/data.ts files containing the Product class and products array for each framework
Imported DataSourceOptions type for TypeScript implementations

Reviewed Changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
apps/demos/Demos/DataGrid/ExcelJSExportMultipleGrids/jQuery/index.js	Replaced OData store with local products array and added keyExpr property
apps/demos/Demos/DataGrid/ExcelJSExportMultipleGrids/jQuery/index.html	Added script reference for data.js file
apps/demos/Demos/DataGrid/ExcelJSExportMultipleGrids/jQuery/data.js	New file containing static products array with 9 product records
apps/demos/Demos/DataGrid/ExcelJSExportMultipleGrids/Vue/data.ts	New file with Product class and typed products array for Vue
apps/demos/Demos/DataGrid/ExcelJSExportMultipleGrids/Vue/App.vue	Updated to import and use local products data instead of OData
apps/demos/Demos/DataGrid/ExcelJSExportMultipleGrids/ReactJs/data.js	New file with Product class (empty) and products array for ReactJs
apps/demos/Demos/DataGrid/ExcelJSExportMultipleGrids/ReactJs/App.js	Replaced OData store with local products data, removed unused import
apps/demos/Demos/DataGrid/ExcelJSExportMultipleGrids/React/data.ts	New file with Product class and typed products array for React TypeScript
apps/demos/Demos/DataGrid/ExcelJSExportMultipleGrids/React/App.tsx	Updated to import and use local products data, added DataSourceOptions typing
apps/demos/Demos/DataGrid/ExcelJSExportMultipleGrids/Angular/app/app.service.ts	New service file with Product class and products array, following Angular patterns
apps/demos/Demos/DataGrid/ExcelJSExportMultipleGrids/Angular/app/app.component.ts	Refactored to use Service dependency injection for data access

Copilot · 2025-11-03T16:18:57Z

@@ -0,0 +1,75 @@
+export class Product {}


The empty Product class serves no purpose and should be removed. Unlike the TypeScript versions where it defines the type structure, in JavaScript this empty class export is unused and unnecessary.

Suggested change

export class Product {}

Copilot · 2025-11-03T16:18:58Z

 import Button from 'devextreme-react/button';
 import TabPanel, { Item } from 'devextreme-react/tab-panel';
 import DataGrid, { Column, DataGridRef } from 'devextreme-react/data-grid';
+import { DataSourceOptions } from 'devextreme-angular/common/data';


Incorrect import path: importing from 'devextreme-angular/common/data' in a React application. This should be 'devextreme-react/common/data' or 'devextreme/common/data' to match the framework being used.

Suggested change

import { DataSourceOptions } from 'devextreme-angular/common/data';

import { DataSourceOptions } from 'devextreme/common/data';

Copilot · 2025-11-03T16:18:58Z

  select: ['Product_ID', 'Product_Name', 'Product_Sale_Price', 'Product_Retail_Price'],
  filter: ['Product_ID', '<', 10],
 };
+


Inconsistent whitespace: there's trailing whitespace on line 102. This should be removed to maintain code cleanliness.

Suggested change

Copilot · 2025-11-03T16:18:59Z

-    url: 'https://js.devexpress.com/Demos/DevAV/odata/Products',
-    key: 'Product_ID',
-  },
+


Inconsistent whitespace: there's trailing whitespace on line 16. This should be removed to maintain code cleanliness.

Suggested change

Raushen · 2025-11-03T16:20:21Z

-    url: 'https://js.devexpress.com/Demos/DevAV/odata/Products',
-    key: 'Product_ID',
-  },
+


Here there is a trailing space

Raushen · 2025-11-03T16:22:36Z

+    Product_Consumer_Rating: 4,
+    Product_Category: "Televisions",
+  },
+];


Let's add empty line

Raushen · 2025-11-03T16:23:04Z

+    Product_Consumer_Rating: 4,
+    Product_Category: "Televisions",
+  },
+];


Let's add empty line

Raushen · 2025-11-03T16:26:08Z

+  },
+];
+
+


Extra line here

Raushen · 2025-11-03T16:28:14Z

  select: ['Product_ID', 'Product_Name', 'Product_Sale_Price', 'Product_Retail_Price'],
  filter: ['Product_ID', '<', 10],
 };
+


Extra line/trailing space here

Copilot

Pull Request Overview

Copilot reviewed 11 out of 11 changed files in this pull request and generated 2 comments.

Comments suppressed due to low confidence (1)

apps/demos/Demos/DataGrid/ExcelJSExportMultipleGrids/Vue/App.vue:1

[nitpick] Trailing zeros after the decimal point (e.g., 220.00, 330.00) are unnecessary in JavaScript/TypeScript numeric literals and will be stripped by the interpreter. For consistency with other data files and standard practices, these should be written as 220.0 or just 220. This pattern appears throughout all data files in the PR.

<template>

Copilot · 2025-11-04T14:34:10Z

@@ -0,0 +1,75 @@
+export class Product {}


The Product class is exported but has no properties or implementation. It should either be removed as unused or properly implemented with properties matching the product data structure (Product_ID, Product_Name, etc.). Since TypeScript versions define the class properly, this appears to be unnecessarily exported.

Suggested change

export class Product {}

Copilot · 2025-11-04T14:34:11Z

+  Product_ID: number;
+
+  Product_Name: string;
+
+  Product_Sale_Price: number;
+
+  Product_Retail_Price: number;
+
+  Product_Consumer_Rating: number;
+
+  Product_Category: string;


TypeScript class properties should use the non-null assertion operator (!) or be marked as optional since they are not initialized in the constructor. The Vue version correctly uses ! for all properties, but this React TypeScript version is missing those assertions.

Suggested change

Product_ID: number;

Product_Name: string;

Product_Sale_Price: number;

Product_Retail_Price: number;

Product_Consumer_Rating: number;

Product_Category: string;

Product_ID!: number;

Product_Name!: string;

Product_Sale_Price!: number;

Product_Retail_Price!: number;

Product_Consumer_Rating!: number;

Product_Category!: string;

Copilot

Pull Request Overview

Copilot reviewed 11 out of 11 changed files in this pull request and generated no new comments.

Raushen · 2025-11-06T14:54:09Z

 import Button from 'devextreme-react/button';
 import TabPanel, { Item } from 'devextreme-react/tab-panel';
 import DataGrid, { Column, DataGridRef } from 'devextreme-react/data-grid';
+import { DataSourceOptions } from 'devextreme/common/data';


It seem should be
import { DataSourceOptions } from 'devextreme-react/common/data';

Raushen · 2025-11-06T14:57:22Z

@@ -0,0 +1,88 @@
+export class Product {
+  Product_ID!: number;


We do not use ! in types

Copilot

Pull Request Overview

Copilot reviewed 11 out of 11 changed files in this pull request and generated 9 comments.

Copilot · 2025-11-07T16:01:55Z

 const ratingDataSource = {
-  store: {
-    type: 'odata',
-    version: 2,
-    url: 'https://js.devexpress.com/Demos/DevAV/odata/Products',
-    key: 'Product_ID',
-  },
+  store: products,
  select: ['Product_ID', 'Product_Name', 'Product_Consumer_Rating', 'Product_Category'],
  filter: ['Product_ID', '<', 10],
 };


Potential bug: Using a raw array directly as the store value when the DataSource also uses select and filter operations may not work correctly. DevExtreme DataSource's select and filter are designed to work with store objects (like ArrayStore), not raw arrays. The jQuery implementation correctly wraps the array in an ArrayStore. Consider wrapping the products array in an ArrayStore with a key property:

import ArrayStore from 'devextreme/data/array_store'; const ratingDataSource = { store: new ArrayStore({ data: products, key: 'Product_ID', }), select: ['Product_ID', 'Product_Name', 'Product_Consumer_Rating', 'Product_Category'], filter: ['Product_ID', '<', 10], };

Copilot · 2025-11-07T16:01:55Z

+const priceDataSource: DataSourceOptions = {
+  store: products,
  select: ['Product_ID', 'Product_Name', 'Product_Sale_Price', 'Product_Retail_Price'],
  filter: ['Product_ID', '<', 10],
 };


Potential bug: Using a raw array directly as the store value when the DataSource also uses select and filter operations may not work correctly. DevExtreme DataSource's select and filter are designed to work with store objects (like ArrayStore), not raw arrays. The jQuery implementation correctly wraps the array in an ArrayStore. Consider wrapping the products array in an ArrayStore with a key property:

import ArrayStore from 'devextreme/data/array_store'; const priceDataSource: DataSourceOptions = { store: new ArrayStore({ data: products, key: 'Product_ID', }), select: ['Product_ID', 'Product_Name', 'Product_Sale_Price', 'Product_Retail_Price'], filter: ['Product_ID', '<', 10], };

Copilot · 2025-11-07T16:01:56Z

+const ratingDataSource: DataSourceOptions = {
+  store: products,
  select: ['Product_ID', 'Product_Name', 'Product_Consumer_Rating', 'Product_Category'],
  filter: ['Product_ID', '<', 10],
 };


Potential bug: Using a raw array directly as the store value when the DataSource also uses select and filter operations may not work correctly. DevExtreme DataSource's select and filter are designed to work with store objects (like ArrayStore), not raw arrays. The jQuery implementation correctly wraps the array in an ArrayStore. Consider wrapping the products array in an ArrayStore with a key property:

import ArrayStore from 'devextreme/data/array_store'; const ratingDataSource: DataSourceOptions = { store: new ArrayStore({ data: products, key: 'Product_ID', }), select: ['Product_ID', 'Product_Name', 'Product_Consumer_Rating', 'Product_Category'], filter: ['Product_ID', '<', 10], };

Copilot · 2025-11-07T16:01:56Z

 const ratingDataSource: DataSourceOptions = {
-  store: {
-    type: 'odata',
-    version: 2,
-    url: 'https://js.devexpress.com/Demos/DevAV/odata/Products',
-    key: 'Product_ID',
-  },
+  store: products,
  select: ['Product_ID', 'Product_Name', 'Product_Consumer_Rating', 'Product_Category'],
  filter: ['Product_ID', '<', 10],
 };


Potential bug: Using a raw array directly as the store value when the DataSource also uses select and filter operations may not work correctly. DevExtreme DataSource's select and filter are designed to work with store objects (like ArrayStore), not raw arrays. The jQuery implementation correctly wraps the array in an ArrayStore. Consider wrapping the products array in an ArrayStore with a key property:

import ArrayStore from 'devextreme/data/array_store'; const ratingDataSource: DataSourceOptions = { store: new ArrayStore({ data: products, key: 'Product_ID', }), select: ['Product_ID', 'Product_Name', 'Product_Consumer_Rating', 'Product_Category'], filter: ['Product_ID', '<', 10], };

Copilot · 2025-11-07T16:01:56Z

+    this.priceDataSource = {
+      store: service.getProducts(),
+      select: ['Product_ID', 'Product_Name', 'Product_Sale_Price', 'Product_Retail_Price'],
+      filter: ['Product_ID', '<', 10],
+    };


Potential bug: Using a raw array directly as the store value when the DataSource also uses select and filter operations may not work correctly. DevExtreme DataSource's select and filter are designed to work with store objects (like ArrayStore), not raw arrays. The jQuery implementation correctly wraps the array in an ArrayStore. Consider wrapping the products array returned by service.getProducts() in an ArrayStore with a key property:

import ArrayStore from 'devextreme/data/array_store'; this.priceDataSource = { store: new ArrayStore({ data: service.getProducts(), key: 'Product_ID', }), select: ['Product_ID', 'Product_Name', 'Product_Sale_Price', 'Product_Retail_Price'], filter: ['Product_ID', '<', 10], };

Copilot · 2025-11-07T16:01:56Z

 const priceDataSource: DataSourceOptions = {
-  store: {
-    type: 'odata',
-    version: 2,
-    url: 'https://js.devexpress.com/Demos/DevAV/odata/Products',
-    key: 'Product_ID',
-  },
+  store: products,
  select: ['Product_ID', 'Product_Name', 'Product_Sale_Price', 'Product_Retail_Price'],
  filter: ['Product_ID', '<', 10],
 };


Potential bug: Using a raw array directly as the store value when the DataSource also uses select and filter operations may not work correctly. DevExtreme DataSource's select and filter are designed to work with store objects (like ArrayStore), not raw arrays. The jQuery implementation correctly wraps the array in an ArrayStore. Consider wrapping the products array in an ArrayStore with a key property:

import ArrayStore from 'devextreme/data/array_store'; const priceDataSource: DataSourceOptions = { store: new ArrayStore({ data: products, key: 'Product_ID', }), select: ['Product_ID', 'Product_Name', 'Product_Sale_Price', 'Product_Retail_Price'], filter: ['Product_ID', '<', 10], };

Copilot · 2025-11-07T16:01:57Z

+    this.ratingDataSource = {
+      store: service.getProducts(),
+      select: ['Product_ID', 'Product_Name', 'Product_Consumer_Rating', 'Product_Category'],
+      filter: ['Product_ID', '<', 10],
+    };


Potential bug: Using a raw array directly as the store value when the DataSource also uses select and filter operations may not work correctly. DevExtreme DataSource's select and filter are designed to work with store objects (like ArrayStore), not raw arrays. The jQuery implementation correctly wraps the array in an ArrayStore. Consider wrapping the products array returned by service.getProducts() in an ArrayStore with a key property:

import ArrayStore from 'devextreme/data/array_store'; this.ratingDataSource = { store: new ArrayStore({ data: service.getProducts(), key: 'Product_ID', }), select: ['Product_ID', 'Product_Name', 'Product_Consumer_Rating', 'Product_Category'], filter: ['Product_ID', '<', 10], };

Copilot · 2025-11-07T16:01:57Z

+  Product_ID: number = 0;
+
+  Product_Name: string = '';
+
+  Product_Sale_Price: number = 0;
+
+  Product_Retail_Price: number = 0;
+
+  Product_Consumer_Rating: number = 0;
+
+  Product_Category: string = '';


The Product class properties have default initializers (= 0, = '') which is unnecessary for a type-only class. This is inconsistent with the React TypeScript version where the class is used purely for typing. Consider either removing the default initializers or following the pattern in React/data.ts where properties are declared without initializers.

Suggested change

Product_ID: number = 0;

Product_Name: string = '';

Product_Sale_Price: number = 0;

Product_Retail_Price: number = 0;

Product_Consumer_Rating: number = 0;

Product_Category: string = '';

Product_ID: number;

Product_Name: string;

Product_Sale_Price: number;

Product_Retail_Price: number;

Product_Consumer_Rating: number;

Product_Category: string;

Copilot · 2025-11-07T16:01:57Z

 const priceDataSource = {
-  store: {
-    type: 'odata',
-    version: 2,
-    url: 'https://js.devexpress.com/Demos/DevAV/odata/Products',
-    key: 'Product_ID',
-  },
+  store: products,
  select: ['Product_ID', 'Product_Name', 'Product_Sale_Price', 'Product_Retail_Price'],
  filter: ['Product_ID', '<', 10],
 };


Potential bug: Using a raw array directly as the store value when the DataSource also uses select and filter operations may not work correctly. DevExtreme DataSource's select and filter are designed to work with store objects (like ArrayStore), not raw arrays. The jQuery implementation correctly wraps the array in an ArrayStore. Consider wrapping the products array in an ArrayStore with a key property:

import ArrayStore from 'devextreme/data/array_store'; const priceDataSource = { store: new ArrayStore({ data: products, key: 'Product_ID', }), select: ['Product_ID', 'Product_Name', 'Product_Sale_Price', 'Product_Retail_Price'], filter: ['Product_ID', '<', 10], };

Copilot

Pull Request Overview

Copilot reviewed 11 out of 11 changed files in this pull request and generated 2 comments.

Copilot · 2025-11-10T12:39:19Z

 import { Workbook } from 'devextreme-exceljs-fork';
 import { saveAs } from 'file-saver-es';
 import { exportDataGrid } from 'devextreme-react/common/export/excel';
+import { products } from './data.ts';


The .ts file extension should be omitted in TypeScript imports. In TypeScript/JavaScript module systems, file extensions are typically not included for local modules as the bundler/compiler resolves them automatically. Change to import { products } from './data';

Suggested change

import { products } from './data.ts';

import { products } from './data';

Copilot · 2025-11-10T12:39:19Z

 import { type DataGridCell as ExсelDataGridCell, exportDataGrid } from 'devextreme-vue/common/export/excel';
-import { type DataSourceOptions } from 'devextreme-vue/common/data';
+import { ArrayStore, type DataSourceOptions } from 'devextreme-vue/common/data';
+import { products } from './data.ts';


The .ts file extension should be omitted in TypeScript imports. In TypeScript/JavaScript module systems, file extensions are typically not included for local modules as the bundler/compiler resolves them automatically. Change to import { products } from './data';

Suggested change

import { products } from './data.ts';

import { products } from './data';

cherrypick #31567

DataGrid ExcelJSExportMultipleGrids remove odata

0aeb054

flagmanAndrew requested a review from Raushen November 3, 2025 16:08

flagmanAndrew self-assigned this Nov 3, 2025

flagmanAndrew requested a review from a team as a code owner November 3, 2025 16:08

Copilot AI review requested due to automatic review settings November 3, 2025 16:08

flagmanAndrew added the 25_2 label Nov 3, 2025

Raushen reviewed Nov 3, 2025

View reviewed changes

Copilot AI reviewed Nov 3, 2025

View reviewed changes

Raushen reviewed Nov 3, 2025

View reviewed changes

flagmanAndrew added 2 commits November 4, 2025 16:27

DataGrid ExcelJSExportMultipleGrids fix lint

808506e

DataGrid ExcelJSExportMultipleGrids fix lint2

47782ab

Copilot AI review requested due to automatic review settings November 4, 2025 14:24

Copilot AI reviewed Nov 4, 2025

View reviewed changes

flagmanAndrew added 2 commits November 5, 2025 14:38

DataGrid ExcelJSExportMultipleGrids fix reactjs

3dcf95e

DataGrid ExcelJSExportMultipleGrids fix jquery keyexpr

8fac0ec

Copilot AI review requested due to automatic review settings November 5, 2025 12:54

Copilot AI reviewed Nov 5, 2025

View reviewed changes

Raushen reviewed Nov 6, 2025

View reviewed changes

flagmanAndrew added 2 commits November 7, 2025 19:32

DataGrid ExcelJSExportMultipleGrids fix import and type

0d64118

DataGrid ExcelJSExportMultipleGrids fix type

4e6ab6e

Copilot AI review requested due to automatic review settings November 7, 2025 15:50

Copilot AI reviewed Nov 7, 2025

View reviewed changes

flagmanAndrew added 2 commits November 10, 2025 15:09

DataGrid ExcelJSExportMultipleGrids interface/arraystore

e1f80f2

DataGrid ExcelJSExportMultipleGrids interface/arraystore reactjs

c6fb38f

Copilot AI review requested due to automatic review settings November 10, 2025 12:29

Copilot AI reviewed Nov 10, 2025

View reviewed changes

Raushen approved these changes Nov 11, 2025

View reviewed changes

flagmanAndrew merged commit 1470d6c into DevExpress:25_2 Nov 12, 2025
104 of 109 checks passed

flagmanAndrew deleted the 25_2_remove_odata branch November 12, 2025 09:06

flagmanAndrew mentioned this pull request Nov 12, 2025

Demo DataGrid ExcelJSExportMultipleGrids remove odata #31683

Merged

flagmanAndrew added a commit that referenced this pull request Nov 12, 2025

Demo DataGrid ExcelJSExportMultipleGrids remove odata

8f2944d

cherrypick #31567

	import { DataSourceOptions } from 'devextreme-angular/common/data';
	import { DataSourceOptions } from 'devextreme/common/data';

	import { products } from './data.ts';
	import { products } from './data';

Uh oh!

Conversation

flagmanAndrew commented Nov 3, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Nov 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 3, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 3, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Copilot AI Nov 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Copilot AI Nov 7, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 7, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 7, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 7, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 7, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 7, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 7, 2025