Skip to content

Commit 4f9aae9

Browse files
dmirgaevdmirgaev
authored
FilterBuilder With DataGrid demo: remove non-existent property 'width' from filterBuilder.fields[] (#31535) (#31563)
1 parent 8fe961f commit 4f9aae9

File tree

11 files changed

+209
-39
lines changed

11 files changed

+209
-39
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
[dataSource]="dataSource"
99
[filterValue]="gridFilterValue"
1010
[showBorders]="true"
11-
[columns]="fields"
11+
[columns]="columns"
1212
[height]="300"
1313
>
1414
</dx-data-grid>

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
} from 'devextreme-angular';
99

1010
import { Service } from './app.service';
11-
import type { Fields, Condition, Product } from './app.service';
11+
import type { Fields, Columns, Condition, Product } from './app.service';
1212

1313
if (!/localhost/.test(document.location.host)) {
1414
enableProdMode();
@@ -32,12 +32,15 @@ export class AppComponent {
3232

3333
fields: Fields;
3434

35+
columns: Columns;
36+
3537
filter: Condition;
3638

3739
gridFilterValue: Condition;
3840

3941
constructor(service: Service) {
4042
this.fields = service.getFields();
43+
this.columns = service.getColumns();
4144
this.filter = service.getFilter();
4245
this.gridFilterValue = this.filter;
4346
this.dataSource = service.getProducts();

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

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
22

33
export type Condition = Condition[] | string | number;
44
export type Fields = typeof fields;
5+
export type Columns = typeof columns;
56

67
export interface Product {
78
Product_ID: number;
@@ -21,12 +22,43 @@ const filter: Condition = [
2122
['Product_Cost', '<', 200],
2223
],
2324
];
24-
const fields: Record<string, string | number>[] = [
25+
26+
const fields: Record<string, string>[] = [
27+
{
28+
caption: 'ID',
29+
dataField: 'Product_ID',
30+
dataType: 'number',
31+
}, {
32+
dataField: 'Product_Name',
33+
dataType: 'string',
34+
}, {
35+
caption: 'Cost',
36+
dataField: 'Product_Cost',
37+
dataType: 'number',
38+
format: 'currency',
39+
}, {
40+
dataField: 'Product_Sale_Price',
41+
caption: 'Sale Price',
42+
dataType: 'number',
43+
format: 'currency',
44+
}, {
45+
dataField: 'Product_Retail_Price',
46+
caption: 'Retail Price',
47+
dataType: 'number',
48+
format: 'currency',
49+
}, {
50+
dataField: 'Product_Current_Inventory',
51+
dataType: 'number',
52+
caption: 'Inventory',
53+
},
54+
];
55+
56+
const columns: Record<string, string | number>[] = [
2557
{
2658
caption: 'ID',
27-
width: 50,
2859
dataField: 'Product_ID',
2960
dataType: 'number',
61+
width: 50,
3062
}, {
3163
dataField: 'Product_Name',
3264
dataType: 'string',
@@ -209,6 +241,10 @@ const products: Product[] = [
209241

210242
@Injectable()
211243
export class Service {
244+
getColumns(): Columns {
245+
return columns;
246+
}
247+
212248
getFields(): Fields {
213249
return fields;
214250
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +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 { filter, fields, products } from './data.ts';
5+
import { filter, fields, columns, products } from './data.ts';
66

77
const App = () => {
88
const [value, setValue] = useState(filter);
@@ -27,7 +27,7 @@ const App = () => {
2727
dataSource={products}
2828
filterValue={gridFilterValue}
2929
showBorders={true}
30-
columns={fields}
30+
columns={columns}
3131
height={300}
3232
/>
3333
</div>

‎apps/demos/Demos/FilterBuilder/WithDataGrid/React/data.ts‎

Lines changed: 51 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,25 @@
11
import { DataType } from 'devextreme/common';
22

3+
interface Product {
4+
Product_ID: number;
5+
Product_Name: string;
6+
Product_Cost: string;
7+
Product_Sale_Price: string;
8+
Product_Retail_Price: string;
9+
Product_Current_Inventory: number;
10+
}
11+
12+
interface Field {
13+
caption?: string,
14+
dataField: string,
15+
dataType: DataType,
16+
format?: string,
17+
}
18+
19+
interface Column extends Field {
20+
width?: number,
21+
}
22+
323
export const filter = [
424
['Product_Current_Inventory', '<>', 0],
525
'or',
@@ -10,16 +30,9 @@ export const filter = [
1030
],
1131
];
1232

13-
export const fields: {
14-
caption?: string,
15-
width?: number,
16-
dataField: string,
17-
dataType: DataType,
18-
format?: string,
19-
}[] = [
33+
export const fields: Field[] = [
2034
{
2135
caption: 'ID',
22-
width: 50,
2336
dataField: 'Product_ID',
2437
dataType: 'number',
2538
}, {
@@ -47,14 +60,36 @@ export const fields: {
4760
},
4861
];
4962

50-
interface Product {
51-
Product_ID: number;
52-
Product_Name: string;
53-
Product_Cost: string;
54-
Product_Sale_Price: string;
55-
Product_Retail_Price: string;
56-
Product_Current_Inventory: number;
57-
}
63+
export const columns: Column[] = [
64+
{
65+
caption: 'ID',
66+
dataField: 'Product_ID',
67+
dataType: 'number',
68+
width: 50,
69+
}, {
70+
dataField: 'Product_Name',
71+
dataType: 'string',
72+
}, {
73+
caption: 'Cost',
74+
dataField: 'Product_Cost',
75+
dataType: 'number',
76+
format: 'currency',
77+
}, {
78+
dataField: 'Product_Sale_Price',
79+
caption: 'Sale Price',
80+
dataType: 'number',
81+
format: 'currency',
82+
}, {
83+
dataField: 'Product_Retail_Price',
84+
caption: 'Retail Price',
85+
dataType: 'number',
86+
format: 'currency',
87+
}, {
88+
dataField: 'Product_Current_Inventory',
89+
dataType: 'number',
90+
caption: 'Inventory',
91+
},
92+
];
5893

5994
export const products: Product[] = [
6095
{

‎apps/demos/Demos/FilterBuilder/WithDataGrid/ReactJs/App.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@ import React, { useCallback, useState } from 'react';
22
import FilterBuilder from 'devextreme-react/filter-builder';
33
import Button from 'devextreme-react/button';
44
import DataGrid from 'devextreme-react/data-grid';
5-
import { filter, fields, products } from './data.js';
5+
import {
6+
filter, fields, columns, products,
7+
} from './data.js';
68

79
const App = () => {
810
const [value, setValue] = useState(filter);
@@ -35,7 +37,7 @@ const App = () => {
3537
dataSource={products}
3638
filterValue={gridFilterValue}
3739
showBorders={true}
38-
columns={fields}
40+
columns={columns}
3941
height={300}
4042
/>
4143
</div>

‎apps/demos/Demos/FilterBuilder/WithDataGrid/ReactJs/data.js‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ export const filter = [
66
export const fields = [
77
{
88
caption: 'ID',
9-
width: 50,
109
dataField: 'Product_ID',
1110
dataType: 'number',
1211
},
@@ -38,6 +37,41 @@ export const fields = [
3837
caption: 'Inventory',
3938
},
4039
];
40+
export const columns = [
41+
{
42+
caption: 'ID',
43+
dataField: 'Product_ID',
44+
dataType: 'number',
45+
width: 50,
46+
},
47+
{
48+
dataField: 'Product_Name',
49+
dataType: 'string',
50+
},
51+
{
52+
caption: 'Cost',
53+
dataField: 'Product_Cost',
54+
dataType: 'number',
55+
format: 'currency',
56+
},
57+
{
58+
dataField: 'Product_Sale_Price',
59+
caption: 'Sale Price',
60+
dataType: 'number',
61+
format: 'currency',
62+
},
63+
{
64+
dataField: 'Product_Retail_Price',
65+
caption: 'Retail Price',
66+
dataType: 'number',
67+
format: 'currency',
68+
},
69+
{
70+
dataField: 'Product_Current_Inventory',
71+
dataType: 'number',
72+
caption: 'Inventory',
73+
},
74+
];
4175
export const products = [
4276
{
4377
Product_ID: 1,

‎apps/demos/Demos/FilterBuilder/WithDataGrid/Vue/App.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
:data-source="products"
1717
:filter-value="gridFilterValue"
1818
:show-borders="true"
19-
:columns="fields"
19+
:columns="columns"
2020
:height="300"
2121
/>
2222
</div>
@@ -26,7 +26,7 @@ import { ref } from 'vue';
2626
import DxFilterBuilder from 'devextreme-vue/filter-builder';
2727
import DxButton from 'devextreme-vue/button';
2828
import DxDataGrid from 'devextreme-vue/data-grid';
29-
import { filter, fields, products } from './data.ts';
29+
import { filter, fields, columns, products } from './data.ts';
3030
3131
const filterValue = ref(filter);
3232
const gridFilterValue = ref(filter);

‎apps/demos/Demos/FilterBuilder/WithDataGrid/Vue/data.ts‎

Lines changed: 40 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
11
import { type DxDataGridTypes } from "devextreme-vue/data-grid";
22
import { type DxFilterBuilderTypes } from 'devextreme-vue/filter-builder';
33

4+
interface Product {
5+
Product_ID: number;
6+
Product_Name: string;
7+
Product_Cost: string;
8+
Product_Sale_Price: string;
9+
Product_Retail_Price: string;
10+
Product_Current_Inventory: number;
11+
}
12+
413
export const filter = [
514
['Product_Current_Inventory', '<>', 0],
615
'or',
@@ -11,12 +20,11 @@ export const filter = [
1120
],
1221
];
1322

14-
export const fields: (DxFilterBuilderTypes.Field & DxDataGridTypes.Column)[] = [
23+
export const fields: (DxFilterBuilderTypes.Field)[] = [
1524
{
1625
caption: 'ID',
1726
dataField: 'Product_ID',
1827
dataType: 'number',
19-
width: 50,
2028
}, {
2129
dataField: 'Product_Name',
2230
dataType: 'string',
@@ -42,14 +50,36 @@ export const fields: (DxFilterBuilderTypes.Field & DxDataGridTypes.Column)[] = [
4250
},
4351
];
4452

45-
interface Product {
46-
Product_ID: number;
47-
Product_Name: string;
48-
Product_Cost: string;
49-
Product_Sale_Price: string;
50-
Product_Retail_Price: string;
51-
Product_Current_Inventory: number;
52-
}
53+
export const columns: (DxDataGridTypes.Column)[] = [
54+
{
55+
caption: 'ID',
56+
dataField: 'Product_ID',
57+
dataType: 'number',
58+
width: 50,
59+
}, {
60+
dataField: 'Product_Name',
61+
dataType: 'string',
62+
}, {
63+
caption: 'Cost',
64+
dataField: 'Product_Cost',
65+
dataType: 'number',
66+
format: 'currency',
67+
}, {
68+
dataField: 'Product_Sale_Price',
69+
caption: 'Sale Price',
70+
dataType: 'number',
71+
format: 'currency',
72+
}, {
73+
dataField: 'Product_Retail_Price',
74+
caption: 'Retail Price',
75+
dataType: 'number',
76+
format: 'currency',
77+
}, {
78+
dataField: 'Product_Current_Inventory',
79+
dataType: 'number',
80+
caption: 'Inventory',
81+
},
82+
];
5383

5484
export const products: Product[] = [
5585
{

0 commit comments

Comments
 (0)