Skip to content

Commit 36d8e0c

Browse files
GoodDayForSurfGoodDayForSurf
committed
remake dataSource on tasks page
1 parent 28cbf1e commit 36d8e0c

6 files changed

Lines changed: 118 additions & 216 deletions

File tree

‎packages/devextreme-cli/src/templates/nextjs/sample-pages/tasks/page.tsx‎

Lines changed: 29 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ import DataGrid, {
66
Pager,
77
Paging,
88
FilterRow,
9-
Lookup
109
} from 'devextreme-react/data-grid';
1110
import './tasks.scss';
11+
import { CustomStore } from 'devextreme-react/common/data';
1212

1313
export default function Task() {
1414
return (
@@ -28,85 +28,61 @@ export default function Task() {
2828
<Pager showPageSizeSelector={true} showInfo={true} />
2929
<FilterRow visible={true} />
3030

31-
<Column dataField={'Task_ID'} width={90} hidingPriority={2} />
31+
<Column dataField={'id'} width={90} hidingPriority={1} />
3232
<Column
33-
dataField={'Task_Subject'}
33+
dataField={'text'}
3434
width={190}
3535
caption={'Subject'}
36-
hidingPriority={8}
36+
hidingPriority={6}
3737
/>
3838
<Column
39-
dataField={'Task_Status'}
39+
dataField={'status'}
4040
caption={'Status'}
41-
hidingPriority={6}
41+
hidingPriority={4}
4242
/>
4343
<Column
44-
dataField={'Task_Priority'}
45-
caption={'Priority'}
46-
hidingPriority={5}
47-
>
48-
<Lookup
49-
dataSource={priorities}
50-
valueExpr={'value'}
51-
displayExpr={'name'}
52-
/>
53-
</Column>
54-
<Column
55-
dataField={'ResponsibleEmployee.Employee_Full_Name'}
44+
dataField={'owner'}
5645
caption={'Assigned To'}
5746
allowSorting={false}
58-
hidingPriority={7}
47+
hidingPriority={5}
5948
/>
6049
<Column
61-
dataField={'Task_Start_Date'}
50+
dataField={'startDate'}
6251
caption={'Start Date'}
6352
dataType={'date'}
64-
hidingPriority={3}
53+
hidingPriority={2}
6554
/>
6655
<Column
67-
dataField={'Task_Due_Date'}
56+
dataField={'dueDate'}
6857
caption={'Due Date'}
6958
dataType={'date'}
70-
hidingPriority={4}
59+
hidingPriority={3}
7160
/>
7261
<Column
73-
dataField={'Task_Priority'}
62+
dataField={'priority'}
7463
caption={'Priority'}
7564
name={'Priority'}
76-
hidingPriority={1}
77-
/>
78-
<Column
79-
dataField={'Task_Completion'}
80-
caption={'Completion'}
8165
hidingPriority={0}
8266
/>
8367
</DataGrid>
8468
</React.Fragment>
8569
)}
8670

8771
const dataSource = new DataSource({
88-
store: {
89-
version: 2,
90-
type: 'odata',
91-
key: 'Task_ID',
92-
url: 'https://js.devexpress.com/Demos/DevAV/odata/Tasks'
93-
},
94-
expand: 'ResponsibleEmployee',
95-
select: [
96-
'Task_ID',
97-
'Task_Subject',
98-
'Task_Start_Date',
99-
'Task_Due_Date',
100-
'Task_Status',
101-
'Task_Priority',
102-
'Task_Completion',
103-
'ResponsibleEmployee/Employee_Full_Name'
104-
]
105-
});
72+
store: new CustomStore({
73+
key: 'id',
74+
async load() {
75+
try {
76+
const response = await fetch(`https://js.devexpress.com/Demos/RwaService/api/Employees/AllTasks`);
77+
78+
const result = await response.json();
10679

107-
const priorities = [
108-
{ name: 'High', value: 4 },
109-
{ name: 'Urgent', value: 3 },
110-
{ name: 'Normal', value: 2 },
111-
{ name: 'Low', value: 1 }
112-
];
80+
return {
81+
data: result,
82+
};
83+
} catch (err) {
84+
throw new Error('Data Loading Error');
85+
}
86+
},
87+
}),
88+
});

