Skip to content

Commit f3c009d

Browse files
Alyar666Alyar666
authored
FilterBuilder With DataGrid demo: Replace ODataSource with local data (#31440)
1 parent 7629558 commit f3c009d

File tree

10 files changed

+816
-109
lines changed

10 files changed

+816
-109
lines changed

‎apps/demos/Demos/FilterBuilder/WithDataGrid/Angular/app/app.component.ts‎

Lines changed: 3 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,8 @@ import {
77
DxFilterBuilderModule,
88
} from 'devextreme-angular';
99

10-
import { DataSource, ODataStore } from 'devextreme-angular/common/data';
1110
import { Service } from './app.service';
12-
import type { Fields, Condition } from './app.service';
11+
import type { Fields, Condition, Product } from './app.service';
1312

1413
if (!/localhost/.test(document.location.host)) {
1514
enableProdMode();
@@ -29,7 +28,7 @@ if (window && window.config?.packageConfigPaths) {
2928
})
3029

3130
export class AppComponent {
32-
dataSource: DataSource;
31+
dataSource: Product[];
3332

3433
fields: Fields;
3534

@@ -41,25 +40,7 @@ export class AppComponent {
4140
this.fields = service.getFields();
4241
this.filter = service.getFilter();
4342
this.gridFilterValue = this.filter;
44-
this.dataSource = new DataSource({
45-
store: new ODataStore({
46-
version: 2,
47-
fieldTypes: {
48-
Product_Cost: 'Decimal',
49-
Product_Sale_Price: 'Decimal',
50-
Product_Retail_Price: 'Decimal',
51-
},
52-
url: 'https://js.devexpress.com/Demos/DevAV/odata/Products',
53-
}),
54-
select: [
55-
'Product_ID',
56-
'Product_Name',
57-
'Product_Cost',
58-
'Product_Sale_Price',
59-
'Product_Retail_Price',
60-
'Product_Current_Inventory',
61-
],
62-
});
43+
this.dataSource = service.getProducts();
6344
}
6445

6546
buttonClick() {

‎apps/demos/Demos/FilterBuilder/WithDataGrid/Angular/app/app.service.ts‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,15 @@ import { Injectable } from '@angular/core';
33
export type Condition = Condition[] | string | number;
44
export type Fields = typeof fields;
55

6+
export interface Product {
7+
Product_ID: number;
8+
Product_Name: string;
9+
Product_Cost: string;
10+
Product_Sale_Price: string;
11+
Product_Retail_Price: string;
12+
Product_Current_Inventory: number;
13+
}
14+
615
const filter: Condition = [
716
['Product_Current_Inventory', '<>', 0],
817
'or',
@@ -43,6 +52,161 @@ const fields: Record<string, string | number>[] = [
4352
},
4453
];
4554

55+
const products: Product[] = [
56+
{
57+
Product_ID: 1,
58+
Product_Name: "HD Video Player",
59+
Product_Cost: "110.0000",
60+
Product_Sale_Price: "220.0000",
61+
Product_Retail_Price: "330.0000",
62+
Product_Current_Inventory: 225,
63+
},
64+
{
65+
Product_ID: 2,
66+
Product_Name: "SuperHD Video Player",
67+
Product_Cost: "175.0000",
68+
Product_Sale_Price: "275.0000",
69+
Product_Retail_Price: "400.0000",
70+
Product_Current_Inventory: 150,
71+
},
72+
{
73+
Product_ID: 3,
74+
Product_Name: "SuperPlasma 50",
75+
Product_Cost: "1100.0000",
76+
Product_Sale_Price: "1800.0000",
77+
Product_Retail_Price: "2400.0000",
78+
Product_Current_Inventory: 0,
79+
},
80+
{
81+
Product_ID: 4,
82+
Product_Name: "SuperLED 50",
83+
Product_Cost: "775.0000",
84+
Product_Sale_Price: "1100.0000",
85+
Product_Retail_Price: "1600.0000",
86+
Product_Current_Inventory: 77,
87+
},
88+
{
89+
Product_ID: 5,
90+
Product_Name: "SuperLED 42",
91+
Product_Cost: "675.0000",
92+
Product_Sale_Price: "1050.0000",
93+
Product_Retail_Price: "1450.0000",
94+
Product_Current_Inventory: 445,
95+
},
96+
{
97+
Product_ID: 6,
98+
Product_Name: "SuperLCD 55",
99+
Product_Cost: "745.0000",
100+
Product_Sale_Price: "1045.0000",
101+
Product_Retail_Price: "1350.0000",
102+
Product_Current_Inventory: 345,
103+
},
104+
{
105+
Product_ID: 7,
106+
Product_Name: "SuperLCD 42",
107+
Product_Cost: "710.0000",
108+
Product_Sale_Price: "999.0000",
109+
Product_Retail_Price: "1200.0000",
110+
Product_Current_Inventory: 210,
111+
},
112+
{
113+
Product_ID: 8,
114+
Product_Name: "SuperPlasma 65",
115+
Product_Cost: "1800.0000",
116+
Product_Sale_Price: "2900.0000",
117+
Product_Retail_Price: "3500.0000",
118+
Product_Current_Inventory: 0,
119+
},
120+
{
121+
Product_ID: 9,
122+
Product_Name: "SuperLCD 70",
123+
Product_Cost: "2125.0000",
124+
Product_Sale_Price: "3200.0000",
125+
Product_Retail_Price: "4000.0000",
126+
Product_Current_Inventory: 95,
127+
},
128+
{
129+
Product_ID: 10,
130+
Product_Name: "DesktopLED 21",
131+
Product_Cost: "75.0000",
132+
Product_Sale_Price: "125.0000",
133+
Product_Retail_Price: "175.0000",
134+
Product_Current_Inventory: 0,
135+
},
136+
{
137+
Product_ID: 11,
138+
Product_Name: "DesktopLED 19",
139+
Product_Cost: "70.0000",
140+
Product_Sale_Price: "115.0000",
141+
Product_Retail_Price: "165.0000",
142+
Product_Current_Inventory: 425,
143+
},
144+
{
145+
Product_ID: 12,
146+
Product_Name: "DesktopLCD 21",
147+
Product_Cost: "75.0000",
148+
Product_Sale_Price: "120.0000",
149+
Product_Retail_Price: "170.0000",
150+
Product_Current_Inventory: 210,
151+
},
152+
{
153+
Product_ID: 13,
154+
Product_Name: "DesktopLCD 19",
155+
Product_Cost: "68.0000",
156+
Product_Sale_Price: "110.0000",
157+
Product_Retail_Price: "160.0000",
158+
Product_Current_Inventory: 150,
159+
},
160+
{
161+
Product_ID: 14,
162+
Product_Name: "Projector Plus",
163+
Product_Cost: "225.0000",
164+
Product_Sale_Price: "400.0000",
165+
Product_Retail_Price: "550.0000",
166+
Product_Current_Inventory: 0,
167+
},
168+
{
169+
Product_ID: 15,
170+
Product_Name: "Projector PlusHD",
171+
Product_Cost: "425.0000",
172+
Product_Sale_Price: "600.0000",
173+
Product_Retail_Price: "750.0000",
174+
Product_Current_Inventory: 110,
175+
},
176+
{
177+
Product_ID: 16,
178+
Product_Name: "Projector PlusHT",
179+
Product_Cost: "725.0000",
180+
Product_Sale_Price: "900.0000",
181+
Product_Retail_Price: "1050.0000",
182+
Product_Current_Inventory: 0,
183+
},
184+
{
185+
Product_ID: 17,
186+
Product_Name: "ExcelRemote IR",
187+
Product_Cost: "55.0000",
188+
Product_Sale_Price: "105.0000",
189+
Product_Retail_Price: "150.0000",
190+
Product_Current_Inventory: 650,
191+
},
192+
{
193+
Product_ID: 18,
194+
Product_Name: "ExcelRemote Bluetooth",
195+
Product_Cost: "85.0000",
196+
Product_Sale_Price: "135.0000",
197+
Product_Retail_Price: "180.0000",
198+
Product_Current_Inventory: 310,
199+
},
200+
{
201+
Product_ID: 19,
202+
Product_Name: "ExcelRemote IP",
203+
Product_Cost: "105.0000",
204+
Product_Sale_Price: "155.0000",
205+
Product_Retail_Price: "200.0000",
206+
Product_Current_Inventory: 0,
207+
},
208+
];
209+
46210
@Injectable()
47211
export class Service {
48212
getFields(): Fields {
@@ -52,4 +216,8 @@ export class Service {
52216
getFilter(): Condition {
53217
return filter;
54218
}
219+
220+
getProducts(): Product[] {
221+
return products;
222+
}
55223
}

‎apps/demos/Demos/FilterBuilder/WithDataGrid/React/App.tsx‎

Lines changed: 2 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,7 @@ import React, { useCallback, useState } from 'react';
22
import FilterBuilder, { type FilterBuilderTypes } from 'devextreme-react/filter-builder';
33
import Button from 'devextreme-react/button';
44
import DataGrid from 'devextreme-react/data-grid';
5-
import { DataSource, ODataStore } from 'devextreme-react/common/data';
6-
import { filter, fields } from './data.ts';
7-
8-
const dataSource = new DataSource({
9-
store: new ODataStore({
10-
version: 2,
11-
fieldTypes: {
12-
Product_Cost: 'Decimal',
13-
Product_Sale_Price: 'Decimal',
14-
Product_Retail_Price: 'Decimal',
15-
},
16-
url: 'https://js.devexpress.com/Demos/DevAV/odata/Products',
17-
}),
18-
select: [
19-
'Product_ID',
20-
'Product_Name',
21-
'Product_Cost',
22-
'Product_Sale_Price',
23-
'Product_Retail_Price',
24-
'Product_Current_Inventory',
25-
],
26-
});
5+
import { filter, fields, products } from './data.ts';
276

287
const App = () => {
298
const [value, setValue] = useState(filter);
@@ -45,7 +24,7 @@ const App = () => {
4524
<div className="dx-clearfix"></div>
4625
</div>
4726
<DataGrid
48-
dataSource={dataSource}
27+
dataSource={products}
4928
filterValue={gridFilterValue}
5029
showBorders={true}
5130
columns={fields}

0 commit comments

Comments
 (0)