syncfusion-content · SyncfusionBuild · Jun 14, 2024 · Jun 13, 2024
diff --git a/ej2-react-toc.html b/ej2-react-toc.html
@@ -1729,6 +1729,14 @@
     OTP Input
     <ul>
         <li><a href="/ej2-react/otp-input/getting-started">Getting Started</a></li>
+        <li><a href="/ej2-react/otp-input/input-types">Input Types</a></li>
+        <li><a href="/ej2-react/otp-input/styling-modes">Styling Modes</a></li>
+        <li><a href="/ej2-react/otp-input/placeholder">Placeholder</a></li>
+        <li><a href="/ej2-react/otp-input/separator">Separator</a></li>
+        <li><a href="/ej2-react/otp-input/appearance">Appearance</a></li>
+        <li><a href="/ej2-react/otp-input/accessibility">Accessibility</a></li>
+        <li><a href="/ej2-react/otp-input/events">Events</a></li>
+        <li><a href="https://ej2.syncfusion.com/react/documentation/api/otp-input"></a>API Reference</li>
     </ul>
 </li><li>
     Pager

diff --git a/ej2-react/auto-complete/virtual-scroll.md b/ej2-react/auto-complete/virtual-scroll.md
@@ -40,7 +40,7 @@ In the following example, `text` column from complex data have been mapped to th
 
 ## Binding remote data
 
-The AutoComplete supports retrieval of data from remote data services with the help of `DataManager` component. When using remote data, it initially fetches all the data from the server, triggering the `actionBegin` and `actionComplete` events, and then stores the data locally. During virtual scrolling, additional data is retrieved from the locally stored data, triggering the `actionBegin` and `actionComplete` events at that time as well.
+The AutoComplete supports the retrieval of data from remote data services with the help of the `DataManager` component, triggering the `actionBegin` and `actionComplete` events, and then updating the list data. During virtual scrolling, additional data is retrieved from the server, triggering the `actionBegin` and `actionComplete` events at that time as well.
 
 The following sample displays the OrderId from the `Orders` Data Service.
 

