Documentation(1023562): Update sample

RemoteSaveAdaptor/ClientApp/angular.json

@@ -3,7 +3,7 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "UrlAdaptor": {
+    "ClientApp": {
       "projectType": "application",
       "schematics": {
         "@schematics/angular:application": {
@@ -30,7 +30,6 @@
               "src/assets"
             ],
             "styles": [
-              "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "src/styles.css"
             ],
             "scripts": []
@@ -72,10 +71,10 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "UrlAdaptor:build:production"
+              "buildTarget": "ClientApp:build:production"
             },
             "development": {
-              "browserTarget": "UrlAdaptor:build:development",
+              "buildTarget": "ClientApp:build:development",
               "proxyConfig": "proxy.conf.js"
             }
           },
@@ -84,7 +83,7 @@
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "UrlAdaptor:build"
+            "buildTarget": "ClientApp:build"
           }
         },
         "test": {
@@ -132,7 +131,7 @@
       }
     }
   },
-  "defaultProject": "UrlAdaptor",
+  "defaultProject": "ClientApp",
   "cli": {
     "analytics": "71fc2fe0-4676-40bd-a865-1f8b7970ddb4"
   }

RemoteSaveAdaptor/ClientApp/package.json

@@ -4,7 +4,7 @@
   "scripts": {
     "ng": "ng",
     "prestart": "node aspnetcore-https",
-    "start": "run-script-os",
+    "start": "ng serve",
     "start:windows": "ng serve --port 44421 --ssl --ssl-cert \"%APPDATA%\\ASP.NET\\https\\%npm_package_name%.pem\" --ssl-key \"%APPDATA%\\ASP.NET\\https\\%npm_package_name%.key\"",
     "start:default": "ng serve --port 44421 --ssl --ssl-cert \"$HOME/.aspnet/https/${npm_package_name}.pem\" --ssl-key \"$HOME/.aspnet/https/${npm_package_name}.key\"",
     "build": "ng build",
@@ -14,43 +14,32 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^15.2.8",
-    "@angular/common": "^15.2.8",
-    "@angular/compiler": "^15.2.8",
-    "@angular/core": "^15.2.8",
-    "@angular/forms": "^15.2.8",
-    "@angular/platform-browser": "^15.2.8",
-    "@angular/platform-browser-dynamic": "^15.2.8",
-    "@angular/platform-server": "^15.2.8",
-    "@angular/router": "^15.2.8",
-    "@syncfusion/ej2-angular-grids": "24.2.3",
-    "@syncfusion/ej2-angular-treegrid": "24.2.3",
-    "bootstrap": "^5.2.3",
+    "@angular/animations": "^20.0.0",
+    "@angular/common": "^20.0.0",
+    "@angular/compiler": "^20.0.0",
+    "@angular/core": "^20.0.0",
+    "@angular/forms": "^20.0.0",
+    "@angular/platform-browser": "^20.0.0",
+    "@angular/platform-browser-dynamic": "^20.0.0",
+    "@angular/platform-server": "^20.0.0",
+    "@angular/router": "^20.0.0",
+    "@syncfusion/ej2-angular-grids": "*",
+    "@syncfusion/ej2-angular-treegrid": "*",
     "jquery": "^3.6.4",
-    "oidc-client": "^1.11.5",
-    "popper.js": "^1.16.0",
-    "run-script-os": "^1.1.6",
-    "rxjs": "~7.8.1",
-    "tslib": "^2.5.0",
-    "zone.js": "~0.13.0"
+    "rxjs": "~7.8.0",
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.2.7",
-    "@angular/cli": "^15.2.7",
-    "@angular/compiler-cli": "^15.2.8",
-    "@types/jasmine": "~4.3.1",
-    "@types/jasminewd2": "~2.0.10",
-    "@types/node": "^18.16.3",
-    "jasmine-core": "~4.6.0",
-    "karma": "~6.4.2",
+    "@angular-devkit/build-angular": "^20.3.24",
+    "@angular/cli": "^20.0.0",
+    "@angular/compiler-cli": "^20.0.0",
+    "@types/jasmine": "~5.1.0",
+    "jasmine-core": "~5.1.0",
+    "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "^2.0.0",
-    "typescript": "~4.9.5"
-  },
-  "overrides": {
-    "autoprefixer": "10.4.5",
-    "webpack": "5.81.0"
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "typescript": "~5.8.2"
   }
 }