‎packages/devextreme-cli/src/templates/react/sample-pages/tasks/tasks.tsx‎

Lines changed: 29 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ import DataGrid, {
55
Pager,
66
Paging,
77
FilterRow,
8-
Lookup
98
} from 'devextreme-react/data-grid';
109
import './tasks.scss';
10+
import { CustomStore } from 'devextreme-react/common/data';
1111

1212
export function Tasks() {
1313
return (
@@ -27,85 +27,61 @@ export function Tasks() {
2727
<Pager showPageSizeSelector={true} showInfo={true} />
2828
<FilterRow visible={true} />
2929

30-
<Column dataField={'Task_ID'} width={90} hidingPriority={2} />
30+
<Column dataField={'id'} width={90} hidingPriority={1} />
3131
<Column
32-
dataField={'Task_Subject'}
32+
dataField={'text'}
3333
width={190}
3434
caption={'Subject'}
35-
hidingPriority={8}
35+
hidingPriority={6}
3636
/>
3737
<Column
38-
dataField={'Task_Status'}
38+
dataField={'status'}
3939
caption={'Status'}
40-
hidingPriority={6}
40+
hidingPriority={4}
4141
/>
4242
<Column
43-
dataField={'Task_Priority'}
44-
caption={'Priority'}
45-
hidingPriority={5}
46-
>
47-
<Lookup
48-
dataSource={priorities}
49-
valueExpr={'value'}
50-
displayExpr={'name'}
51-
/>
52-
</Column>
53-
<Column
54-
dataField={'ResponsibleEmployee.Employee_Full_Name'}
43+
dataField={'owner'}
5544
caption={'Assigned To'}
5645
allowSorting={false}
57-
hidingPriority={7}
46+
hidingPriority={5}
5847
/>
5948
<Column
60-
dataField={'Task_Start_Date'}
49+
dataField={'startDate'}
6150
caption={'Start Date'}
6251
dataType={'date'}
63-
hidingPriority={3}
52+
hidingPriority={2}
6453
/>
6554
<Column
66-
dataField={'Task_Due_Date'}
55+
dataField={'dueDate'}
6756
caption={'Due Date'}
6857
dataType={'date'}
69-
hidingPriority={4}
58+
hidingPriority={3}
7059
/>
7160
<Column
72-
dataField={'Task_Priority'}
61+
dataField={'priority'}
7362
caption={'Priority'}
7463
name={'Priority'}
75-
hidingPriority={1}
76-
/>
77-
<Column
78-
dataField={'Task_Completion'}
79-
caption={'Completion'}
8064
hidingPriority={0}
8165
/>
8266
</DataGrid>
8367
</React.Fragment>
8468
)}
8569

8670
const dataSource = new DataSource({
87-
store: {
88-
version: 2,
89-
type: 'odata',
90-
key: 'Task_ID',
91-
url: 'https://js.devexpress.com/Demos/DevAV/odata/Tasks'
92-
},
93-
expand: 'ResponsibleEmployee',
94-
select: [
95-
'Task_ID',
96-
'Task_Subject',
97-
'Task_Start_Date',
98-
'Task_Due_Date',
99-
'Task_Status',
100-
'Task_Priority',
101-
'Task_Completion',
102-
'ResponsibleEmployee/Employee_Full_Name'
103-
]
104-
});
71+
store: new CustomStore({
72+
key: 'id',
73+
async load() {
74+
try {
75+
const response = await fetch(`https://js.devexpress.com/Demos/RwaService/api/Employees/AllTasks`);
76+
77+
const result = await response.json();
10578

106-
const priorities = [
107-
{ name: 'High', value: 4 },
108-
{ name: 'Urgent', value: 3 },
109-
{ name: 'Normal', value: 2 },
110-
{ name: 'Low', value: 1 }
111-
];
79+
return {
80+
data: result,
81+
};
82+
} catch (err) {
83+
throw new Error('Data Loading Error');
84+
}
85+
},
86+
})
87+
});

‎packages/devextreme-cli/src/templates/vue-v3/sample-pages/tasks-page.vue‎

