Skip to content

Commit 7f35941

Browse files
pomahtripomahtri
authored
CardView - demo fixes (DevExpress#30196)
1 parent 498789d commit 7f35941

File tree

11 files changed

+107
-16
lines changed

11 files changed

+107
-16
lines changed

‎apps/demos/Demos/CardView/DataValidation/Angular/app/app.component.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,11 @@
9494
</dxi-card-view-column>
9595
<dxi-card-view-column dataField="department"></dxi-card-view-column>
9696
<dxi-card-view-column dataField="address"></dxi-card-view-column>
97-
<dxi-card-view-column dataField="mobilePhone"></dxi-card-view-column>
97+
<dxi-card-view-column dataField="mobilePhone">
98+
<dxi-card-view-validation-rule
99+
type="required"
100+
></dxi-card-view-validation-rule>
101+
</dxi-card-view-column>
98102
<dxi-card-view-column dataField="email">
99103
<dxi-card-view-validation-rule type="email"></dxi-card-view-validation-rule>
100104
<dxi-card-view-validation-rule

‎apps/demos/Demos/CardView/DataValidation/React/App.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,9 @@ const App = () => (
167167
</Column>
168168
<Column dataField="department"/>
169169
<Column dataField="address"/>
170-
<Column dataField="mobilePhone"/>
170+
<Column dataField="mobilePhone">
171+
<RequiredRule/>
172+
</Column>
171173
<Column dataField="email">
172174
<EmailRule/>
173175
<AsyncRule

‎apps/demos/Demos/CardView/DataValidation/ReactJs/App.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,9 @@ const App = () => (
146146
</Column>
147147
<Column dataField="department" />
148148
<Column dataField="address" />
149-
<Column dataField="mobilePhone" />
149+
<Column dataField="mobilePhone">
150+
<RequiredRule />
151+
</Column>
150152
<Column dataField="email">
151153
<EmailRule />
152154
<AsyncRule

‎apps/demos/Demos/CardView/DataValidation/Vue/App.vue‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -127,10 +127,7 @@
127127
<DxColumn data-field="department"/>
128128
<DxColumn data-field="address"/>
129129
<DxColumn data-field="mobilePhone">
130-
<DxPatternRule
131-
message="Your phone must have '(555) 555-5555' format!"
132-
:pattern="/^\(\d{3}\) \d{3}-\d{4}$/i"
133-
/>
130+
<DxRequiredRule/>
134131
</DxColumn>
135132
<DxColumn data-field="email">
136133
<DxEmailRule/>

‎apps/demos/Demos/CardView/DataValidation/jQuery/index.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,12 @@ $(() => {
9797
},
9898
'department',
9999
'address',
100-
'mobilePhone',
100+
{
101+
dataField: 'mobilePhone',
102+
validationRules: [{
103+
type: 'required',
104+
}],
105+
},
101106
{
102107
dataField: 'email',
103108
validationRules: [{

‎apps/demos/Demos/CardView/WebAPIService/Angular/app/app.component.html‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,23 @@
1212
[allowUpdating]="true"
1313
[allowDeleting]="true"
1414
[popup]="{ width: 700, height: 400 }"
15-
></dxo-card-view-editing>
15+
>
16+
<dxo-card-view-form>
17+
<dxi-card-view-item dataField="Task_Subject"></dxi-card-view-item>
18+
<dxi-card-view-item dataField="Task_Start_Date"></dxi-card-view-item>
19+
<dxi-card-view-item dataField="Task_Due_Date"></dxi-card-view-item>
20+
<dxi-card-view-item
21+
dataField="Task_Priority"
22+
editorType="dxSelectBox"
23+
[editorOptions]="{ dataSource: ['Low', 'Normal', 'High', 'Urgent'] }"
24+
></dxi-card-view-item>
25+
<dxi-card-view-item dataField="Task_Status"></dxi-card-view-item>
26+
</dxo-card-view-form>
27+
</dxo-card-view-editing>
1628
<dxi-card-view-column dataField="Task_Subject" caption="Subject">
17-
<dxi-card-view-required-rule></dxi-card-view-required-rule>
29+
<dxi-card-view-validation-rule
30+
type="required"
31+
></dxi-card-view-validation-rule>
1832
</dxi-card-view-column>
1933
<dxi-card-view-column
2034
dataField="Task_Start_Date"

‎apps/demos/Demos/CardView/WebAPIService/Angular/app/app.component.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { NgModule, Component, enableProdMode } from '@angular/core';
22
import { BrowserModule } from '@angular/platform-browser';
33
import * as AspNetData from 'devextreme-aspnet-data-nojquery';
44
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
5-
import { DxCardViewModule } from 'devextreme-angular';
5+
import { DxCardViewModule, DxSelectBoxModule } from 'devextreme-angular';
66

77
if (!/localhost/.test(document.location.host)) {
88
enableProdMode();
@@ -37,6 +37,7 @@ export class AppComponent {
3737
imports: [
3838
BrowserModule,
3939
DxCardViewModule,
40+
DxSelectBoxModule,
4041
],
4142
declarations: [AppComponent],
4243
bootstrap: [AppComponent],

‎apps/demos/Demos/CardView/WebAPIService/React/App.tsx‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import * as AspNetData from 'devextreme-aspnet-data-nojquery';
3-
import CardView, { Column, Editing, RequiredRule, SearchPanel, HeaderFilter } from 'devextreme-react/card-view';
3+
import CardView, { Column, Editing, RequiredRule, SearchPanel, HeaderFilter, Form, Item } from 'devextreme-react/card-view';
4+
import 'devextreme-react/text-area';
45

56
const url = 'https://js.devexpress.com/Demos/NetCore/api/TreeListTasks';
67

@@ -34,7 +35,27 @@ const App = () => (
3435
allowUpdating={true}
3536
allowDeleting={true}
3637
popup={{ width: 700, height: 400 }}
37-
></Editing>
38+
>
39+
<Form>
40+
<Item
41+
dataField="Task_Subject"
42+
></Item>
43+
<Item
44+
dataField="Task_Start_Date"
45+
></Item>
46+
<Item
47+
dataField="Task_Due_Date"
48+
></Item>
49+
<Item
50+
dataField="Task_Priority"
51+
editorType="dxSelectBox"
52+
editorOptions={{ dataSource: ['Low', 'Normal', 'High', 'Urgent'] }}
53+
></Item>
54+
<Item
55+
dataField="Task_Status"
56+
></Item>
57+
</Form>
58+
</Editing>
3859
<Column
3960
dataField="Task_Subject"
4061
caption="Subject"

‎apps/demos/Demos/CardView/WebAPIService/ReactJs/App.js‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@ import CardView, {
66
RequiredRule,
77
SearchPanel,
88
HeaderFilter,
9+
Form,
10+
Item,
911
} from 'devextreme-react/card-view';
12+
import 'devextreme-react/text-area';
1013

1114
const url = 'https://js.devexpress.com/Demos/NetCore/api/TreeListTasks';
1215
const dataSource = AspNetData.createStore({
@@ -34,7 +37,19 @@ const App = () => (
3437
allowUpdating={true}
3538
allowDeleting={true}
3639
popup={{ width: 700, height: 400 }}
37-
></Editing>
40+
>
41+
<Form>
42+
<Item dataField="Task_Subject"></Item>
43+
<Item dataField="Task_Start_Date"></Item>
44+
<Item dataField="Task_Due_Date"></Item>
45+
<Item
46+
dataField="Task_Priority"
47+
editorType="dxSelectBox"
48+
editorOptions={{ dataSource: ['Low', 'Normal', 'High', 'Urgent'] }}
49+
></Item>
50+
<Item dataField="Task_Status"></Item>
51+
</Form>
52+
</Editing>
3853
<Column
3954
dataField="Task_Subject"
4055
caption="Subject"

‎apps/demos/Demos/CardView/WebAPIService/Vue/App.vue‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,27 @@
1717
:allow-updating="true"
1818
:allow-deleting="true"
1919
:popup="{ width: 700, height: 400 }"
20-
/>
20+
>
21+
<DxForm>
22+
<DxItem
23+
dataField="Task_Subject"
24+
></DxItem>
25+
<DxItem
26+
dataField="Task_Start_Date"
27+
></DxItem>
28+
<DxItem
29+
dataField="Task_Due_Date"
30+
></DxItem>
31+
<DxItem
32+
data-field="Task_Priority"
33+
editor-type="dxSelectBox"
34+
:editor-options="{ dataSource: ['Low', 'Normal', 'High', 'Urgent'] }"
35+
></DxItem>
36+
<DxItem
37+
dataField="Task_Status"
38+
></DxItem>
39+
</DxForm>
40+
</DxEditing>
2141
<DxColumn
2242
data-field="Task_Subject"
2343
caption="Subject"
@@ -46,9 +66,10 @@
4666
</template>
4767
<script setup lang="ts">
4868
import {
49-
DxCardView, DxColumn, DxEditing, DxSearchPanel, DxHeaderFilter, DxRequiredRule,
69+
DxCardView, DxColumn, DxEditing, DxSearchPanel, DxHeaderFilter, DxRequiredRule, DxForm, DxItem,
5070
} from 'devextreme-vue/card-view';
5171
import * as AspNetData from 'devextreme-aspnet-data-nojquery';
72+
import 'devextreme-vue/text-area';
5273
5374
const url = 'https://js.devexpress.com/Demos/NetCore/api/TreeListTasks';
5475

0 commit comments

Comments
 (0)