Skip to content

Commit 4193f04

Browse files
Raushenwdevfx
Raushen
and
wdevfx
authored
CardView: CardTemplate demo fixes (#30120)
Co-authored-by: wdevfx <[email protected]>
1 parent 03ae077 commit 4193f04

File tree

17 files changed

+120
-54
lines changed

17 files changed

+120
-54
lines changed

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

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
11
<dx-card-view
22
[dataSource]="vehicles"
3+
[height]="1120"
34
cardsPerRow="auto"
4-
[cardMinWidth]="260"
5+
[cardMinWidth]="240"
56
cardTemplate="vehicleCardTemplate"
67
>
78
<dxo-card-view-header-filter [visible]="true"></dxo-card-view-header-filter>
89
<dxo-card-view-search-panel [visible]="true"></dxo-card-view-search-panel>
910
<dxo-card-view-paging [pageSize]="12"></dxo-card-view-paging>
1011

11-
<dxi-card-view-column dataField="TrademarkName"></dxi-card-view-column>
12-
<dxi-card-view-column dataField="Name"></dxi-card-view-column>
12+
<dxi-card-view-column dataField="TrademarkName" caption="Trademark" />
13+
<dxi-card-view-column dataField="Name" caption="Model" />
1314
<dxi-card-view-column dataField="Price" format="currency">
1415
<dxo-card-view-column-header-filter
1516
[groupInterval]="20000"
1617
></dxo-card-view-column-header-filter>
1718
</dxi-card-view-column>
18-
<dxi-card-view-column dataField="CategoryName"></dxi-card-view-column>
19+
<dxi-card-view-column dataField="CategoryName" caption="Category" />
1920
<dxi-card-view-column dataField="Modification"></dxi-card-view-column>
20-
<dxi-card-view-column dataField="BodyStyleName"></dxi-card-view-column>
21+
<dxi-card-view-column dataField="BodyStyleName" caption="Body Style" />
2122
<dxi-card-view-column dataField="Horsepower"></dxi-card-view-column>
2223

2324
<div *dxTemplate="let model of 'vehicleCardTemplate'">
@@ -37,8 +38,8 @@
3738
</dx-card-view>
3839

3940
<dx-popup
40-
[width]="350"
41-
[height]="240"
41+
[width]="360"
42+
[height]="260"
4243
[(visible)]="popupVisible"
4344
[dragEnabled]="false"
4445
[hideOnOutsideClick]="true"

‎apps/demos/Demos/CardView/CardTemplate/Angular/app/license-info/license-info.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
</p>
99
<p>
1010
<b>Source link: </b>
11-
<a [href]="vehicleLink">{{ vehicleLink }}</a>
11+
<a [href]="vehicleLink" target="_blank">{{ vehicleLink }}</a>
1212
</p>
1313
<p>
1414
<b>Edits: </b>

‎apps/demos/Demos/CardView/CardTemplate/Angular/app/vehicle-card/vehicle-card.component.css‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.vehicle__img-wrapper {
2-
height: 146px;
2+
height: 135px;
33
border-bottom: var(--dx-border-width) solid var(--dx-color-border);
44
background-color: #fff;
55
}
@@ -55,7 +55,6 @@
5555

5656
.vehicle__footer-container {
5757
padding: 12px;
58-
height: 56px;
5958
}
6059

6160
.vehicle__image-licence-caption {

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

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,9 @@ const App = () => {
2727
<>
2828
<CardView
2929
dataSource={vehicles}
30+
height={1120}
3031
cardsPerRow="auto"
31-
cardMinWidth={260}
32+
cardMinWidth={240}
3233
cardRender={(model) => {
3334
const vehicle = model.card.data;
3435
return <VehicleCard
@@ -48,23 +49,35 @@ const App = () => {
4849
<SearchPanel visible={true} />
4950
<Paging pageSize={12} />
5051

51-
<Column dataField="TrademarkName" />
52-
<Column dataField="Name" />
52+
<Column
53+
dataField="TrademarkName"
54+
caption="Trademark"
55+
/>
56+
<Column
57+
dataField="Name"
58+
caption="Model"
59+
/>
5360
<Column
5461
dataField="Price"
5562
format="currency"
5663
>
5764
<HeaderFilter groupInterval={20000} />
5865
</Column>
59-
<Column dataField="CategoryName" />
66+
<Column
67+
dataField="CategoryName"
68+
caption="Category"
69+
/>
6070
<Column dataField="Modification" />
61-
<Column dataField="BodyStyleName" />
71+
<Column
72+
dataField="BodyStyleName"
73+
caption="Body Style"
74+
/>
6275
<Column dataField="Horsepower" />
6376
</CardView>
6477

6578
<Popup
66-
width={350}
67-
height={240}
79+
width={360}
80+
height={260}
6881
visible={popupVisible}
6982
dragEnabled={false}
7083
hideOnOutsideClick={true}

‎apps/demos/Demos/CardView/CardTemplate/React/LicenseInfo.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,12 @@ const LicenseInfo = ({
1616
<p><b>Author: </b> <span>{Author}</span></p>
1717
<p>
1818
<b>Source link: </b>
19-
<a href={vehicleLink}>{vehicleLink}</a>
19+
<a
20+
href={vehicleLink}
21+
target='_blank'
22+
>
23+
{vehicleLink}
24+
</a>
2025
</p>
2126
<p><b>Edits: </b> <span>{Edits}</span></p>
2227
</div>

‎apps/demos/Demos/CardView/CardTemplate/React/styles.css‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.vehicle__img-wrapper {
2-
height: 146px;
2+
height: 135px;
33
border-bottom: var(--dx-border-width) solid var(--dx-color-border);
44
background-color: #fff;
55
}
@@ -55,7 +55,6 @@
5555

5656
.vehicle__footer-container {
5757
padding: 12px;
58-
height: 56px;
5958
}
6059

6160
.vehicle__image-licence-caption {

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

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,9 @@ const App = () => {
2525
<React.Fragment>
2626
<CardView
2727
dataSource={vehicles}
28+
height={1120}
2829
cardsPerRow="auto"
29-
cardMinWidth={260}
30+
cardMinWidth={240}
3031
cardRender={(model) => {
3132
const vehicle = model.card.data;
3233
return (
@@ -48,23 +49,35 @@ const App = () => {
4849
<SearchPanel visible={true} />
4950
<Paging pageSize={12} />
5051

51-
<Column dataField="TrademarkName" />
52-
<Column dataField="Name" />
52+
<Column
53+
dataField="TrademarkName"
54+
caption="Trademark"
55+
/>
56+
<Column
57+
dataField="Name"
58+
caption="Model"
59+
/>
5360
<Column
5461
dataField="Price"
5562
format="currency"
5663
>
5764
<HeaderFilter groupInterval={20000} />
5865
</Column>
59-
<Column dataField="CategoryName" />
66+
<Column
67+
dataField="CategoryName"
68+
caption="Category"
69+
/>
6070
<Column dataField="Modification" />
61-
<Column dataField="BodyStyleName" />
71+
<Column
72+
dataField="BodyStyleName"
73+
caption="Body Style"
74+
/>
6275
<Column dataField="Horsepower" />
6376
</CardView>
6477

6578
<Popup
66-
width={350}
67-
height={240}
79+
width={360}
80+
height={260}
6881
visible={popupVisible}
6982
dragEnabled={false}
7083
hideOnOutsideClick={true}

‎apps/demos/Demos/CardView/CardTemplate/ReactJs/LicenseInfo.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,12 @@ const LicenseInfo = ({
1616
</p>
1717
<p>
1818
<b>Source link: </b>
19-
<a href={vehicleLink}>{vehicleLink}</a>
19+
<a
20+
href={vehicleLink}
21+
target="_blank"
22+
>
23+
{vehicleLink}
24+
</a>
2025
</p>
2126
<p>
2227
<b>Edits: </b> <span>{Edits}</span>

‎apps/demos/Demos/CardView/CardTemplate/ReactJs/styles.css‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.vehicle__img-wrapper {
2-
height: 146px;
2+
height: 135px;
33
border-bottom: var(--dx-border-width) solid var(--dx-color-border);
44
background-color: #fff;
55
}
@@ -55,7 +55,6 @@
5555

5656
.vehicle__footer-container {
5757
padding: 12px;
58-
height: 56px;
5958
}
6059

6160
.vehicle__image-licence-caption {

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

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,38 @@
11
<template>
22
<DxCardView
33
:data-source="vehicles"
4+
:height="1120"
45
cards-per-row="auto"
5-
:card-min-width="260"
6+
:card-min-width="240"
67
card-template="cardTemplate"
78
>
89
<DxHeaderFilter :visible="true" />
910
<DxSearchPanel :visible="true" />
1011
<DxPaging :pageSize="12" />
1112

12-
<DxColumn data-field="TrademarkName"/>
13-
<DxColumn data-field="Name"/>
13+
<DxColumn
14+
data-field="TrademarkName"
15+
caption="Trademark"
16+
/>
17+
<DxColumn
18+
data-field="Name"
19+
caption="Model"
20+
/>
1421
<DxColumn
1522
data-field="Price"
1623
format="currency"
1724
>
1825
<DxHeaderFilter :groupInterval="20000" />
1926
</DxColumn>
20-
<DxColumn data-field="CategoryName"/>
27+
<DxColumn
28+
data-field="CategoryName"
29+
caption="Category"
30+
/>
2131
<DxColumn data-field="Modification"/>
22-
<DxColumn data-field="BodyStyleName"/>
32+
<DxColumn
33+
data-field="BodyStyleName"
34+
caption="Body Style"
35+
/>
2336
<DxColumn data-field="Horsepower"/>
2437
<template #cardTemplate="{
2538
data: {
@@ -51,8 +64,8 @@
5164
</template>
5265
</DxCardView>
5366
<DxPopup
54-
:width="350"
55-
:height="240"
67+
:width="360"
68+
:height="260"
5669
v-model:visible="popupVisible"
5770
:dragEnabled="false"
5871
:hideOnOutsideClick="true"

0 commit comments

Comments
 (0)