Skip to content

Commit 6b3941e

Browse files
ajivanyandevajivanyandev
authored
Update DataGrid demos to new syntax (#31764)
1 parent a8c1798 commit 6b3941e

File tree

74 files changed

+1772
-1074
lines changed

Some content is hidden

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

74 files changed

+1772
-1074
lines changed

‎apps/demos/Demos/DataGrid/AdvancedMasterDetailView/Angular/app/app.component.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,17 @@
44
[remoteOperations]="true"
55
[showBorders]="true"
66
>
7-
<dxo-paging [pageSize]="15"></dxo-paging>
8-
<dxo-pager [visible]="true"></dxo-pager>
9-
<dxi-column dataField="ContactName"></dxi-column>
10-
<dxi-column dataField="ContactTitle"></dxi-column>
11-
<dxi-column dataField="CompanyName"></dxi-column>
12-
<dxi-column dataField="City"></dxi-column>
13-
<dxi-column dataField="Country"></dxi-column>
14-
<dxo-master-detail
7+
<dxo-data-grid-paging [pageSize]="15"></dxo-data-grid-paging>
8+
<dxo-data-grid-pager [visible]="true"></dxo-data-grid-pager>
9+
<dxi-data-grid-column dataField="ContactName"></dxi-data-grid-column>
10+
<dxi-data-grid-column dataField="ContactTitle"></dxi-data-grid-column>
11+
<dxi-data-grid-column dataField="CompanyName"></dxi-data-grid-column>
12+
<dxi-data-grid-column dataField="City"></dxi-data-grid-column>
13+
<dxi-data-grid-column dataField="Country"></dxi-data-grid-column>
14+
<dxo-data-grid-master-detail
1515
[enabled]="true"
1616
template="masterDetail"
17-
></dxo-master-detail>
17+
></dxo-data-grid-master-detail>
1818

1919
<div *dxTemplate="let masterDetailItem of 'masterDetail'">
2020
<detail-view

‎apps/demos/Demos/DataGrid/AdvancedMasterDetailView/Angular/app/detail-view/detail-view.component.html‎

Lines changed: 42 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<dx-tab-panel>
2-
<dxi-item title="Orders" template="ordersTab"></dxi-item>
2+
<dxi-tab-panel-item title="Orders" template="ordersTab"></dxi-tab-panel-item>
33
<div *dxTemplate="let ordersTabItem of 'ordersTab'">
44
<dx-form labelLocation="top" class="form-container">
5-
<dxi-item template="productSelectBox">
6-
<dxo-label text="Product"></dxo-label>
7-
</dxi-item>
5+
<dxi-form-item template="productSelectBox">
6+
<dxo-form-label text="Product"></dxo-form-label>
7+
</dxi-form-item>
88
<div *dxTemplate="let selectBoxItem of 'productSelectBox'">
99
<dx-select-box
1010
[value]="productIdBySupplier"
@@ -18,51 +18,63 @@
1818
</dx-select-box>
1919
</div>
2020

21-
<dxi-item template="orderHistory">
22-
<dxo-label text="Order History"></dxo-label>
23-
</dxi-item>
21+
<dxi-form-item template="orderHistory">
22+
<dxo-form-label text="Order History"></dxo-form-label>
23+
</dxi-form-item>
2424
<div *dxTemplate="let order of 'orderHistory'">
2525
<dx-data-grid [dataSource]="orderHistoryData" [showBorders]="true">
26-
<dxo-paging [pageSize]="5"></dxo-paging>
26+
<dxo-data-grid-paging [pageSize]="5"></dxo-data-grid-paging>
2727

28-
<dxi-column dataField="OrderID"></dxi-column>
29-
<dxi-column dataField="OrderDate" dataType="date"></dxi-column>
30-
<dxi-column dataField="ShipCountry"></dxi-column>
31-
<dxi-column dataField="ShipCity"></dxi-column>
32-
<dxi-column dataField="UnitPrice" format="currency"></dxi-column>
33-
<dxi-column dataField="Quantity"></dxi-column>
34-
<dxi-column dataField="Discount" format="percent"></dxi-column>
28+
<dxi-data-grid-column dataField="OrderID"></dxi-data-grid-column>
29+
<dxi-data-grid-column
30+
dataField="OrderDate"
31+
dataType="date"
32+
></dxi-data-grid-column>
33+
<dxi-data-grid-column dataField="ShipCountry"></dxi-data-grid-column>
34+
<dxi-data-grid-column dataField="ShipCity"></dxi-data-grid-column>
35+
<dxi-data-grid-column
36+
dataField="UnitPrice"
37+
format="currency"
38+
></dxi-data-grid-column>
39+
<dxi-data-grid-column dataField="Quantity"></dxi-data-grid-column>
40+
<dxi-data-grid-column
41+
dataField="Discount"
42+
format="percent"
43+
></dxi-data-grid-column>
3544

36-
<dxo-summary>
37-
<dxi-total-item column="UnitPrice" summaryType="sum">
38-
<dxo-value-format
45+
<dxo-data-grid-summary>
46+
<dxi-data-grid-total-item column="UnitPrice" summaryType="sum">
47+
<dxo-data-grid-value-format
3948
format="currency"
4049
[precision]="2"
41-
></dxo-value-format>
42-
</dxi-total-item>
43-
<dxi-total-item
50+
></dxo-data-grid-value-format>
51+
</dxi-data-grid-total-item>
52+
<dxi-data-grid-total-item
4453
column="Quantity"
4554
summaryType="count"
46-
></dxi-total-item>
47-
</dxo-summary>
55+
></dxi-data-grid-total-item>
56+
</dxo-data-grid-summary>
4857
</dx-data-grid>
4958
</div>
5059
</dx-form>
5160
</div>
52-
<dxi-item title="Address" template="addressTab"></dxi-item>
61+
<dxi-tab-panel-item
62+
title="Address"
63+
template="addressTab"
64+
></dxi-tab-panel-item>
5365
<div *dxTemplate="let addressTabItem of 'addressTab'">
5466
<dx-form
5567
[formData]="rowData"
5668
[colCount]="2"
5769
[customizeItem]="customizeItemTemplate"
5870
class="address-form form-container"
5971
>
60-
<dxi-item dataField="Address"></dxi-item>
61-
<dxi-item dataField="City"></dxi-item>
62-
<dxi-item dataField="Region"></dxi-item>
63-
<dxi-item dataField="PostalCode"></dxi-item>
64-
<dxi-item dataField="Country"></dxi-item>
65-
<dxi-item dataField="Phone"></dxi-item>
72+
<dxi-form-item dataField="Address"></dxi-form-item>
73+
<dxi-form-item dataField="City"></dxi-form-item>
74+
<dxi-form-item dataField="Region"></dxi-form-item>
75+
<dxi-form-item dataField="PostalCode"></dxi-form-item>
76+
<dxi-form-item dataField="Country"></dxi-form-item>
77+
<dxi-form-item dataField="Phone"></dxi-form-item>
6678

6779
<div *dxTemplate="let item of 'formItem'">
6880
<span>{{ item.editorOptions.value }}</span>

‎apps/demos/Demos/DataGrid/Appearance/Angular/app/app.component.html‎

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,29 @@
88
[showBorders]="true"
99
[rowAlternationEnabled]="true"
1010
>
11-
<dxi-column dataField="Prefix" [width]="80" caption="Title"></dxi-column>
12-
<dxi-column dataField="FirstName"></dxi-column>
13-
<dxi-column dataField="LastName"></dxi-column>
14-
<dxi-column dataField="City"></dxi-column>
15-
<dxi-column dataField="State"></dxi-column>
16-
<dxi-column dataField="Position" [width]="130"></dxi-column>
17-
<dxi-column dataField="BirthDate" [width]="100" dataType="date"></dxi-column>
18-
<dxi-column dataField="HireDate" [width]="100" dataType="date"></dxi-column>
11+
<dxi-data-grid-column
12+
dataField="Prefix"
13+
[width]="80"
14+
caption="Title"
15+
></dxi-data-grid-column>
16+
<dxi-data-grid-column dataField="FirstName"></dxi-data-grid-column>
17+
<dxi-data-grid-column dataField="LastName"></dxi-data-grid-column>
18+
<dxi-data-grid-column dataField="City"></dxi-data-grid-column>
19+
<dxi-data-grid-column dataField="State"></dxi-data-grid-column>
20+
<dxi-data-grid-column
21+
dataField="Position"
22+
[width]="130"
23+
></dxi-data-grid-column>
24+
<dxi-data-grid-column
25+
dataField="BirthDate"
26+
[width]="100"
27+
dataType="date"
28+
></dxi-data-grid-column>
29+
<dxi-data-grid-column
30+
dataField="HireDate"
31+
[width]="100"
32+
dataType="date"
33+
></dxi-data-grid-column>
1934
</dx-data-grid>
2035

2136
<div class="options">

‎apps/demos/Demos/DataGrid/AutoPopulatedColumns/Angular/app/app.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,5 @@
44
keyExpr="OrderNumber"
55
[showBorders]="true"
66
>
7-
<dxo-pager [visible]="true"></dxo-pager>
7+
<dxo-data-grid-pager [visible]="true"></dxo-data-grid-pager>
88
</dx-data-grid>

‎apps/demos/Demos/DataGrid/BatchEditing/Angular/app/app.component.html‎

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,40 @@
55
keyExpr="ID"
66
[showBorders]="true"
77
>
8-
<dxo-paging [enabled]="false"></dxo-paging>
9-
<dxo-editing
8+
<dxo-data-grid-paging [enabled]="false"></dxo-data-grid-paging>
9+
<dxo-data-grid-editing
1010
mode="batch"
1111
[allowUpdating]="true"
1212
[allowAdding]="true"
1313
[allowDeleting]="true"
1414
[selectTextOnEditStart]="selectTextOnEditStart"
1515
[startEditAction]="startEditAction"
1616
>
17-
</dxo-editing>
17+
</dxo-data-grid-editing>
1818

19-
<dxi-column dataField="Prefix" caption="Title" [width]="70"></dxi-column>
20-
<dxi-column dataField="FirstName"></dxi-column>
21-
<dxi-column dataField="LastName"></dxi-column>
22-
<dxi-column dataField="Position" [width]="170"></dxi-column>
23-
<dxi-column dataField="StateID" caption="State" [width]="125">
24-
<dxo-lookup [dataSource]="states" displayExpr="Name" valueExpr="ID">
25-
</dxo-lookup>
26-
</dxi-column>
27-
<dxi-column dataField="BirthDate" dataType="date"></dxi-column>
19+
<dxi-data-grid-column
20+
dataField="Prefix"
21+
caption="Title"
22+
[width]="70"
23+
></dxi-data-grid-column>
24+
<dxi-data-grid-column dataField="FirstName"></dxi-data-grid-column>
25+
<dxi-data-grid-column dataField="LastName"></dxi-data-grid-column>
26+
<dxi-data-grid-column
27+
dataField="Position"
28+
[width]="170"
29+
></dxi-data-grid-column>
30+
<dxi-data-grid-column dataField="StateID" caption="State" [width]="125">
31+
<dxo-data-grid-lookup
32+
[dataSource]="states"
33+
displayExpr="Name"
34+
valueExpr="ID"
35+
>
36+
</dxo-data-grid-lookup>
37+
</dxi-data-grid-column>
38+
<dxi-data-grid-column
39+
dataField="BirthDate"
40+
dataType="date"
41+
></dxi-data-grid-column>
2842
</dx-data-grid>
2943

3044
<div class="options">

‎apps/demos/Demos/DataGrid/BatchUpdateRequest/Angular/app/app.component.html‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,24 @@
66
[repaintChangesOnly]="true"
77
(onSaving)="onSaving($event)"
88
>
9-
<dxo-editing
9+
<dxo-data-grid-editing
1010
mode="batch"
1111
[allowAdding]="true"
1212
[allowDeleting]="true"
1313
[allowUpdating]="true"
14-
></dxo-editing>
15-
<dxo-pager [visible]="true"></dxo-pager>
16-
<dxi-column dataField="OrderID" [allowEditing]="false"></dxi-column>
17-
<dxi-column dataField="ShipName"></dxi-column>
18-
<dxi-column dataField="ShipCountry"></dxi-column>
19-
<dxi-column dataField="ShipCity"></dxi-column>
20-
<dxi-column dataField="ShipAddress"></dxi-column>
21-
<dxi-column dataField="OrderDate" dataType="date"></dxi-column>
22-
<dxi-column dataField="Freight"></dxi-column>
14+
></dxo-data-grid-editing>
15+
<dxo-data-grid-pager [visible]="true"></dxo-data-grid-pager>
16+
<dxi-data-grid-column
17+
dataField="OrderID"
18+
[allowEditing]="false"
19+
></dxi-data-grid-column>
20+
<dxi-data-grid-column dataField="ShipName"></dxi-data-grid-column>
21+
<dxi-data-grid-column dataField="ShipCountry"></dxi-data-grid-column>
22+
<dxi-data-grid-column dataField="ShipCity"></dxi-data-grid-column>
23+
<dxi-data-grid-column dataField="ShipAddress"></dxi-data-grid-column>
24+
<dxi-data-grid-column
25+
dataField="OrderDate"
26+
dataType="date"
27+
></dxi-data-grid-column>
28+
<dxi-data-grid-column dataField="Freight"></dxi-data-grid-column>
2329
</dx-data-grid>

‎apps/demos/Demos/DataGrid/CascadingLookups/Angular/app/app.component.html‎

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,27 +6,35 @@
66
[showBorders]="true"
77
(onEditorPreparing)="onEditorPreparing($event)"
88
>
9-
<dxo-editing mode="row" [allowUpdating]="true" [allowAdding]="true">
10-
</dxo-editing>
9+
<dxo-data-grid-editing
10+
mode="row"
11+
[allowUpdating]="true"
12+
[allowAdding]="true"
13+
>
14+
</dxo-data-grid-editing>
1115

12-
<dxi-column dataField="FirstName"></dxi-column>
13-
<dxi-column dataField="LastName"></dxi-column>
14-
<dxi-column dataField="Position"></dxi-column>
15-
<dxi-column
16+
<dxi-data-grid-column dataField="FirstName"></dxi-data-grid-column>
17+
<dxi-data-grid-column dataField="LastName"></dxi-data-grid-column>
18+
<dxi-data-grid-column dataField="Position"></dxi-data-grid-column>
19+
<dxi-data-grid-column
1620
dataField="StateID"
1721
caption="State"
1822
[setCellValue]="setStateValue"
1923
>
20-
<dxo-lookup [dataSource]="states" valueExpr="ID" displayExpr="Name">
21-
</dxo-lookup>
22-
</dxi-column>
23-
<dxi-column dataField="CityID" caption="City">
24-
<dxo-lookup
24+
<dxo-data-grid-lookup
25+
[dataSource]="states"
26+
valueExpr="ID"
27+
displayExpr="Name"
28+
>
29+
</dxo-data-grid-lookup>
30+
</dxi-data-grid-column>
31+
<dxi-data-grid-column dataField="CityID" caption="City">
32+
<dxo-data-grid-lookup
2533
[dataSource]="getFilteredCities"
2634
valueExpr="ID"
2735
displayExpr="Name"
2836
>
29-
</dxo-lookup>
30-
</dxi-column>
37+
</dxo-data-grid-lookup>
38+
</dxi-data-grid-column>
3139
</dx-data-grid>
3240
</div>

‎apps/demos/Demos/DataGrid/Cell/Angular/app/app.component.html‎

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,35 @@
66
[showColumnLines]="false"
77
[showBorders]="true"
88
>
9-
<dxo-sorting mode="none"></dxo-sorting>
10-
<dxo-pager [visible]="true"></dxo-pager>
11-
<dxo-paging [pageSize]="10"></dxo-paging>
12-
<dxi-column dataField="date" [width]="110" dataType="date"></dxi-column>
13-
<dxi-column caption="Open" cellTemplate="diffCellTemplate"></dxi-column>
14-
<dxi-column caption="Close" cellTemplate="diffCellTemplate"></dxi-column>
15-
<dxi-column
9+
<dxo-data-grid-sorting mode="none"></dxo-data-grid-sorting>
10+
<dxo-data-grid-pager [visible]="true"></dxo-data-grid-pager>
11+
<dxo-data-grid-paging [pageSize]="10"></dxo-data-grid-paging>
12+
<dxi-data-grid-column
13+
dataField="date"
14+
[width]="110"
15+
dataType="date"
16+
></dxi-data-grid-column>
17+
<dxi-data-grid-column
18+
caption="Open"
19+
cellTemplate="diffCellTemplate"
20+
></dxi-data-grid-column>
21+
<dxi-data-grid-column
22+
caption="Close"
23+
cellTemplate="diffCellTemplate"
24+
></dxi-data-grid-column>
25+
<dxi-data-grid-column
1626
caption="Dynamics"
1727
[minWidth]="320"
1828
cellTemplate="chartCellTemplate"
19-
></dxi-column>
20-
<dxi-column caption="High" cellTemplate="diffCellTemplate"></dxi-column>
21-
<dxi-column caption="Low" cellTemplate="diffCellTemplate"></dxi-column>
29+
></dxi-data-grid-column>
30+
<dxi-data-grid-column
31+
caption="High"
32+
cellTemplate="diffCellTemplate"
33+
></dxi-data-grid-column>
34+
<dxi-data-grid-column
35+
caption="Low"
36+
cellTemplate="diffCellTemplate"
37+
></dxi-data-grid-column>
2238

2339
<div *dxTemplate="let d of 'chartCellTemplate'">
2440
<div class="chart-cell">
@@ -32,8 +48,8 @@
3248
maxColor="#2ab71b"
3349
[pointSize]="6"
3450
>
35-
<dxo-size [width]="290" [height]="40"></dxo-size>
36-
<dxo-tooltip [enabled]="false"></dxo-tooltip>
51+
<dxo-sparkline-size [width]="290" [height]="40"></dxo-sparkline-size>
52+
<dxo-sparkline-tooltip [enabled]="false"></dxo-sparkline-tooltip>
3753
</dx-sparkline>
3854
</div>
3955
</div>

0 commit comments

Comments
 (0)