Integrated latest changes at 09-05-2025 1:30:11 AM

Author: SyncfusionBuild

ej2-angular-toc.html

@@ -1944,18 +1944,15 @@
        <li><a href="/ej2-angular/multi-select/custom-value">Custom Value</a></li>
        <li><a href="/ej2-angular/multi-select/virtual-scroll">Virtualization</a></li>
        <li><a href="/ej2-angular/multi-select/checkbox">CheckBox</a></li>
+       <li><a href="/ej2-angular/multi-select/MultiSelectOptions">MultiSelect Options</a></li>
+       <li><a href="/ej2-angular/multi-select/configure-the-cascading-multi-select">Cascading MultiSelect</a></li>
        <li><a href="/ej2-angular/multi-select/chip-customization">Chip Customization</a></li>
        <li><a href="/ej2-angular/multi-select/localization">Localization</a></li>
        <li><a href="/ej2-angular/multi-select/style">Style and appearance</a></li>
        <li><a href="/ej2-angular/multi-select/accessibility">Accessibility</a></li>
        <li><a href="/ej2-angular/multi-select/form-support">Form Support</a></li>
        <li><a href="/ej2-angular/multi-select/resize">Popup Resize</a></li>
-       <li>How To
-         <ul>
-           <li><a href="/ej2-angular/multi-select/how-to/icons-support">Show the list items with icons</a></li>
-           <li><a href="/ej2-angular/multi-select/how-to/configure-the-cascading-multi-select">Configure the Cascading MultiSelect</a></li>
-         </ul>
-       </li>
+       <li><a href="/ej2-angular/multi-select/icons-support">Icons Support</a></li>
        <li><a href="https://ej2.syncfusion.com/angular/documentation/api/multi-select/">API Reference</a></li>
      </ul>
  </li><li>
@@ -2705,52 +2702,6 @@
        <li><a href="https://ej2.syncfusion.com/angular/documentation/api/splitter/">API Reference</a></li>
      </ul>
   </li><li>
-    Spreadsheet
-     <ul>
-       <li><a href="/ej2-angular/spreadsheet/overview">Overview</a></li>
-       <li><a href="/ej2-angular/spreadsheet/getting-started">Getting Started</a></li>
-       <li><a href="/ej2-angular/spreadsheet/data-binding">Data Binding</a></li>
-       <li><a href="/ej2-angular/spreadsheet/open-save">Open and Save</a></li>
-       <li><a href="/ej2-angular/spreadsheet/docker-deployment">Docker Deployment</a></li>
-       <li><a href="/ej2-angular/spreadsheet/worksheet">Worksheet</a></li>
-       <li><a href="/ej2-angular/spreadsheet/cell-range">Cell Range</a></li>
-       <li><a href="/ej2-angular/spreadsheet/editing">Editing</a></li>
-       <li><a href="/ej2-angular/spreadsheet/formulas">Formulas</a></li>
-       <li><a href="/ej2-angular/spreadsheet/formatting">Formatting</a></li>
-       <li><a href="/ej2-angular/spreadsheet/freeze-pane">Freeze Panes</a></li>
-       <li><a href="/ej2-angular/spreadsheet/context-menu">Context Menu</a></li>
-       <li><a href="/ej2-angular/spreadsheet/template">Templates</a></li>
-       <li><a href="/ej2-angular/spreadsheet/illustrations">Illustrations</a></li>
-       <li><a href="/ej2-angular/spreadsheet/rows-and-columns">Rows and Columns</a></li>
-       <li><a href="/ej2-angular/spreadsheet/filter">Filtering</a></li>
-       <li><a href="/ej2-angular/spreadsheet/sort">Sorting</a></li>
-       <li><a href="/ej2-angular/spreadsheet/link">Hyperlink</a></li>
-       <li><a href="/ej2-angular/spreadsheet/notes">Notes</a></li>
-       <li><a href="/ej2-angular/spreadsheet/clipboard">Clipboard</a></li>
-       <li><a href="/ej2-angular/spreadsheet/selection">Selection</a></li>
-       <li><a href="/ej2-angular/spreadsheet/scrolling">Scrolling</a></li>
-       <li><a href="/ej2-angular/spreadsheet/protect-sheet">Protection</a></li>
-       <li><a href="/ej2-angular/spreadsheet/searching">Find and Replace</a></li>
-       <li><a href="/ej2-angular/spreadsheet/undo-redo">Undo and Redo</a></li>
-       <li><a href="/ej2-angular/spreadsheet/ribbon">Ribbon</a></li>
-       <li><a href="/ej2-angular/spreadsheet/styles">Styles and Appearance</a></li>
-       <li><a href="/ej2-angular/spreadsheet/print">Print</a></li>
-       <li><a href="/ej2-angular/spreadsheet/performance-best-practices">Performance Best Practices</a></li>
-       <li><a href="/ej2-angular/spreadsheet/global-local">Globalization</a></li>
-       <li><a href="/ej2-angular/spreadsheet/accessibility">Accessibility</a></li>
-       <li><a href="/ej2-angular/spreadsheet/keyboard-shortcuts">Keyboard Shortcuts</a></li>
-       <li><a href="/ej2-angular/spreadsheet/ej1-api-migration">Migration from Essential JS 1</a></li>
-       <li>How To
-         <ul>
-            <li><a href="/ej2-angular/spreadsheet/how-to/change-active-sheet">Changing the active sheet while importing a file</a></li>
-            <li><a href="/ej2-angular/spreadsheet/how-to/identify-the-context-menu-opened">Identify the context menu opened</a></li>
-         </ul>
-       </li>
-       <li><a href="/ej2-angular/spreadsheet/mobile-responsiveness">Mobile Responsiveness</a></li>
-       <li><a href="https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/">API Reference</a></li>
-    </ul>
- </li>
-<li>
 Stepper
   <ul>
     <li><a href="/ej2-angular/stepper/getting-started">Getting Started</a></li>

