TreeView: update VirtualMode demo to use NetCore endpoints (DevExpress#31071)

Co-authored-by: alexlavrov <[email protected]>

Author: pharret31

apps/demos/Demos/TreeView/VirtualMode/Angular/app/app.component.html

@@ -1,9 +1,10 @@
 <dx-tree-view
   [dataSource]="dataSource"
   dataStructure="plain"
-  keyExpr="Id"
-  displayExpr="Name"
+  keyExpr="ID"
+  displayExpr="Text"
   parentIdExpr="CategoryId"
   hasItemsExpr="IsGroup"
+  [rootValue]="null"
   [virtualModeEnabled]="true"
 ></dx-tree-view>

apps/demos/Demos/TreeView/VirtualMode/Angular/app/app.component.ts

@@ -2,7 +2,7 @@ import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { DxTreeViewModule } from 'devextreme-angular';
-import { DataSource, ODataStore } from 'devextreme-angular/common/data';
+import * as AspNetData from 'devextreme-aspnet-data-nojquery';
 
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
@@ -19,11 +19,9 @@ if (window && window.config?.packageConfigPaths) {
   templateUrl: `.${modulePrefix}/app.component.html`,
 })
 export class AppComponent {
-  dataSource = new DataSource({
-    store: new ODataStore({
-      version: 2,
-      url: 'https://js.devexpress.com/Demos/WidgetsGallery/odata/HierarchicalItems',
-    }),
+  dataSource = AspNetData.createStore({
+    loadUrl: 'https://js.devexpress.com/Demos/NetCore/api/TreeViewPlainData',
+    key: 'ID',
   });
 }
 

apps/demos/Demos/TreeView/VirtualMode/React/App.tsx

@@ -1,24 +1,23 @@
 import React from 'react';
 import TreeView from 'devextreme-react/tree-view';
 
-import { DataSource, ODataStore } from 'devextreme-react/common/data';
+import AspNetData from 'devextreme-aspnet-data-nojquery';
 
-const dataSource = new DataSource({
-  store: new ODataStore({
-    version: 2,
-    url: 'https://js.devexpress.com/Demos/WidgetsGallery/odata/HierarchicalItems',
-  }),
+const dataSource = AspNetData.createStore({
+  loadUrl: 'https://js.devexpress.com/Demos/NetCore/api/TreeViewPlainData',
+  key: 'ID',
 });
 const App = () => (
   <React.Fragment>
     <TreeView
       dataSource={dataSource}
       dataStructure="plain"
-      keyExpr="Id"
-      displayExpr="Name"
+      keyExpr="ID"
+      displayExpr="Text"
       parentIdExpr="CategoryId"
       hasItemsExpr="IsGroup"
       virtualModeEnabled={true}
+      rootValue={null}
     />
   </React.Fragment>
 );

apps/demos/Demos/TreeView/VirtualMode/ReactJs/App.js

@@ -1,23 +1,22 @@
 import React from 'react';
 import TreeView from 'devextreme-react/tree-view';
-import { DataSource, ODataStore } from 'devextreme-react/common/data';
+import AspNetData from 'devextreme-aspnet-data-nojquery';
 
-const dataSource = new DataSource({
-  store: new ODataStore({
-    version: 2,
-    url: 'https://js.devexpress.com/Demos/WidgetsGallery/odata/HierarchicalItems',
-  }),
+const dataSource = AspNetData.createStore({
+  loadUrl: 'https://js.devexpress.com/Demos/NetCore/api/TreeViewPlainData',
+  key: 'ID',
 });
 const App = () => (
   <React.Fragment>
     <TreeView
       dataSource={dataSource}
       dataStructure="plain"
-      keyExpr="Id"
-      displayExpr="Name"
+      keyExpr="ID"
+      displayExpr="Text"
       parentIdExpr="CategoryId"
       hasItemsExpr="IsGroup"
       virtualModeEnabled={true}
+      rootValue={null}
     />
   </React.Fragment>
 );

apps/demos/Demos/TreeView/VirtualMode/Vue/App.vue

@@ -4,21 +4,20 @@
       :data-source="dataSource"
       :virtual-mode-enabled="true"
       data-structure="plain"
-      key-expr="Id"
-      display-expr="Name"
+      key-expr="ID"
+      display-expr="Text"
       parent-id-expr="CategoryId"
       has-items-expr="IsGroup"
+      :root-value="null"
     />
   </div>
 </template>
 <script setup lang="ts">
-import { DataSource, ODataStore } from 'devextreme-vue/common/data';
 import DxTreeView from 'devextreme-vue/tree-view';
+import { createStore } from 'devextreme-aspnet-data-nojquery';
 
-const dataSource = new DataSource({
-  store: new ODataStore({
-    version: 2,
-    url: 'https://js.devexpress.com/Demos/WidgetsGallery/odata/HierarchicalItems',
-  }),
+const dataSource = createStore({
+  loadUrl: 'https://js.devexpress.com/Demos/NetCore/api/TreeViewPlainData',
+  key: 'ID',
 });
 </script>

apps/demos/Demos/TreeView/VirtualMode/jQuery/index.html

@@ -8,6 +8,7 @@
     <script src="../../../../node_modules/jquery/dist/jquery.min.js"></script>
     <link rel="stylesheet" type="text/css" href="../../../../node_modules/devextreme-dist/css/dx.light.css" />
     <script src="../../../../node_modules/devextreme-dist/js/dx.all.js"></script>
+    <script src="../../../../node_modules/devextreme-aspnet-data/js/dx.aspnet.data.js"></script>
     <script src="data.js"></script>
     <script src="index.js"></script>
   </head>

apps/demos/Demos/TreeView/VirtualMode/jQuery/index.js

@@ -1,16 +1,15 @@
 $(() => {
   $('#simple-treeview').dxTreeView({
-    dataSource: new DevExpress.data.DataSource({
-      store: new DevExpress.data.ODataStore({
-        version: 2,
-        url: 'https://js.devexpress.com/Demos/WidgetsGallery/odata/HierarchicalItems',
-      }),
+    dataSource: DevExpress.data.AspNet.createStore({
+      loadUrl: 'https://js.devexpress.com/Demos/NetCore/api/TreeViewPlainData',
+      key: 'ID',
     }),
     dataStructure: 'plain',
-    keyExpr: 'Id',
-    displayExpr: 'Name',
+    keyExpr: 'ID',
+    displayExpr: 'Text',
     parentIdExpr: 'CategoryId',
     hasItemsExpr: 'IsGroup',
     virtualModeEnabled: true,
+    rootValue: null,
   });
 });

apps/demos/menuMeta.json

@@ -5738,6 +5738,10 @@
                 "Title": "Virtual Mode",
                 "Name": "VirtualMode",
                 "Widget": "TreeView",
+                "Modules": "devextreme-aspnet-data-nojquery",
+                "MvcAdditionalFiles": [
+                  "/Controllers/ApiControllers/TreeViewPlainDataController.cs"
+                ],
                 "DemoType": "Web"
               }
             ]