Merge pull request #589 from Syncfusion-Content/hotfix/hotfix-v26.2.4

SyncfusionBuild · web-flow · commit 6c0a62106cd1 · 2024-08-15T04:22:35.000+05:30
DOCINFRA-2341_merged_using_automation
diff --git a/ej2-angular/code-snippet/breadcrumb/navigations-cs2/src/app.component.ts b/ej2-angular/code-snippet/breadcrumb/navigations-cs2/src/app.component.ts
@@ -22,7 +22,7 @@ standalone: true,
                    <e-breadcrumb-item text="Home" url="https://ej2.syncfusion.com/documentation/introduction/"></e-breadcrumb-item>
                    <e-breadcrumb-item text="Getting" url="https://ej2.syncfusion.com/documentation/breadcrumb/getting-started"></e-breadcrumb-item>
                    <e-breadcrumb-item text="Icons" url="https://ej2.syncfusion.com/documentation/breadcrumb/icons"></e-breadcrumb-item>
-                   <e-breadcrumb-item text="Navigations" url="https://ej2.syncfusion.com/documentation/breadcrumb/navigations"></e-breadcrumb-item>
+                   <e-breadcrumb-item text="Navigations" url="https://ej2.syncfusion.com/documentation/breadcrumb/navigation"></e-breadcrumb-item>
                    <e-breadcrumb-item text="Overflow" url="https://ej2.syncfusion.com/documentation/breadcrumb/overflow"></e-breadcrumb-item>
                 </e-breadcrumb-items>
             </ejs-breadcrumb>
diff --git a/ej2-angular/code-snippet/breadcrumb/navigations-cs3/src/app.component.ts b/ej2-angular/code-snippet/breadcrumb/navigations-cs3/src/app.component.ts
@@ -22,7 +22,7 @@ standalone: true,
                    <e-breadcrumb-item text="Home" url="https://ej2.syncfusion.com/documentation/introduction/"></e-breadcrumb-item>
                    <e-breadcrumb-item text="Getting" url="https://ej2.syncfusion.com/documentation/breadcrumb/getting-started"></e-breadcrumb-item>
                    <e-breadcrumb-item text="Icons" url="https://ej2.syncfusion.com/documentation/breadcrumb/icons"></e-breadcrumb-item>
-                   <e-breadcrumb-item text="Navigations" url="https://ej2.syncfusion.com/documentation/breadcrumb/navigations"></e-breadcrumb-item>
+                   <e-breadcrumb-item text="Navigations" url="https://ej2.syncfusion.com/documentation/breadcrumb/navigation"></e-breadcrumb-item>
                    <e-breadcrumb-item text="Overflow" url="https://ej2.syncfusion.com/documentation/breadcrumb/overflow"></e-breadcrumb-item>
                 </e-breadcrumb-items>
             </ejs-breadcrumb>
diff --git a/ej2-angular/code-snippet/breadcrumb/navigations-cs4/src/app.component.ts b/ej2-angular/code-snippet/breadcrumb/navigations-cs4/src/app.component.ts
@@ -23,7 +23,7 @@ standalone: true,
                    <e-breadcrumb-item text="Home" url="https://ej2.syncfusion.com/documentation/introduction/"></e-breadcrumb-item>
                    <e-breadcrumb-item text="Getting" url="https://ej2.syncfusion.com/documentation/breadcrumb/getting-started"></e-breadcrumb-item>
                    <e-breadcrumb-item text="Icons" url="https://ej2.syncfusion.com/documentation/breadcrumb/icons"></e-breadcrumb-item>
-                   <e-breadcrumb-item text="Navigations" url="https://ej2.syncfusion.com/documentation/breadcrumb/navigations"></e-breadcrumb-item>
+                   <e-breadcrumb-item text="Navigations" url="https://ej2.syncfusion.com/documentation/breadcrumb/navigation"></e-breadcrumb-item>
                    <e-breadcrumb-item text="Overflow" url="https://ej2.syncfusion.com/documentation/breadcrumb/overflow"></e-breadcrumb-item>
                 </e-breadcrumb-items>
             </ejs-breadcrumb>
diff --git a/ej2-angular/code-snippet/pivot-grid/getting-started-cs291/src/app.component.ts b/ej2-angular/code-snippet/pivot-grid/getting-started-cs291/src/app.component.ts
@@ -21,7 +21,7 @@ standalone: true,
   selector: 'app-container',
   providers: [FieldListService],
   // specifies the template string for the pivot table component
-  template: `<div style="height: 480px;"><ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings [width]=width showFieldList='true' (dataBound)='ondataBound($event)'></ejs-pivotview></div><a id="save" class="btn btn-primary">Save</a><div class="fileUpload btn btn-primary"><span>Load</span><input id="files" type="file" class="upload" /></div>`,
+  template: `<div style="height: 480px;"><ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings [width]=width showFieldList='true'></ejs-pivotview></div><a id="save" class="btn btn-primary" (click)="saveData()">Save</a><div class="fileUpload btn btn-primary"><span>Load</span><input id="files" type="file" class="upload" (change)="readBlob($event)"/></div>`,
   styleUrls: ['./app.component.css']
 })
 