ej2-angular/accumulation-chart/empty-points.md

@@ -41,9 +41,9 @@ border for an empty point can be set by using the `border` property.
 
 {% previewsample "page.domainurl/samples/chart/series/radius-cs8" %}
 
-## Handling when no data is available
+## Handling No Data
 
-When no data is available to render in the chart, the `noDataTemplate` property can be used to display a custom layout within the chart area. This layout may include a message indicating the absence of data, a relevant image, or a button to initiate data loading. Styled text, images, or interactive elements can be incorporated to maintain design consistency and improve user guidance. Once data becomes available, the chart automatically updates to display the appropriate visualization.
+When no data is available to render in the accumulation chart, the `noDataTemplate` property can be used to display a custom layout within the chart area. This layout may include a message indicating the absence of data, a relevant image, or a button to initiate data loading. Styled text, images, or interactive elements can be incorporated to maintain design consistency and improve user guidance. Once data becomes available, the chart automatically updates to display the appropriate visualization.
 
 {% tabs %}
 {% highlight ts tabtitle="app.component.ts" %}

ej2-angular/chart/working-with-data.md

@@ -202,7 +202,7 @@ Specific color for empty point can be set by `fill` property in `emptyPointSetti
 
 {% previewsample "page.domainurl/samples/chart/series/column-cs30" %}
 
-## Handling when no data is available
+## Handling No Data
 
 When no data is available to render in the chart, the `noDataTemplate` property can be used to display a custom layout within the chart area. This layout may include a message indicating the absence of data, a relevant image, or a button to initiate data loading. Styled text, images, or interactive elements can be incorporated to maintain design consistency and improve user guidance. Once data becomes available, the chart automatically updates to display the appropriate visualization.
 

ej2-angular/code-snippet/spreadsheet/autofill-cs1/angular.json renamed to ej2-angular/code-snippet/diagram/connectors/connectors-segundo/angular.json

@@ -20,7 +20,13 @@
             "styles": [
               "src/styles.css"
             ],
-            "assets": []
+            "assets": [
+              {
+                "glob": "*.css",
+                "input": "",
+                "output": ""
+              }
+            ]
           },
           "configurations": {
             "production": {

ej2-angular/code-snippet/diagram/connectors/connectors-segundo/index.css

@@ -0,0 +1,23 @@
+#loader {
+    color: #008cff;
+    font-family: 'Helvetica Neue', 'calibiri';
+    font-size: 16px;
+    height: 40px;
+    left: 45%;
+    position: absolute;
+    top: 45%;
+    width: 30%;
+}
+
+.animation {
+    background: #333333;
+    border: 1px solid #cecece;
+    box-sizing: border-box;
+    height: 100px;
+    width: 100px;
+}
+
+#chart-container {
+    display: block;
+    height: 350px;
+}

ej2-angular/code-snippet/diagram/connectors/connectors-segundo/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>EJ2 Animation</title>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="description" content="Typescript UI Controls" />
+        <meta name="author" content="Syncfusion" />
+        <link href="index.css" rel="stylesheet" />
+        <style>
+            #diagram {
+                display: block;
+            }
+        </style>
+    </head>
+    <body>
+        <app-container>
+            <div id='loader'>Loading....</div>
+        </app-container>
+    </body>
+</html>

ej2-angular/code-snippet/spreadsheet/contextmenu/addContextMenu-cs3/package.json renamed to ej2-angular/code-snippet/diagram/connectors/connectors-segundo/package.json

@@ -13,16 +13,8 @@
     "@angular/core": "17.1.2",
     "@angular/platform-browser": "17.1.2",
     "@angular/platform-browser-dynamic": "17.1.2",
-    "@syncfusion/ej2-angular-spreadsheet": "*",
-    "@syncfusion/ej2-base": "*",
-    "@syncfusion/ej2-inputs": "*",
-    "@syncfusion/ej2-buttons": "*",
-    "@syncfusion/ej2-splitbuttons": "*",
-    "@syncfusion/ej2-lists": "*",
-    "@syncfusion/ej2-navigations": "*",
-    "@syncfusion/ej2-popups": "*",
-    "@syncfusion/ej2-dropdowns": "*",
-    "@syncfusion/ej2-spreadsheet": "*",
+    "@syncfusion/ej2-angular-diagrams": "*",
+    "@syncfusion/ej2-diagrams": "*",
     "@syncfusion/ej2-angular-base": "*",
     "@angular/animations": "17.1.2",
     "@angular/common": "17.1.2",

ej2-angular/code-snippet/diagram/connectors/connectors-segundo/src/app.component.ts

@@ -0,0 +1,85 @@
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import {
+  DiagramComponent,
+  Diagram,
+  OrthogonalSegmentModel,
+  ConnectorEditing,
+  ConnectorConstraints,
+  DiagramModule,
+  ShapeStyleModel,
+  UndoRedo,
+} from '@syncfusion/ej2-angular-diagrams';
+Diagram.Inject(ConnectorEditing, UndoRedo);
+
+@Component({
+  imports: [DiagramModule],
+  providers: [],
+  standalone: true,
+  selector: 'app-container',
+  template: `
+    <button (click)="undo()">Undo</button>
+    <button (click)="redo()">Redo</button>
+    <ejs-diagram #diagram id="diagram" width="100%" height="600px">
+          <e-nodes>
+              <e-node id='sourcenode' [offsetX]=350 [offsetY]=50 [width]=150 [height]=50  [style]='style'>
+                  <e-node-annotations>
+                          <e-node-annotation content="node 1">
+                          </e-node-annotation>
+                  </e-node-annotations>
+              </e-node>
+              <e-node id='targetnode' [offsetX]=200 [offsetY]=250 [width]=150 [height]=50 [style]='style'>
+                  <e-node-annotations>
+                          <e-node-annotation content="node 2">
+                          </e-node-annotation>
+                  </e-node-annotations>
+              </e-node>
+          </e-nodes>
+          <e-connectors>
+              <e-connector id='connector' type='Orthogonal' sourceID='sourcenode' targetID='targetnode' [constraints]='constraints' [segments]='segments'>
+              </e-connector>
+          </e-connectors>
+    </ejs-diagram>`,
+  encapsulation: ViewEncapsulation.None,
+})
+export class AppComponent {
+  @ViewChild('diagram')
+  public diagram?: DiagramComponent;
+  public segments?: OrthogonalSegmentModel;
+  public style?: ShapeStyleModel;
+
+  ngOnInit(): void {
+    this.segments = [
+      {
+        type: 'Orthogonal',
+        direction: 'Left',
+        length: 100,
+      },
+      {
+        type: 'Orthogonal',
+        direction: 'Bottom',
+        length: 100,
+      },
+      {
+        type: 'Orthogonal',
+        direction: 'Right',
+        length: 100,
+      },
+      {
+        type: 'Orthogonal',
+        direction: 'Bottom',
+        length: 50,
+      },
+    ];
+    this.style = {
+      fill: '#6BA5D7',
+      strokeColor: 'white',
+    };
+  }
+  constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb;
+  undo() {
+    (this.diagram as any).undo();
+  }
+  redo() {
+    (this.diagram as any).redo();
+  }
+}

ej2-angular/code-snippet/spreadsheet/accessibility/src/main.ts renamed to ej2-angular/code-snippet/diagram/connectors/connectors-segundo/src/main.ts

@@ -0,0 +1,2 @@
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-diagrams/styles/material.css';