diff --git a/ej2-react/code-snippet/chart/dynamic-update/click-add-point/app/index.tsx b/ej2-react/code-snippet/chart/dynamic-update/click-add-point/app/index.tsx
@@ -44,24 +44,24 @@ function App() {
   const chartMouseClick = (args: IMouseEventArgs): void => {
     let isRemoved: boolean = false;
     if (args.axisData) {
-      for (let i: number = 0; i < (chartInstance.current.series[0] as Series).points.length; i++) {
-        const markerWidth: number = (chartInstance.current.series[0] as Series).marker.width / 2;
+      for (let i: number = 0; i < (chartInstance.series[0] as Series).points.length; i++) {
+        const markerWidth: number = (chartInstance.series[0] as Series).marker.width / 2;
         let roundedX: number = Math.round(args.axisData['primaryXAxis']) + markerWidth;
         let roundedY: number = Math.round(args.axisData['primaryYAxis']) + markerWidth;
-        let pointX: number = Math.round((chartInstance.current.series[0] as Series).points[i].x as number) + markerWidth;
-        let pointY: number = Math.round((chartInstance.current.series[0] as Series).points[i].y as number) + markerWidth;
+        let pointX: number = Math.round((chartInstance.series[0] as Series).points[i].x as number) + markerWidth;
+        let pointY: number = Math.round((chartInstance.series[0] as Series).points[i].y as number) + markerWidth;
         if ((roundedX === pointX || roundedX + 1 === pointX || roundedX - 1 === pointX) &&
           (roundedY === pointY || roundedY + 1 === pointY || roundedY - 1 === pointY)) {
-          if ((chartInstance.current.series[0] as Series).points.length > 1) {
-            const points = (chartInstance.current.series[0] as Series).points;
+          if ((chartInstance.series[0] as Series).points.length > 1) {
+            const points = (chartInstance.series[0] as Series).points;
             const duration: number = i === 0 || i === points[points.length - 1].index ? 500 : 0;
-            chartInstance.current.series[0].removePoint(i, duration);
+            chartInstance.series[0].removePoint(i, duration);
           }
           isRemoved = true;
         }
       }
       if (!isRemoved) {
-        chartInstance.current.series[0].addPoint({ x: Math.round(args.axisData['primaryXAxis']), y: Math.round(args.axisData['primaryYAxis']) });
+        chartInstance.series[0].addPoint({ x: Math.round(args.axisData['primaryXAxis']), y: Math.round(args.axisData['primaryYAxis']) });
       }
     }
   };

diff --git a/ej2-react/code-snippet/diagram/annotations/es5Rotation-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/annotations/es5Rotation-cs1/app/index.jsx
@@ -0,0 +1,31 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
+let diagramInstance;
+// A node is created and stored in nodes array.
+let node = [{
+        // Position of the node
+        offsetX: 100,
+        offsetY: 100,
+        // Size of the node
+        width: 100,
+        height: 100,
+        style: {
+            fill: '#6BA5D7',
+            strokeColor: 'white'
+        },
+        // Sets the Annotation for the Node
+        annotations: [{
+                content: 'Annotation',
+                //set rotationReference to "page" to disable rotation
+                rotationReference: 'Page'
+
+            }]
+    }];
+
+// initialize Diagram component
+function App() {
+    return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node} connectors={connector}/>);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(<App />);
diff --git a/ej2-react/code-snippet/diagram/annotations/es5Rotation-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/annotations/es5Rotation-cs1/app/index.tsx
@@ -0,0 +1,45 @@
+
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import {
+    Diagram,
+    DiagramComponent,
+    NodeModel, ConnectorModel
+} from "@syncfusion/ej2-react-diagrams";
+let diagramInstance: DiagramComponent;
+// A node is created and stored in nodes array.
+let node: NodeModel[] = [{
+    // Position of the node
+    offsetX: 100,
+    offsetY: 100,
+    // Size of the node
+    width: 100,
+    height: 100,
+    style: {
+        fill: '#6BA5D7',
+        strokeColor: 'white'
+    },
+    // Sets the Annotation for the Node
+    annotations: [{
+        content: 'Annotation',
+        //set rotationReference to "page" to disable rotation
+        rotationReference: 'Page'
+    }]
+}];
+
+// initialize Diagram component
+function App() {
+  return (
+    <DiagramComponent
+      id="container"
+      width={'100%'}
+      height={'600px'}
+      nodes={node}
+    />
+  );
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(<App />);
+
+
diff --git a/ej2-react/code-snippet/diagram/annotations/es5Rotation-cs1/index.html b/ej2-react/code-snippet/diagram/annotations/es5Rotation-cs1/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Chart-DataLabel</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-diagrams/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+     <style>
+        #loader {
+            color: #008cff;
+            height: 40px;
+            left: 45%;
+            position: absolute;
+            top: 45%;
+            width: 30%;
+        }
+        #diagram {
+            display: block;
+        }
+    </style>
+</head>
+
+<body>
+        <div id='diagram'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
diff --git a/ej2-react/code-snippet/diagram/annotations/es5Rotation-cs1/systemjs.config.js b/ej2-react/code-snippet/diagram/annotations/es5Rotation-cs1/systemjs.config.js
@@ -0,0 +1,59 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+            target: "es5",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true,
+            "jsx": "react"
+    },
+     meta: {
+      'typescript': {
+        "exports": "ts"
+      }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: 'app',
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+        "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+        "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+        "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-diagrams": "syncfusion:ej2-diagrams/dist/ej2-diagrams.umd.min.js",
+        "@syncfusion/ej2-react-diagrams": "syncfusion:ej2-react-diagrams/dist/ej2-react-diagrams.umd.min.js",
+       "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+
+
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/code-snippet/diagram/connectors/es5ConnectoraddatRunTime-cs2/app/index.jsx b/ej2-react/code-snippet/diagram/connectors/es5ConnectoraddatRunTime-cs2/app/index.jsx
@@ -0,0 +1,20 @@
+{% raw %}
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
+let diagramInstance;
+//initialize connector collection
+let collectorCollection = [
+    { id: 'connector1', sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 150, y: 150 } },
+    {id: 'connector2', type: 'Orthogonal', sourcePoint: { x: 170, y: 170 }, targetPoint: { x: 200, y: 200 }},
+    { id: 'connector3', type: 'Bezier', sourcePoint: { x: 320, y: 320 }, targetPoint: { x: 400, y: 400 } }
+];
+function App() {
+    return (<DiagramComponent id="container" ref={(diagram) => (diagramInstance = diagram)} width={'100%'} height={'600px'} created={() => {
+        //Add collection of connectors
+        diagramInstance.addElements(collectorCollection);
+        }}/>);
+}
+const root = ReactDOM.createRoot(document.getElementById('diagram'));
+root.render(<App />);
+{% endraw %}
diff --git a/ej2-react/code-snippet/diagram/connectors/es5ConnectoraddatRunTime-cs2/app/index.tsx b/ej2-react/code-snippet/diagram/connectors/es5ConnectoraddatRunTime-cs2/app/index.tsx
@@ -0,0 +1,30 @@
+{% raw %}
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import {DiagramComponent, ConnectorModel} from "@syncfusion/ej2-react-diagrams";
+let diagramInstance: DiagramComponent;
+//initialize connector collection
+var collectorCollection:ConnectorModel = [
+    { id: 'connector1', sourcePoint: { x: 100, y: 100 }, targetPoint: { x: 150, y: 150 } },
+    {id: 'connector2', type: 'Orthogonal', sourcePoint: { x: 170, y: 170 }, targetPoint: { x: 200, y: 200 }},
+    { id: 'connector3', type: 'Bezier', sourcePoint: { x: 320, y: 320 }, targetPoint: { x: 400, y: 400 } }
+];
+function App() {
+    return (
+      <DiagramComponent
+        id="container"
+        ref={(diagram) => (diagramInstance = diagram)}
+        width={'100%'}
+        height={'600px'}
+        created={() => {
+        //Add collection of connectors
+        diagramInstance.addElements(collectorCollection);
+        }}
+      />
+    );
+  }
+  const root = ReactDOM.createRoot(document.getElementById('diagram'));
+  root.render(<App />);
+
+
+  {% endraw %}
diff --git a/ej2-react/code-snippet/diagram/connectors/es5ConnectoraddatRunTime-cs2/index.html b/ej2-react/code-snippet/diagram/connectors/es5ConnectoraddatRunTime-cs2/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Syncfusion React Chart-DataLabel</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link href="index.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-diagrams/styles/material.css" rel="stylesheet">
+    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/fabric.css" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+     <style>
+        #loader {
+            color: #008cff;
+            height: 40px;
+            left: 45%;
+            position: absolute;
+            top: 45%;
+            width: 30%;
+        }
+        #diagram {
+            display: block;
+        }
+    </style>
+</head>
+
+<body>
+        <div id='diagram'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+
+</html>
diff --git a/ej2-react/code-snippet/diagram/connectors/es5ConnectoraddatRunTime-cs2/systemjs.config.js b/ej2-react/code-snippet/diagram/connectors/es5ConnectoraddatRunTime-cs2/systemjs.config.js
@@ -0,0 +1,59 @@
+System.config({
+    transpiler: "ts",
+    typescriptOptions: {
+            target: "es5",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true,
+            "jsx": "react"
+    },
+     meta: {
+      'typescript': {
+        "exports": "ts"
+      }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        app: 'app',
+        ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+        typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+        "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+        "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+        "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+        "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+        "@syncfusion/ej2-react-charts": "syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js",
+        "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js",
+        "@syncfusion/ej2-react-popups": "syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js",
+        "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+        "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+        "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+        "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+        "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+        "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+        "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+        "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+        "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+        "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+        "@syncfusion/ej2-diagrams": "syncfusion:ej2-diagrams/dist/ej2-diagrams.umd.min.js",
+        "@syncfusion/ej2-react-diagrams": "syncfusion:ej2-react-diagrams/dist/ej2-react-diagrams.umd.min.js",
+       "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+        "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+
+
+    },
+    packages: {
+        'app': { main: 'index', defaultExtension: 'tsx' },
+    }
+
+});
+
+System.import('app');
+
+
+