Lines changed: 29 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -15,64 +15,46 @@
1515
<dx-pager :show-page-size-selector="true" :show-info="true" />
1616
<dx-filter-row :visible="true" />
1717

18-
<dx-column data-field="Task_ID" :width="90" :hiding-priority="2" />
18+
<dx-column data-field="id" :width="90" :hiding-priority="1" />
1919

2020
<dx-column
21-
data-field="Task_Subject"
21+
data-field="text"
2222
caption="Subject"
2323
:width="190"
24-
:hiding-priority="8"
24+
:hiding-priority="6"
2525
/>
2626

2727
<dx-column
28-
data-field="Task_Status"
28+
data-field="status"
2929
caption="Status"
30-
:hiding-priority="6"
30+
:hiding-priority="4"
3131
/>
3232

3333
<dx-column
34-
data-field="Task_Priority"
35-
caption="Priority"
36-
:hiding-priority="5"
37-
>
38-
<dx-lookup
39-
display-expr="name"
40-
value-expr="value"
41-
:data-source="priorities"
42-
/>
43-
</dx-column>
44-
45-
<dx-column
46-
data-field="ResponsibleEmployee.Employee_Full_Name"
34+
data-field="owner"
4735
caption="Assigned To"
4836
:allow-sorting="false"
49-
:hiding-priority="7"
37+
:hiding-priority="5"
5038
/>
5139

5240
<dx-column
53-
data-field="Task_Start_Date"
41+
data-field="startDate"
5442
caption="Start Date"
5543
data-type="date"
56-
:hiding-priority="3"
44+
:hiding-priority="2"
5745
/>
5846

5947
<dx-column
60-
data-field="Task_Due_Date"
48+
data-field="dueDate"
6149
caption="Due Date"
6250
data-type="date"
63-
:hiding-priority="4"
51+
:hiding-priority="3"
6452
/>
6553

6654
<dx-column
67-
data-field="Task_Priority"
55+
data-field="priority"
6856
caption="Priority"
6957
name="Priority"
70-
:hiding-priority="1"
71-
/>
72-
73-
<dx-column
74-
data-field="Task_Completion"
75-
caption="Completion"
7658
:hiding-priority="0"
7759
/>
7860
</dx-data-grid>
@@ -84,49 +66,39 @@ import "devextreme-vue/common/data";
8466
import DxDataGrid, {
8567
DxColumn,
8668
DxFilterRow,
87-
DxLookup,
8869
DxPager,
8970
DxPaging
9071
} from "devextreme-vue/data-grid";
91-
92-
const priorities = [
93-
{ name: "High", value: 4 },
94-
{ name: "Urgent", value: 3 },
95-
{ name: "Normal", value: 2 },
96-
{ name: "Low", value: 1 }
97-
];
72+
import { CustomStore } from 'devextreme-vue/common/data';
9873
9974
export default {
10075
setup() {
10176
const dataSourceConfig = {
102-
store: {
103-
version: 2,
104-
type: "odata",
105-
key: "Task_ID",
106-
url: "https://js.devexpress.com/Demos/DevAV/odata/Tasks"
107-
},
108-
expand: "ResponsibleEmployee",
109-
select: [
110-
"Task_ID",
111-
"Task_Subject",
112-
"Task_Start_Date",
113-
"Task_Due_Date",
114-
"Task_Status",
115-
"Task_Priority",
116-
"Task_Completion",
117-
"ResponsibleEmployee/Employee_Full_Name"
118-
]
77+
store: new CustomStore({
78+
key: 'id',
79+
async load() {
80+
try {
81+
const response = await fetch(`https://js.devexpress.com/Demos/RwaService/api/Employees/AllTasks`);
82+
83+
const result = await response.json();
84+
85+
return {
86+
data: result,
87+
};
88+
} catch (err) {
89+
throw new Error('Data Loading Error');
90+
}
91+
},
92+
}),
11993
};
12094
return {
12195
dataSourceConfig,
122-
priorities
12396
};
12497
},
12598
components: {
12699
DxDataGrid,
127100
DxColumn,
128101
DxFilterRow,
129-
DxLookup,
130102
DxPager,
131103
DxPaging
132104
}

0 commit comments

Comments
 (0)