@@ -33,31 +33,6 @@ export class AppComponent {
     public pivotGridObj?: PivotView;
     public width?: string;
 
-    ondataBound(args: any) {
-       var dataSource = JSON.parse(this.pivotGridObj!.getPersistData()).dataSourceSettings.dataSource;
-        var a = document.getElementById('save') as HTMLElement ;
-        var mime_type = 'application/octet-stream'; // text/html, image/png, et c
-        a.setAttribute('download', 'pivot.JSON');
-        (a as any).href = 'data:'+ mime_type +';base64,'+ btoa(JSON.stringify(dataSource) || '');
-        (document.getElementById('files') as HTMLElement).addEventListener('change', this.readBlob, false);
-    }
-
-    readBlob(args: any) {
-        var files = (document.getElementById('load') as any).files;
-        var file = files[0];
-        var start = 0;
-        var stop = file.size - 1;
-        var reader = new FileReader();
-        var $this = this;
-        reader.onloadend = function(evt: any) {
-            if (evt!.target.readyState == FileReader.DONE) {
-                $this.pivotGridObj!.dataSourceSettings.dataSource = JSON.parse(evt.target.result);
-            }
-        };
-        var blob = file.slice(start, stop + 1);
-        reader.readAsBinaryString(blob);
-    }
-
     ngOnInit(): void {
         this.dataSourceSettings = {
             dataSource: Pivot_Data as IDataSet[],
@@ -72,6 +47,37 @@ export class AppComponent {
         };
         this.width = "100%";
     }
- }
+
+    saveData(): void {
+      if(this.pivotGridObj)
+      {
+      const dataSource = JSON.parse(this.pivotGridObj?.getPersistData()).dataSourceSettings;
+      const a: HTMLAnchorElement = document.createElement('a');
+      const mime_type = 'application/octet-stream';
+      a.setAttribute('download', 'pivot.JSON');
+      a.href = 'data:' + mime_type + ';base64,' + btoa(JSON.stringify(dataSource) || '');
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      }
+    }
+  
+    // Read and load data from JSON file
+    readBlob(event: Event): void {
+      const input = event.target as HTMLInputElement;
+      const file = input.files?.[0];
+      if (file) {
+        const reader = new FileReader();
+        reader.onloadend = (evt: ProgressEvent<FileReader>) => {
+          if (evt.target?.readyState === FileReader.DONE) {
+            const result = evt.target.result as string;
+            this.pivotGridObj!.dataSourceSettings = JSON.parse(result);
+          }
+        };
+        reader.readAsText(file);
+      }
+      input.value = '';
+    }
+  }
 
 
diff --git a/ej2-angular/range-slider/getting-started.md b/ej2-angular/range-slider/getting-started.md
@@ -12,6 +12,10 @@ domainurl: ##DomainURL##
 
 The Slider component is available in `@syncfusion/ej2-angular-inputs` package. Utilize this package to render the Slider Component.
 
+To get start quickly with Angular Range slider, you can check on this video:
+
+{% youtube "https://www.youtube.com/watch?v=_PInU4vTumk" %}
+
 ## Setting up angular project
 
 Angular provides the easiest way to set angular CLI projects using [`Angular CLI`](https://github.com/angular/angular-cli) tool.
diff --git a/ej2-angular/rich-text-editor/getting-started.md b/ej2-angular/rich-text-editor/getting-started.md
@@ -53,25 +53,6 @@ npm install @syncfusion/ej2-angular-richtexteditor --save
 
 > The **--save** will instruct NPM to include the rich text editor package inside of the **dependencies** section of the **package.json**.
 
-## Registering Rich Text Editor Module
-
-Import Rich Text Editor module into Angular application(app.module.ts) from the package **@syncfusion/ej2-angular-richtexteditor** [src/app/app.module.ts].
-
-```typescript
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { AppComponent }  from './app.component';
-// import the RichTextEditorModule for the Rich Text Editor component
-import { RichTextEditorModule } from '@syncfusion/ej2-angular-richtexteditor';
-
-@NgModule({
-  //declaration of ej2-angular-richtexteditor module into NgModule
-  imports:      [ BrowserModule, RichTextEditorModule ],
-  declarations: [ AppComponent ],
-  bootstrap:    [ AppComponent ]
-})
-export class AppModule { }
-```
 ## Adding CSS reference
 
 The following CSS files are available in **../node_modules/@syncfusion** package folder.
@@ -100,7 +81,12 @@ Modify the template in the [src/app/app.component.ts] file to render the Rich Te
 
 import { Component } from '@angular/core';
 import { ToolbarService, LinkService, ImageService, HtmlEditorService } from '@syncfusion/ej2-angular-richtexteditor';
+import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor'
 @Component({
+  imports: [
+    RichTextEditorAllModule
+  ],
+  standalone: true,
   selector: 'app-root',
   template: `<ejs-richtexteditor id='defaultRTE'>
   <ng-template #valueTemplate>
@@ -129,8 +115,6 @@ export class AppComponent {
 
 ```
 
-
-
 ## Module Injection
 
 To create Rich Text Editor with additional features, inject the required modules. The following modules are used to extend Rich Text Editor's basic functionality.