RemoteSaveAdaptor/ClientApp/src/app/app.component.ts

@@ -2,10 +2,25 @@ import { Component, ViewChild } from '@angular/core';
 import { TreeGridComponent, ToolbarItems, EditSettingsModel } from '@syncfusion/ej2-angular-treegrid';
 import { DataManager, RemoteSaveAdaptor } from '@syncfusion/ej2-data';
 import { HttpClient } from '@angular/common/http';
+
+import { HttpClientModule } from '@angular/common/http';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { FormsModule } from '@angular/forms';
 import { Ajax } from '@syncfusion/ej2-base';
+import { FilterService, GridAllModule, SortService,  GroupService } from '@syncfusion/ej2-angular-grids';
+
+import { RowDDService, ToolbarService, TreeGridAllModule, EditService, PageService } from '@syncfusion/ej2-angular-treegrid';
+
 
 @Component({
   selector: 'app-root',
+   providers: [EditService, SortService, ToolbarService, RowDDService, FilterService, PageService],
+    standalone:true,
+    imports: [
+    FormsModule,
+    GridAllModule, TreeGridAllModule,
+  ],
   templateUrl: './app.component.html'
 })
 export class AppComponent {

RemoteSaveAdaptor/ClientApp/src/app/app.module.ts

@@ -1,13 +1,8 @@
-import { BrowserModule } from '@angular/platform-browser';
+
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { HttpClientModule } from '@angular/common/http';
 import { RouterModule } from '@angular/router';
 
 import { AppComponent } from './app.component';
-import { FilterService, GridAllModule, SortService,  GroupService } from '@syncfusion/ej2-angular-grids';
-
-import { RowDDService, ToolbarService, TreeGridAllModule, EditService, PageService } from '@syncfusion/ej2-angular-treegrid';
 
 @NgModule({
   declarations: [

RemoteSaveAdaptor/ClientApp/src/index.html

@@ -7,6 +7,7 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
   </head>
   <body>
 

RemoteSaveAdaptor/ClientApp/src/main.ts

@@ -1,20 +1,10 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
-
-export function getBaseUrl() {
-  return document.getElementsByTagName('base')[0].href;
-}
-
-const providers = [
-  { provide: 'BASE_URL', useFactory: getBaseUrl, deps: [] }
-];
-
-if (environment.production) {
-  enableProdMode();
-}
-
-platformBrowserDynamic(providers).bootstrapModule(AppModule)
-  .catch(err => console.log(err));
+import { bootstrapApplication } from '@angular/platform-browser';
+import { importProvidersFrom } from '@angular/core';
+import { AppComponent } from './app/app.component';
+import { HttpClientModule } from '@angular/common/http';
+import 'zone.js';
+
+bootstrapApplication(AppComponent, {
+  providers: [importProvidersFrom(HttpClientModule)]
+})
+  .catch((err) => console.error(err));

RemoteSaveAdaptor/ClientApp/src/styles.css

@@ -1,10 +1,10 @@
-@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-angular-treegrid/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-calendars/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-navigations/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-angular-treegrid/styles/material3.css';

RemoteSaveAdaptor/URLAdaptor.csproj

@@ -14,7 +14,7 @@
   <ItemGroup>
     <PackageReference Include="Microsoft.AspNetCore.Mvc.NewtonsoftJson" Version="7.0.0" />
     <PackageReference Include="Microsoft.AspNetCore.SpaProxy" Version="7.0.10" />
-    <PackageReference Include="Syncfusion.EJ2.AspNet.Core" Version="25.2.5" />
+    <PackageReference Include="Syncfusion.EJ2.AspNet.Core" Version="33.2.3" />
   </ItemGroup>
 
   <ItemGroup>