Skip to content

Commit 85bc482

Browse files
pharret31pharret31
authored
Autocomplete: update Overview demo to use NetCore endpoint (#31215)
1 parent a5482cb commit 85bc482

File tree

8 files changed

+40
-47
lines changed

8 files changed

+40
-47
lines changed

‎apps/demos/Demos/Autocomplete/Overview/Angular/app/app.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,13 +54,13 @@
5454
<div class="dx-field-value">
5555
<dx-autocomplete
5656
placeholder="Type state name..."
57-
valueExpr="State_Long"
57+
valueExpr="Name"
5858
[dataSource]="states"
5959
[(value)]="state"
6060
(onValueChanged)="updateEmployeeInfo()"
6161
>
6262
<div *dxTemplate="let item of 'item'">
63-
<span>{{ item.State_Long }} ({{ item.State_Short }})</span>
63+
<span>{{ item.Name }} ({{ item.Short }})</span>
6464
</div>
6565
</dx-autocomplete>
6666
</div>

‎apps/demos/Demos/Autocomplete/Overview/Angular/app/app.component.ts‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@ import { BrowserModule } from '@angular/platform-browser';
33
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
44
import { HttpClient, HttpClientModule, HttpParams } from '@angular/common/http';
55
import { lastValueFrom } from 'rxjs';
6-
import { DxAutocompleteModule, DxTemplateModule } from 'devextreme-angular';
7-
import { CustomStore, ODataStore } from 'devextreme-angular/common/data';
6+
import { DxAutocompleteModule } from 'devextreme-angular';
7+
import { CustomStore } from 'devextreme-angular/common/data';
88
import { Service } from './app.service';
9+
import * as AspNetData from 'devextreme-aspnet-data-nojquery';
910

1011
if (!/localhost/.test(document.location.host)) {
1112
enableProdMode();
@@ -35,7 +36,7 @@ export class AppComponent {
3536

3637
positions: string[];
3738

38-
states: ODataStore;
39+
states: CustomStore;
3940

4041
clientsStore: CustomStore;
4142

@@ -70,14 +71,12 @@ export class AppComponent {
7071
.then(({ data }: { data: Record<string, unknown>[] }) => ({
7172
data,
7273
}))
73-
.catch((error) => { throw 'Data Loading Error'; });
74+
.catch(() => { throw 'Data Loading Error'; });
7475
},
7576
});
76-
this.states = new ODataStore({
77-
version: 2,
78-
url: 'https://js.devexpress.com/Demos/DevAV/odata/States?$select=Sate_ID,State_Long,State_Short',
79-
key: 'Sate_ID',
80-
keyType: 'Int32',
77+
this.states = AspNetData.createStore({
78+
loadUrl: 'https://js.devexpress.com/Demos/NetCore/api/DataGridStatesLookup',
79+
key: 'ID',
8180
});
8281
this.names = service.getNames();
8382
this.surnames = service.getSurnames();
@@ -99,7 +98,6 @@ export class AppComponent {
9998
imports: [
10099
BrowserModule,
101100
DxAutocompleteModule,
102-
DxTemplateModule,
103101
HttpClientModule,
104102
],
105103
declarations: [AppComponent],

‎apps/demos/Demos/Autocomplete/Overview/React/App.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React, { useCallback, useState } from 'react';
2-
import { ODataStore, CustomStore } from 'devextreme-react/common/data';
2+
import { CustomStore } from 'devextreme-react/common/data';
33
import { Autocomplete, type AutocompleteTypes } from 'devextreme-react/autocomplete';
44
import 'whatwg-fetch';
55
import { names, surnames, positions } from './data.ts';
6+
import AspNetData from 'devextreme-aspnet-data-nojquery';
67

78
function isNotEmpty(value: string) {
89
return value !== undefined && value !== null && value !== '';
@@ -11,11 +12,9 @@ function isNotEmpty(value: string) {
1112
const positionLabel = { 'aria-label': 'Position' };
1213
const position = positions[0];
1314

14-
const states = new ODataStore({
15-
version: 2,
16-
url: 'https://js.devexpress.com/Demos/DevAV/odata/States?$select=Sate_ID,State_Long,State_Short',
17-
key: 'Sate_ID',
18-
keyType: 'Int32',
15+
const states = AspNetData.createStore({
16+
loadUrl: 'https://js.devexpress.com/Demos/NetCore/api/DataGridStatesLookup',
17+
key: 'ID',
1918
});
2019

2120
const clientsStore = new CustomStore({
@@ -42,7 +41,7 @@ const clientsStore = new CustomStore({
4241

4342
const renderState = (data) => (
4443
<span>
45-
{data.State_Long} ({data.State_Short})
44+
{data.Name} ({data.Short})
4645
</span>
4746
);
4847

@@ -131,7 +130,7 @@ function App() {
131130
<Autocomplete
132131
dataSource={states}
133132
value={state}
134-
valueExpr="State_Long"
133+
valueExpr="Name"
135134
onValueChanged={handleStateChange}
136135
placeholder="Type state name..."
137136
itemRender={renderState}

‎apps/demos/Demos/Autocomplete/Overview/ReactJs/App.js‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,18 @@
11
import React, { useCallback, useState } from 'react';
2-
import { ODataStore, CustomStore } from 'devextreme-react/common/data';
2+
import { CustomStore } from 'devextreme-react/common/data';
33
import { Autocomplete } from 'devextreme-react/autocomplete';
44
import 'whatwg-fetch';
5+
import AspNetData from 'devextreme-aspnet-data-nojquery';
56
import { names, surnames, positions } from './data.js';
67

78
function isNotEmpty(value) {
89
return value !== undefined && value !== null && value !== '';
910
}
1011
const positionLabel = { 'aria-label': 'Position' };
1112
const position = positions[0];
12-
const states = new ODataStore({
13-
version: 2,
14-
url: 'https://js.devexpress.com/Demos/DevAV/odata/States?$select=Sate_ID,State_Long,State_Short',
15-
key: 'Sate_ID',
16-
keyType: 'Int32',
13+
const states = AspNetData.createStore({
14+
loadUrl: 'https://js.devexpress.com/Demos/NetCore/api/DataGridStatesLookup',
15+
key: 'ID',
1716
});
1817
const clientsStore = new CustomStore({
1918
key: 'Value',
@@ -40,7 +39,7 @@ const clientsStore = new CustomStore({
4039
});
4140
const renderState = (data) => (
4241
<span>
43-
{data.State_Long} ({data.State_Short})
42+
{data.Name} ({data.Short})
4443
</span>
4544
);
4645
function App() {
@@ -121,7 +120,7 @@ function App() {
121120
<Autocomplete
122121
dataSource={states}
123122
value={state}
124-
valueExpr="State_Long"
123+
valueExpr="Name"
125124
onValueChanged={handleStateChange}
126125
placeholder="Type state name..."
127126
itemRender={renderState}

‎apps/demos/Demos/Autocomplete/Overview/Vue/App.vue‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -54,13 +54,13 @@
5454
<DxAutocomplete
5555
:data-source="states"
5656
v-model:value="state"
57-
value-expr="State_Long"
57+
value-expr="Name"
5858
placeholder="Type state name..."
5959
item-template="stateTemplate"
6060
@value-changed="updateEmployeeInfo"
6161
>
6262
<template #stateTemplate="{ data }">
63-
<span>{{ data.State_Long }} ({{ data.State_Short }})</span>
63+
<span>{{ data.Name }} ({{ data.Short }})</span>
6464
</template>
6565
</DxAutocomplete>
6666
</div>
@@ -96,18 +96,15 @@
9696
</template>
9797
<script setup lang="ts">
9898
import { ref } from 'vue';
99-
import { ODataStore, CustomStore, type LoadOptions } from 'devextreme-vue/common/data';
99+
import { CustomStore, type LoadOptions } from 'devextreme-vue/common/data';
100100
import { DxAutocomplete } from 'devextreme-vue/autocomplete';
101101
import 'whatwg-fetch';
102+
import { createStore } from 'devextreme-aspnet-data-nojquery';
102103
import { names, surnames, positions } from './data.ts';
103104
104-
105-
const statesStore = new ODataStore({
106-
version: 2,
107-
url:
108-
'https://js.devexpress.com/Demos/DevAV/odata/States?$select=Sate_ID,State_Long,State_Short',
109-
key: 'Sate_ID',
110-
keyType: 'Int32',
105+
const statesStore = createStore({
106+
loadUrl: 'https://js.devexpress.com/Demos/NetCore/api/DataGridStatesLookup',
107+
key: 'ID',
111108
});
112109
113110
const clientsCustomStore = new CustomStore({

‎apps/demos/Demos/Autocomplete/Overview/jQuery/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<script src="../../../../node_modules/jquery/dist/jquery.min.js"></script>
99
<link rel="stylesheet" type="text/css" href="../../../../node_modules/devextreme-dist/css/dx.light.css" />
1010
<script src="../../../../node_modules/devextreme-dist/js/dx.all.js"></script>
11+
<script src="../../../../node_modules/devextreme-aspnet-data/js/dx.aspnet.data.js"></script>
1112
<script src="data.js"></script>
1213
<link rel="stylesheet" type="text/css" href="styles.css" />
1314
<script src="index.js"></script>

‎apps/demos/Demos/Autocomplete/Overview/jQuery/index.js‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -32,16 +32,14 @@ $(() => {
3232
});
3333

3434
$('#state').dxAutocomplete({
35-
dataSource: new DevExpress.data.ODataStore({
36-
version: 2,
37-
url: 'https://js.devexpress.com/Demos/DevAV/odata/States?$select=Sate_ID,State_Long,State_Short',
38-
key: 'Sate_ID',
39-
keyType: 'Int32',
35+
dataSource: DevExpress.data.AspNet.createStore({
36+
loadUrl: 'https://js.devexpress.com/Demos/NetCore/api/DataGridStatesLookup',
37+
key: 'ID',
4038
}),
4139
placeholder: 'Type state name...',
42-
valueExpr: 'State_Long',
40+
valueExpr: 'Name',
4341
itemTemplate(data) {
44-
return $(`<div>${data.State_Long} (${data.State_Short})</div>`);
42+
return $(`<div>${data.Name} (${data.Short})</div>`);
4543
},
4644
onValueChanged(data) {
4745
state = data.value;

‎apps/demos/menuMeta.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4833,11 +4833,12 @@
48334833
"Title": "Overview",
48344834
"Name": "Overview",
48354835
"Widget": "Autocomplete",
4836-
"Modules": "whatwg-fetch",
4836+
"Modules": "whatwg-fetch,devextreme-aspnet-data-nojquery",
48374837
"MvcAdditionalFiles": [
48384838
"/Models/SampleData/Names.cs",
48394839
"/Models/SampleData/Surnames.cs",
4840-
"/Models/SampleData/Cities.cs"
4840+
"/Models/SampleData/Cities.cs",
4841+
"/Controllers/ApiControllers/DataGridStatesLookupController.cs"
48414842
],
48424843
"ShowOnMainPage": true
48434844
}

0 commit comments

Comments
 (0)