Skip to content

Commit 88d7dca

Browse files
pomahtripomahtri
authored
CardView - demo fixes (#30186)
1 parent 24b798f commit 88d7dca

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

85 files changed

+878
-863
lines changed

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,20 @@
2929
[disabled]="columnChooserMode !== 'select'"
3030
></dx-check-box>
3131
</div>
32+
<div class="option">
33+
<dx-check-box
34+
text="Allow Column Reordering"
35+
[(value)]="allowColumnReordering"
36+
></dx-check-box>
37+
</div>
3238
</div>
3339
</div>
3440
<dx-card-view
3541
[dataSource]="employees"
3642
keyExpr="ID"
3743
cardsPerRow="auto"
3844
[cardMinWidth]="300"
45+
[allowColumnReordering]="allowColumnReordering"
3946
>
4047
<dxo-card-view-search-panel [visible]="true"></dxo-card-view-search-panel>
4148
<dxo-card-view-column-chooser

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ export class AppComponent {
2525

2626
columnChooserMode = 'select';
2727

28+
allowColumnReordering = false;
29+
2830
searchEnabled = true;
2931

3032
allowSelectAll = true;

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ const App = () => {
2626
const [searchEnabled, setSearchEnabled] = useState(true);
2727
const [allowSelectAll, setAllowSelectAll] = useState(true);
2828
const [selectByClick, setSelectByClick] = useState(true);
29+
const [allowColumnReordering, setAllowColumnReordering] = useState(false);
2930

3031
return <>
3132
<div className="options-panel">
@@ -63,13 +64,21 @@ const App = () => {
6364
disabled={columnChooserMode !== 'select'}
6465
></CheckBox>
6566
</div>
67+
<div className="option">
68+
<CheckBox
69+
text="Allow Column Reordering"
70+
value={allowColumnReordering}
71+
onValueChange={setAllowColumnReordering}
72+
></CheckBox>
73+
</div>
6674
</div>
6775
</div>
6876
<CardView
6977
dataSource={employees}
7078
keyExpr="ID"
7179
cardsPerRow="auto"
7280
cardMinWidth={300}
81+
allowColumnReordering={allowColumnReordering}
7382
>
7483
<SearchPanel
7584
visible={true}

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ const App = () => {
2727
const [searchEnabled, setSearchEnabled] = useState(true);
2828
const [allowSelectAll, setAllowSelectAll] = useState(true);
2929
const [selectByClick, setSelectByClick] = useState(true);
30+
const [allowColumnReordering, setAllowColumnReordering] = useState(false);
3031
return (
3132
<React.Fragment>
3233
<div className="options-panel">
@@ -64,13 +65,21 @@ const App = () => {
6465
disabled={columnChooserMode !== 'select'}
6566
></CheckBox>
6667
</div>
68+
<div className="option">
69+
<CheckBox
70+
text="Allow Column Reordering"
71+
value={allowColumnReordering}
72+
onValueChange={setAllowColumnReordering}
73+
></CheckBox>
74+
</div>
6775
</div>
6876
</div>
6977
<CardView
7078
dataSource={employees}
7179
keyExpr="ID"
7280
cardsPerRow="auto"
7381
cardMinWidth={300}
82+
allowColumnReordering={allowColumnReordering}
7483
>
7584
<SearchPanel visible={true} />
7685
<ColumnChooser

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,13 @@
3434
:disabled="columnChooserMode !== 'select'"
3535
/>
3636
</div>
37+
<div className="option">
38+
<DxCheckBox
39+
text="Allow Column Reordering"
40+
:value="allowColumnReordering"
41+
@value-changed="({ value }) => { allowColumnReordering = value; }"
42+
/>
43+
</div>
3744
</div>
3845
</div>
3946
<DxCardView
@@ -42,6 +49,7 @@
4249
cards-per-row="auto"
4350
:card-min-width="300"
4451
:selected-card-keys="[4, 6]"
52+
:allow-column-reordering="allowColumnReordering"
4553
>
4654
<DxSearchPanel
4755
:visible="true"
@@ -115,6 +123,7 @@ const columnChooserMode = ref<'select' | 'dragAndDrop'>('select');
115123
const searchEnabled = ref(true);
116124
const allowSelectAll = ref(true);
117125
const selectByClick = ref(true);
126+
const allowColumnReordering = ref(false);
118127
119128
</script>
120129
<style>

‎apps/demos/Demos/CardView/ColumnChooser/jQuery/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
<div class="option"> <div id="search-enabled"></div> </div>
2222
<div class="option"> <div id="allow-select-all"></div> </div>
2323
<div class="option"> <div id="select-by-click"></div> </div>
24+
<div class="option"> <div id="allow-column-reordering"></div> </div>
2425
</div>
2526
</div>
2627
<div id="card-view"></div>

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,14 @@ $(() => {
9393
disabled: cardView.option('columnChooser.mode') !== 'select',
9494
});
9595

96+
$('#allow-column-reordering').dxCheckBox({
97+
text: 'Allow Column Reordering',
98+
value: cardView.option('allowColumnReordering') ?? false,
99+
onValueChanged: ({value}) => {
100+
cardView.option('allowColumnReordering', value);
101+
},
102+
});
103+
96104
}
97105

98106
renderOptions();

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

Lines changed: 29 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
keyExpr="id"
44
cardsPerRow="auto"
55
[cardMinWidth]="350"
6-
[height]="820"
6+
[height]="840"
77
>
88
<dxo-card-view-search-panel [visible]="true"></dxo-card-view-search-panel>
99
<dxo-card-view-card-cover
@@ -17,54 +17,55 @@
1717
[popup]="popupConfig"
1818
>
1919
<dxo-card-view-form>
20-
<dxo-card-view-form-item
20+
<dxi-card-view-item
2121
caption="Personal Data"
2222
itemType="group"
2323
[colCount]="2"
2424
[colSpan]="2"
2525
>
26-
<dxo-card-view-form-item
27-
dataField="firstName"
28-
></dxo-card-view-form-item>
29-
<dxo-card-view-form-item dataField="lastName"></dxo-card-view-form-item>
30-
<dxo-card-view-form-item
31-
dataField="birthDate"
32-
></dxo-card-view-form-item>
33-
<dxo-card-view-form-item dataField="picture"></dxo-card-view-form-item>
34-
</dxo-card-view-form-item>
35-
<dxo-card-view-form-item
26+
<dxi-card-view-item dataField="firstName"></dxi-card-view-item>
27+
<dxi-card-view-item dataField="lastName"></dxi-card-view-item>
28+
<dxi-card-view-item dataField="birthDate"></dxi-card-view-item>
29+
<dxi-card-view-item dataField="picture"></dxi-card-view-item>
30+
</dxi-card-view-item>
31+
<dxi-card-view-item
3632
caption="Main Info"
3733
itemType="group"
3834
[colCount]="2"
3935
[colSpan]="2"
4036
>
41-
<dxo-card-view-form-item dataField="hireDate"></dxo-card-view-form-item>
42-
<dxo-card-view-form-item dataField="title"></dxo-card-view-form-item>
43-
<dxo-card-view-form-item
37+
<dxi-card-view-item dataField="hireDate"></dxi-card-view-item>
38+
<dxi-card-view-item dataField="title"></dxi-card-view-item>
39+
<dxi-card-view-item dataField="department"></dxi-card-view-item>
40+
<dxi-card-view-item
4441
dataField="notes"
4542
editorType="dxTextArea"
4643
[colSpan]="2"
4744
[editorOptions]="{ height: 100 }"
48-
></dxo-card-view-form-item>
49-
<dxo-card-view-form-item dataField="picture"></dxo-card-view-form-item>
50-
</dxo-card-view-form-item>
51-
<dxo-card-view-form-item
45+
></dxi-card-view-item>
46+
<dxi-card-view-item dataField="picture"></dxi-card-view-item>
47+
</dxi-card-view-item>
48+
<dxi-card-view-item
5249
caption="Contacts"
5350
itemType="group"
5451
[colCount]="2"
5552
[colSpan]="2"
5653
>
57-
<dxo-card-view-form-item
54+
<dxi-card-view-item
5855
dataField="address"
5956
[colSpan]="2"
60-
></dxo-card-view-form-item>
61-
<dxo-card-view-form-item dataField="city"></dxo-card-view-form-item>
62-
<dxo-card-view-form-item dataField="zipcode"></dxo-card-view-form-item>
63-
<dxo-card-view-form-item
57+
></dxi-card-view-item>
58+
<dxi-card-view-item dataField="city"></dxi-card-view-item>
59+
<dxi-card-view-item dataField="zipcode"></dxi-card-view-item>
60+
<dxi-card-view-item
6461
dataField="mobilePhone"
65-
></dxo-card-view-form-item>
66-
<dxo-card-view-form-item dataField="email"></dxo-card-view-form-item>
67-
</dxo-card-view-form-item>
62+
[editorOptions]="{
63+
mask: '+1 (000) 000-0000',
64+
useMaskedValue: true,
65+
}"
66+
></dxi-card-view-item>
67+
<dxi-card-view-item dataField="email"></dxi-card-view-item>
68+
</dxi-card-view-item>
6869
</dxo-card-view-form>
6970
</dxo-card-view-editing>
7071
<dxi-card-view-column
@@ -93,13 +94,7 @@
9394
</dxi-card-view-column>
9495
<dxi-card-view-column dataField="department"></dxi-card-view-column>
9596
<dxi-card-view-column dataField="address"></dxi-card-view-column>
96-
<dxi-card-view-column dataField="mobilePhone">
97-
<dxi-card-view-validation-rule
98-
type="pattern"
99-
message="Your phone must have '(555) 555-5555' format!"
100-
[pattern]="phonePattern"
101-
></dxi-card-view-validation-rule>
102-
</dxi-card-view-column>
97+
<dxi-card-view-column dataField="mobilePhone"></dxi-card-view-column>
10398
<dxi-card-view-column dataField="email">
10499
<dxi-card-view-validation-rule type="email"></dxi-card-view-validation-rule>
105100
<dxi-card-view-validation-rule

0 commit comments

Comments
 (0)