Skip to content

Demo DataGrid ExcelJSExportMultipleGrids remove odata #31567

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
flagmanAndrew merged 9 commits into from
Nov 12, 2025
Merged

Demo DataGrid ExcelJSExportMultipleGrids remove odata #31567

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
0aeb054
DataGrid ExcelJSExportMultipleGrids remove odata
flagmanAndrew Nov 3, 2025
808506e
DataGrid ExcelJSExportMultipleGrids fix lint
flagmanAndrew Nov 4, 2025
47782ab
DataGrid ExcelJSExportMultipleGrids fix lint2
flagmanAndrew Nov 4, 2025
3dcf95e
DataGrid ExcelJSExportMultipleGrids fix reactjs
flagmanAndrew Nov 5, 2025
8fac0ec
DataGrid ExcelJSExportMultipleGrids fix jquery keyexpr
flagmanAndrew Nov 5, 2025
0d64118
DataGrid ExcelJSExportMultipleGrids fix import and type
flagmanAndrew Nov 7, 2025
4e6ab6e
DataGrid ExcelJSExportMultipleGrids fix type
flagmanAndrew Nov 7, 2025
e1f80f2
DataGrid ExcelJSExportMultipleGrids interface/arraystore
flagmanAndrew Nov 10, 2025
c6fb38f
DataGrid ExcelJSExportMultipleGrids interface/arraystore reactjs
flagmanAndrew Nov 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 26 additions & 23 deletions apps/demos/Demos/DataGrid/ExcelJSExportMultipleGrids/Angular/app/app.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import {
DxButtonModule, DxTabPanelModule, DxDataGridModule, DxDataGridComponent,
} from 'devextreme-angular';
import { ArrayStore, DataSourceOptions } from 'devextreme-angular/common/data';
import { Workbook } from 'devextreme-exceljs-fork';
import { saveAs } from 'file-saver-es';
// Our demo infrastructure requires us to use 'file-saver-es'. We recommend that you use the official 'file-saver' package in your applications.
import { exportDataGrid } from 'devextreme-angular/common/export/excel';

import 'devextreme-angular/common/data';
import { Service } from './app.service';

if (!/localhost/.test(document.location.host)) {
enableProdMode();
Expand All @@ -27,34 +27,37 @@ if (window && window.config?.packageConfigPaths) {
selector: 'demo-app',
templateUrl: `.${modulePrefix}/app.component.html`,
styleUrls: [`.${modulePrefix}/app.component.css`],
providers: [Service],
})

export class AppComponent {
@ViewChild('priceDataGrid', { static: false }) priceDataGrid: DxDataGridComponent;

@ViewChild('ratingDataGrid', { static: false }) ratingDataGrid: DxDataGridComponent;

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

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

ratingDataSource: DataSourceOptions;

constructor(service: Service) {
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],
};

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],
};
}

