merge

Author: GoodDayForSurf

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

@@ -4,8 +4,7 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { HttpClient, HttpClientModule, HttpParams } from '@angular/common/http';
 import { lastValueFrom } from 'rxjs';
 import { DxAutocompleteModule, DxTemplateModule } from 'devextreme-angular';
-import CustomStore from 'devextreme/data/custom_store';
-import ODataStore from 'devextreme/data/odata/store';
+import { CustomStore, ODataStore } from 'devextreme-angular/common/data';
 import { Service } from './app.service';
 
 if (!/localhost/.test(document.location.host)) {

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

@@ -1,7 +1,6 @@
 import React, { useCallback, useState } from 'react';
-import ODataStore from 'devextreme/data/odata/store';
+import { ODataStore, CustomStore } from 'devextreme-react/common/data';
 import { Autocomplete, type AutocompleteTypes } from 'devextreme-react/autocomplete';
-import CustomStore from 'devextreme/data/custom_store';
 import 'whatwg-fetch';
 import { names, surnames, positions } from './data.ts';
 

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

@@ -1,7 +1,6 @@
 import React, { useCallback, useState } from 'react';
-import ODataStore from 'devextreme/data/odata/store';
+import { ODataStore, CustomStore } from 'devextreme-react/common/data';
 import { Autocomplete } from 'devextreme-react/autocomplete';
-import CustomStore from 'devextreme/data/custom_store';
 import 'whatwg-fetch';
 import { names, surnames, positions } from './data.js';
 

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

@@ -96,10 +96,8 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
-import ODataStore from 'devextreme/data/odata/store';
+import { ODataStore, CustomStore, type LoadOptions } from 'devextreme-vue/common/data';
 import { DxAutocomplete } from 'devextreme-vue/autocomplete';
-import { type LoadOptions } from 'devextreme-vue/common/data';
-import CustomStore from 'devextreme/data/custom_store';
 import 'whatwg-fetch';
 import { names, surnames, positions } from './data.ts';
 

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

@@ -94,7 +94,7 @@ $(() => {
   });
 
   function updateEmployeeInfo() {
-    let result = $.trim(`${firstName || ''} ${lastName || ''}`);
+    let result = `${firstName || ''} ${lastName || ''}`.trim();
 
     result += (result && position) ? (`, ${position}`) : position || '';
     result += (result && state) ? (`, ${state}`) : state || '';

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

@@ -0,0 +1,6 @@
+<dx-card-view id="cardView" [dataSource]="customers" keyExpr="ID">
+  <dxi-card-view-column
+    *ngFor="let column of columns"
+    [dataField]="column"
+  ></dxi-card-view-column>
+</dx-card-view>

apps/demos/Demos/CardView/CardTemplate/Angular/app/app.component.ts

@@ -0,0 +1,42 @@
+import { NgModule, Component, enableProdMode } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { DxCardViewModule } from 'devextreme-angular';
+import { Customer, Service } from './app.service';
+
+if (!/localhost/.test(document.location.host)) {
+  enableProdMode();
+}
+
+let modulePrefix = '';
+// @ts-ignore
+if (window && window.config?.packageConfigPaths) {
+  modulePrefix = '/app';
+}
+
+@Component({
+  selector: 'demo-app',
+  templateUrl: `.${modulePrefix}/app.component.html`,
+  providers: [Service],
+})
+export class AppComponent {
+  customers: Customer[];
+
+  columns = ['CompanyName', 'City', 'State', 'Phone', 'Fax'];
+
+  constructor(service: Service) {
+    this.customers = service.getCustomers();
+  }
+}
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    DxCardViewModule,
+  ],
+  declarations: [AppComponent],
+  bootstrap: [AppComponent],
+})
+export class AppModule { }
+
+platformBrowserDynamic().bootstrapModule(AppModule);

apps/demos/Demos/CardView/CardTemplate/Angular/app/app.service.ts