exportGrids() {
const context = this;
Expand Down
97 changes: 97 additions & 0 deletions apps/demos/Demos/DataGrid/ExcelJSExportMultipleGrids/Angular/app/app.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
import { Injectable } from '@angular/core';

export interface Product {
Product_ID: number;

Product_Name: string;

Product_Sale_Price: number;

Product_Retail_Price: number;

Product_Consumer_Rating: number;

Product_Category: string;
}

const products: Product[] = [
{
Product_ID: 1,
Product_Name: "HD Video Player",
Product_Sale_Price: 220.00,
Product_Retail_Price: 330.00,
Product_Consumer_Rating: 4,
Product_Category: "Video Players",
},
{
Product_ID: 2,
Product_Name: "SuperHD Video Player",
Product_Sale_Price: 275.00,
Product_Retail_Price: 400.00,
Product_Consumer_Rating: 4,
Product_Category: "Video Players",
},
{
Product_ID: 3,
Product_Name: "SuperPlasma 50",
Product_Sale_Price: 1800.00,
Product_Retail_Price: 2400.00,
Product_Consumer_Rating: 4.5,
Product_Category: "Televisions",
},
{
Product_ID: 4,
Product_Name: "SuperLED 50",
Product_Sale_Price: 1100.00,
Product_Retail_Price: 1600.00,
Product_Consumer_Rating: 5,
Product_Category: "Televisions",
},
{
Product_ID: 5,
Product_Name: "SuperLED 42",
Product_Sale_Price: 1050.00,
Product_Retail_Price: 1450.00,
Product_Consumer_Rating: 5,
Product_Category: "Televisions",
},
{
Product_ID: 6,
Product_Name: "SuperLCD 55",
Product_Sale_Price: 1045.00,
Product_Retail_Price: 1350.00,
Product_Consumer_Rating: 4.5,
Product_Category: "Televisions",
},
{
Product_ID: 7,
Product_Name: "SuperLCD 42",
Product_Sale_Price: 999.00,
Product_Retail_Price: 1200.00,
Product_Consumer_Rating: 4,
Product_Category: "Televisions",
},
{
Product_ID: 8,
Product_Name: "SuperPlasma 65",
Product_Sale_Price: 2900.00,
Product_Retail_Price: 3500.00,
Product_Consumer_Rating: 3,
Product_Category: "Televisions",
},
{
Product_ID: 9,
Product_Name: "SuperLCD 70",
Product_Sale_Price: 3200.00,
Product_Retail_Price: 4000.00,
Product_Consumer_Rating: 4,
Product_Category: "Televisions",
},
];

@Injectable()
export class Service {
getProducts() {
return products;
}
}
25 changes: 11 additions & 14 deletions apps/demos/Demos/DataGrid/ExcelJSExportMultipleGrids/React/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,26 @@ import React, { useCallback, useRef } from 'react';
import Button from 'devextreme-react/button';
import TabPanel, { Item } from 'devextreme-react/tab-panel';
import DataGrid, { Column, DataGridRef } from 'devextreme-react/data-grid';
import { ArrayStore, DataSourceOptions } from 'devextreme-react/common/data';
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';

Copilot AI Nov 10, 2025

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 uses AI. Check for mistakes.

import 'devextreme-react/common/data';

const priceDataSource = {
store: {
type: 'odata' as const,
version: 2,
url: 'https://js.devexpress.com/Demos/DevAV/odata/Products',
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],
};
const ratingDataSource = {
store: {
type: 'odata' as const,
version: 2,
url: 'https://js.devexpress.com/Demos/DevAV/odata/Products',

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],
};
Expand Down
88 changes: 88 additions & 0 deletions apps/demos/Demos/DataGrid/ExcelJSExportMultipleGrids/React/data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
export interface Product {
Product_ID: number;

Product_Name: string;

Product_Sale_Price: number;

Product_Retail_Price: number;

Product_Consumer_Rating: number;

Product_Category: string;
Comment on lines +2 to +12

Copilot AI Nov 4, 2025

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 uses AI. Check for mistakes.
}

export const products: Product[] = [
{
Product_ID: 1,
Product_Name: "HD Video Player",
Product_Sale_Price: 220.00,
Product_Retail_Price: 330.00,
Product_Consumer_Rating: 4,
Product_Category: "Video Players",
},
{
Product_ID: 2,
Product_Name: "SuperHD Video Player",
Product_Sale_Price: 275.00,
Product_Retail_Price: 400.00,
Product_Consumer_Rating: 4,
Product_Category: "Video Players",
},
{
Product_ID: 3,
Product_Name: "SuperPlasma 50",
Product_Sale_Price: 1800.00,
Product_Retail_Price: 2400.00,
Product_Consumer_Rating: 4.5,
Product_Category: "Televisions",
},
{
Product_ID: 4,
Product_Name: "SuperLED 50",
Product_Sale_Price: 1100.00,
Product_Retail_Price: 1600.00,
Product_Consumer_Rating: 5,
Product_Category: "Televisions",
},
{
Product_ID: 5,
Product_Name: "SuperLED 42",
Product_Sale_Price: 1050.00,
Product_Retail_Price: 1450.00,
Product_Consumer_Rating: 5,
Product_Category: "Televisions",
},
{
Product_ID: 6,
Product_Name: "SuperLCD 55",
Product_Sale_Price: 1045.00,
Product_Retail_Price: 1350.00,
Product_Consumer_Rating: 4.5,
Product_Category: "Televisions",
},
{
Product_ID: 7,
Product_Name: "SuperLCD 42",
Product_Sale_Price: 999.00,
Product_Retail_Price: 1200.00,
Product_Consumer_Rating: 4,
Product_Category: "Televisions",
},
{
Product_ID: 8,
Product_Name: "SuperPlasma 65",
Product_Sale_Price: 2900.00,
Product_Retail_Price: 3500.00,
Product_Consumer_Rating: 3,
Product_Category: "Televisions",
},
{
Product_ID: 9,
Product_Name: "SuperLCD 70",
Product_Sale_Price: 3200.00,
Product_Retail_Price: 4000.00,
Product_Consumer_Rating: 4,
Product_Category: "Televisions",
},
];
19 changes: 8 additions & 11 deletions apps/demos/Demos/DataGrid/ExcelJSExportMultipleGrids/ReactJs/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,28 +2,25 @@ import React, { useCallback, useRef } from 'react';
import Button from 'devextreme-react/button';
import TabPanel, { Item } from 'devextreme-react/tab-panel';
import DataGrid, { Column } from 'devextreme-react/data-grid';
import { ArrayStore } from 'devextreme-react/common/data';
import { Workbook } from 'devextreme-exceljs-fork';
import { saveAs } from 'file-saver-es';
import { exportDataGrid } from 'devextreme-react/common/export/excel';
import 'devextreme-react/common/data';
import { products } from './data.js';

const priceDataSource = {
store: {
type: 'odata',
version: 2,
url: 'https://js.devexpress.com/Demos/DevAV/odata/Products',
store: new ArrayStore({
data: products,
key: 'Product_ID',
},
}),
select: ['Product_ID', 'Product_Name', 'Product_Sale_Price', 'Product_Retail_Price'],
filter: ['Product_ID', '<', 10],
};
Comment on lines 11 to 18

Copilot AI Nov 7, 2025

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 uses AI. Check for mistakes.
const ratingDataSource = {
store: {
type: 'odata',
version: 2,
url: 'https://js.devexpress.com/Demos/DevAV/odata/Products',
store: new ArrayStore({
data: products,
key: 'Product_ID',
},
}),
select: ['Product_ID', 'Product_Name', 'Product_Consumer_Rating', 'Product_Category'],
filter: ['Product_ID', '<', 10],
};
Comment on lines 19 to 26

Copilot AI Nov 7, 2025

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 uses AI. Check for mistakes.
Expand Down
Loading
Loading