@@ -0,0 +1,129 @@
+import { Injectable } from '@angular/core';
+
+export interface Customer {
+  ID: number;
+  CompanyName: string;
+  Address: string;
+  City: string;
+  State: string;
+  Zipcode: number;
+  Phone: string;
+  Fax: string;
+}
+
+const customers: Customer[] = [{
+  ID: 1,
+  CompanyName: 'Super Mart of the West',
+  Address: '702 SW 8th Street',
+  City: 'Bentonville',
+  State: 'Arkansas',
+  Zipcode: 72716,
+  Phone: '(800) 555-2797',
+  Fax: '(800) 555-2171',
+}, {
+  ID: 2,
+  CompanyName: 'Electronics Depot',
+  Address: '2455 Paces Ferry Road NW',
+  City: 'Atlanta',
+  State: 'Georgia',
+  Zipcode: 30339,
+  Phone: '(800) 595-3232',
+  Fax: '(800) 595-3231',
+}, {
+  ID: 3,
+  CompanyName: 'K&S Music',
+  Address: '1000 Nicllet Mall',
+  City: 'Minneapolis',
+  State: 'Minnesota',
+  Zipcode: 55403,
+  Phone: '(612) 304-6073',
+  Fax: '(612) 304-6074',
+}, {
+  ID: 4,
+  CompanyName: "Tom's Club",
+  Address: '999 Lake Drive',
+  City: 'Issaquah',
+  State: 'Washington',
+  Zipcode: 98027,
+  Phone: '(800) 955-2292',
+  Fax: '(800) 955-2293',
+}, {
+  ID: 5,
+  CompanyName: 'E-Mart',
+  Address: '3333 Beverly Rd',
+  City: 'Hoffman Estates',
+  State: 'Illinois',
+  Zipcode: 60179,
+  Phone: '(847) 286-2500',
+  Fax: '(847) 286-2501',
+}, {
+  ID: 6,
+  CompanyName: 'Walters',
+  Address: '200 Wilmot Rd',
+  City: 'Deerfield',
+  State: 'Illinois',
+  Zipcode: 60015,
+  Phone: '(847) 940-2500',
+  Fax: '(847) 940-2501',
+}, {
+  ID: 7,
+  CompanyName: 'StereoShack',
+  Address: '400 Commerce S',
+  City: 'Fort Worth',
+  State: 'Texas',
+  Zipcode: 76102,
+  Phone: '(817) 820-0741',
+  Fax: '(817) 820-0742',
+}, {
+  ID: 8,
+  CompanyName: 'Circuit Town',
+  Address: '2200 Kensington Court',
+  City: 'Oak Brook',
+  State: 'Illinois',
+  Zipcode: 60523,
+  Phone: '(800) 955-2929',
+  Fax: '(800) 955-9392',
+}, {
+  ID: 9,
+  CompanyName: 'Premier Buy',
+  Address: '7601 Penn Avenue South',
+  City: 'Richfield',
+  State: 'Minnesota',
+  Zipcode: 55423,
+  Phone: '(612) 291-1000',
+  Fax: '(612) 291-2001',
+}, {
+  ID: 10,
+  CompanyName: 'ElectrixMax',
+  Address: '263 Shuman Blvd',
+  City: 'Naperville',
+  State: 'Illinois',
+  Zipcode: 60563,
+  Phone: '(630) 438-7800',
+  Fax: '(630) 438-7801',
+}, {
+  ID: 11,
+  CompanyName: 'Video Emporium',
+  Address: '1201 Elm Street',
+  City: 'Dallas',
+  State: 'Texas',
+  Zipcode: 75270,
+  Phone: '(214) 854-3000',
+  Fax: '(214) 854-3001',
+}, {
+  ID: 12,
+  CompanyName: 'Screen Shop',
+  Address: '1000 Lowes Blvd',
+  City: 'Mooresville',
+  State: 'North Carolina',
+  Zipcode: 28117,
+  Phone: '(800) 445-6937',
+  Fax: '(800) 445-6938',
+}];
+
+@Injectable()
+export class Service {
+  getCustomers() {
+    return customers;
+  }
+}

…ts/APIDisplayATooltip/Angular/index.html …CardView/CardTemplate/Angular/index.htmlapps/demos/Demos/Charts/APIDisplayATooltip/Angular/index.html renamed to apps/demos/Demos/CardView/CardTemplate/Angular/index.html apps/demos/Demos/Charts/APIDisplayATooltip/Angular/index.html renamed to apps/demos/Demos/CardView/CardTemplate/Angular/index.html

@@ -0,0 +1,16 @@
+import React from 'react';
+import CardView, { Column } from 'devextreme-react/card-view';
+import { customers } from './data.ts';
+
+const columns = ['CompanyName', 'City', 'State', 'Phone', 'Fax'];
+
+const App = () => (
+  <CardView
+    dataSource={customers}
+    keyExpr="ID"
+  >
+    { columns.map((column, index) => <Column dataField={column} key={index} />) }
+  </CardView>
+);
+
+export default App;