syncfusion-content · SyncfusionBuild · Aug 7, 2024 · Aug 7, 2024
diff --git a/ej2-javascript/accordion/ts/getting-started.md b/ej2-javascript/accordion/ts/getting-started.md
@@ -78,7 +78,7 @@ The Accordion CSS files are available in the `ej2-navigations` package folder. T
 
 Open the application in Visual Studio Code and add the Syncfusion JavaScript UI controls.
 
-The Accordion can be rendered by defining an array of [`items`](../api/accordion#items).
+The Accordion can be rendered by defining an array of [`items`](../api/accordion/#items).
 
 * Add the HTML div tag with its `id` attribute as `element` in your `index.html` file to initialize the Accordion.
 
@@ -196,6 +196,6 @@ You need to follow the below structure of HTML elements to render the Accordion.
 
 ## See Also
 
-* [How to load accordion items dynamically](./how-to/load-accordion-items-dynamically/)
+* [How to load accordion items dynamically](./how-to/load-accordion-items-dynamically)
 
 N> You can refer to our [JavaScript Accordion](https://www.syncfusion.com/javascript-ui-controls/js-accordion) feature tour page for its groundbreaking feature representations. You can also explore our [JavaScript Accordion example](https://ej2.syncfusion.com/demos/#/fabric/accordion/default.html) that shows you how to render the Accordion in JavaScript.
diff --git a/ej2-javascript/code-snippet/accordion/accordion-treeview-cs1/index.ts b/ej2-javascript/code-snippet/accordion/accordion-treeview-cs1/index.ts
@@ -2,7 +2,7 @@
 
 
 import { Accordion, TreeView } from '@syncfusion/ej2-navigations';
-import { DocDB, DownloadDB, PicDB} from 'datasource.ts'
+import { DocDB, DownloadDB, PicDB} from './datasource.ts'
 
   //Initialize Accordion component
     let acrdnObj: Accordion = new Accordion({

diff --git a/ej2-javascript/code-snippet/carousel/default-cs1/index.ts b/ej2-javascript/code-snippet/carousel/default-cs1/index.ts
@@ -11,7 +11,6 @@ const carouselObj: Carousel = new Carousel({
     { template: '<figure class="img-container"><img src="https://ej2.syncfusion.com/products/images/carousel/bee-eater.png" alt="bee-eater" style="height:100%;width:100%;" /><figcaption class="img-caption">Bee-eater</figcaption></figure>' }
   ],
   animationEffect: "Fade",
-  },
 });
 carouselObj.appendTo("#carousel");
 

diff --git a/ej2-javascript/code-snippet/carousel/indicator-preview-cs1/ts/index.html b/ej2-javascript/code-snippet/carousel/indicator-preview-cs1/ts/index.html
@@ -14,16 +14,18 @@
 
     <!--style reference from app-->
     <link href="styles.css" rel="stylesheet" />
-
+    
     <!--system js reference and configuration-->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
     <script src="systemjs.config.js"></script>
+    <script type="text/x-template" id="indicatorTemplate">
+        <div class="indicator" indicator-index="${index}">
+            <div class="preview-content">${getContent(data.index)}</div>
+        </div>
+    </script>
 </head>
-<script type="text/x-template" id="indicatorTemplate">
-    <div class="indicator" indicator-index="${index}">
-        <div class="preview-content">${getContent(data.index)}</div>
-    </div>
-</script>
+
+
 <body>
     <div id='loader'>LOADING....</div>
     <div id='container'>
@@ -37,4 +39,4 @@
     </div>
 </body>
 
-</html>
+</html>
diff --git a/ej2-javascript/code-snippet/diagram/annotations-conDisp/index.js b/ej2-javascript/code-snippet/diagram/annotations-conDisp/index.js
@@ -9,7 +9,7 @@ var connectors = [
         content: 'annotation',
         offset: 0.2,
         alignment: 'After',
-        displacement: { x: 50, y: 10 },
+        displacement: { x: 50, y: 50 },
       },
     ],
   },

diff --git a/ej2-javascript/code-snippet/diagram/annotations-conDisp/index.ts b/ej2-javascript/code-snippet/diagram/annotations-conDisp/index.ts
@@ -11,7 +11,7 @@ var connectors: ConnectorModel[] = [
         content: 'annotation',
         offset: 0.2,
         alignment: 'After',
-        displacement: { x: 50, y: 10 },
+        displacement: { x: 50, y: 50 },
       },
     ],
   },

diff --git a/ej2-javascript/code-snippet/diagram/nodes-propertyChange/index.js b/ej2-javascript/code-snippet/diagram/nodes-propertyChange/index.js
@@ -7,7 +7,7 @@ let nodes = [
     offsetY: 50,
     annotations: [
       {
-        content: 'Click node',
+        content: 'Node 1',
       },
     ],
     style: {
@@ -27,6 +27,3 @@ var diagram = new ej.diagrams.Diagram({
 });
 diagram.appendTo('#element');
 
-document.getElementById('resetSegments').onclick = () => {
-  diagram.resetSegments();
-};
diff --git a/ej2-javascript/code-snippet/diagram/overview-cs1/index.js b/ej2-javascript/code-snippet/diagram/overview-cs1/index.js
@@ -9,6 +9,58 @@ ej.diagrams.Diagram.Inject(
   //Click event for Appearance of the Property Panel.
 
   //sets node default value
+
+  var hierarchicalTree = [
+    {
+      Name: 'Diagram',
+      fillColor: '#916DAF',
+    },
+    {
+      Name: 'Layout',
+      Category: 'Diagram',
+    },
+    {
+      Name: 'Tree Layout',
+      Category: 'Layout',
+    },
+    {
+      Name: 'Organizational Chart',
+      Category: 'Layout',
+    },
+    {
+      Name: 'Hierarchical Tree',
+      Category: 'Tree Layout',
+    },
+    {
+      Name: 'Radial Tree',
+      Category: 'Tree Layout',
+    },
+    {
+      Name: 'Mind Map',
+      Category: 'Hierarchical Tree',
+    },
+    {
+      Name: 'Family Tree',
+      Category: 'Hierarchical Tree',
+    },
+    {
+      Name: 'Management',
+      Category: 'Organizational Chart',
+    },
+    {
+      Name: 'Human Resources',
+      Category: 'Management',
+    },
+    {
+      Name: 'University',
+      Category: 'Management',
+    },
+    {
+      Name: 'Business',
+      Category: 'Management',
+    },
+  ];
+
   function nodeDefaults(obj, diagram) {
     obj.style = {
       fill: '#659be5',
@@ -60,7 +112,7 @@ ej.diagrams.Diagram.Inject(
     dataSourceSettings: {
       id: 'Name',
       parentId: 'Category',
-      dataSource: new ej.data.DataManager(window.hierarchicalTree),
+      dataSource: new ej.data.DataManager(hierarchicalTree),
       doBinding: function (nodeModel, data, diagram) {
         nodeModel.shape = { type: 'Text', content: data.Name };
       },

diff --git a/ej2-javascript/code-snippet/diagram/scrollSettings-cs3/index.js b/ej2-javascript/code-snippet/diagram/scrollSettings-cs3/index.js
@@ -38,7 +38,7 @@ var diagram = new ej.diagrams.Diagram(
         scrollLimit: 'Infinity',
         //Enable autoScroll
         canAutoScroll: true,
-        //Defines the autoScroll border of all the sides of diargam
+        //Defines the autoScroll border of all the sides of diagram
         autoScrollBorder: { left: 100, right: 100, top: 100, bottom: 100 },
       },
     },

diff --git a/ej2-javascript/code-snippet/diagram/scrollSettings-cs3/index.ts b/ej2-javascript/code-snippet/diagram/scrollSettings-cs3/index.ts
@@ -42,7 +42,7 @@ import {
       scrollLimit: 'Infinity',
       //Enable autoScroll
       canAutoScroll: true,
-      //Defines the autoScroll border of all the sides of diargam
+      //Defines the autoScroll border of all the sides of diagram
       autoScrollBorder: { left: 100, right: 100, top: 100, bottom: 100 },
     },
   });

diff --git a/ej2-javascript/code-snippet/diagram/shapes-cs4/index.js b/ej2-javascript/code-snippet/diagram/shapes-cs4/index.js
@@ -3,16 +3,27 @@ var node = {
     offsetX: 250,
     offsetY: 250,
     // Size of the node
-    width: 100,
+    width: 300,
     height: 100,
-    shape: { type: 'Image', source: 'https://ej2.syncfusion.com/demos/src/diagram/employees/image16.png',  scale: 'None' },
+    shape: {
+      type: 'Image',
+      source:
+        'https://ej2.syncfusion.com/demos/src/diagram/employees/image16.png',
+      scale: 'Stretch',
+      align: 'None',
+    },
     //Customizes the appearances such as text, font, fill, and stroke.
-    style: { fill: 'none' }
-        };
-
-// initialize Diagram component
-
-var diagram = new ej.diagrams.Diagram({
-    width: '100%', height: '600px', nodes: [node]
-    }, '#element');
-
+    style: { fill: 'none' },
+  };
+
+  // initialize Diagram component
+
+  var diagram = new ej.diagrams.Diagram(
+    {
+      width: '100%',
+      height: '600px',
+      nodes: [node],
+    },
+    '#element'
+  );
+
diff --git a/ej2-javascript/code-snippet/diagram/shapes-cs4/index.ts b/ej2-javascript/code-snippet/diagram/shapes-cs4/index.ts
@@ -1,38 +1,32 @@
-
-
-
-import {
-    Diagram,
-    NodeModel,
-    NodeConstraints
-} from '@syncfusion/ej2-diagrams';
+import { Diagram, NodeModel, NodeConstraints } from '@syncfusion/ej2-diagrams';
 // A node is created and stored in nodes array.
 let node: NodeModel = {
-    // Position of the node
-    offsetX: 250,
-    offsetY: 250,
-    // Size of the node
-    width: 100,
-    height: 100,
-    //sets the type of the shape as Image
-        shape: {
-            type: 'Image',
-            source: 'https://ej2.syncfusion.com/demos/src/diagram/employees/image16.png',
-            scale: 'None'
-        },
-        //Customizes the appearances such as text, font, fill, and stroke.
-        style: {
-            fill: 'none'
-        }
-    };
+  id: 'node1',
+  // Position of the node
+  offsetX: 250,
+  offsetY: 250,
+  // Size of the node
+  width: 300,
+  height: 100,
+  //sets the type of the shape as Image
+  shape: {
+    type: 'Image',
+    source:
+      'https://ej2.syncfusion.com/demos/src/diagram/employees/image16.png',
+    scale: 'Stretch',
+    align: 'None',
+  },
+  //Customizes the appearances such as text, font, fill, and stroke.
+  style: {
+    fill: 'none',
+  },
+};
 // initialize diagram component
 let diagram: Diagram = new Diagram({
-    width: '100%',
-    height: '600px',
-    // Add node
-    nodes: [node]
+  width: '100%',
+  height: '600px',
+  // Add node
+  nodes: [node],
 });
 // render initialized diagram
 diagram.appendTo('#element');
-
-
diff --git a/ej2-javascript/code-snippet/diagram/tooltip-size/index.js b/ej2-javascript/code-snippet/diagram/tooltip-size/index.js
@@ -37,7 +37,7 @@ diagram = new ej.diagrams.Diagram(
         //Defines mouse over tooltip for a node
         tooltip: {
           content:
-            'Syncfusion diargam nodes, connectors look and feel can also be customized any way you want. The JavaScript Diagram control provides a rich set of properties through which you can customize connector color, thickness, dash and dot appearance, corners, and even decorators',
+            'Syncfusion diagram nodes, connectors look and feel can also be customized any way you want. The JavaScript Diagram control provides a rich set of properties through which you can customize connector color, thickness, dash and dot appearance, corners, and even decorators',
           position: 'BottomCenter',
           relativeMode: 'Object',
           //Set size for tooltip

diff --git a/ej2-javascript/code-snippet/diagram/tooltip-size/index.ts b/ej2-javascript/code-snippet/diagram/tooltip-size/index.ts
@@ -34,7 +34,7 @@ let diagram: Diagram = new Diagram(
         //Defines mouse over tooltip for a node
         tooltip: {
           content:
-            'Syncfusion diargam nodes, connectors look and feel can also be customized any way you want. The JavaScript Diagram control provides a rich set of properties through which you can customize connector color, thickness, dash and dot appearance, corners, and even decorators',
+            'Syncfusion diagram nodes, connectors look and feel can also be customized any way you want. The JavaScript Diagram control provides a rich set of properties through which you can customize connector color, thickness, dash and dot appearance, corners, and even decorators',
           position: 'BottomCenter',
           relativeMode: 'Object',
           //Set size for tooltip

diff --git a/ej2-javascript/code-snippet/schedule/cell-dimension-cs7/index.ts b/ej2-javascript/code-snippet/schedule/cell-dimension-cs7/index.ts
@@ -10,7 +10,7 @@ let scheduleObj: Schedule = new Schedule({
     views: ['Day','Week', 'Month', 'Agenda', 'Year'],
     selectedDate: new Date(2018, 1, 17),
     minDate:new Date(2017, 4, 17),
-    maxDate:new Date(2018, 5, 17)
+    maxDate:new Date(2018, 5, 17),
     eventSettings: { dataSource: scheduleData }
 });
 scheduleObj.appendTo('#Schedule');

diff --git a/ej2-javascript/code-snippet/schedule/event-cs27/index.ts b/ej2-javascript/code-snippet/schedule/event-cs27/index.ts
@@ -1,6 +1,6 @@
 
 
-import { Schedule, Day, Week, WorkWeek, Month, Agenda View, EventRenderedArgs } from '@syncfusion/ej2-schedule';
+import { Schedule, Day, Week, WorkWeek, Month, Agenda, View, EventRenderedArgs } from '@syncfusion/ej2-schedule';
 import { scheduleData } from './datasource.ts';
 
 Schedule.Inject(Day, Week, WorkWeek, Month, Agenda);

diff --git a/ej2-javascript/code-snippet/schedule/event-filter-cs1/index.ts b/ej2-javascript/code-snippet/schedule/event-filter-cs1/index.ts
@@ -25,7 +25,7 @@ let scheduleObj: Schedule = new Schedule({
             break;
     }
 }
-};
+});
 scheduleObj.appendTo('#Schedule');
 
 function onChange(): void {

diff --git a/ej2-javascript/code-snippet/schedule/header-bar-cs2/index.ts b/ej2-javascript/code-snippet/schedule/header-bar-cs2/index.ts
@@ -34,7 +34,7 @@ let scheduleObj: Schedule = new Schedule({
                 }
             };
         }
-    }
+    },
     eventSettings: { dataSource: scheduleData }
 });
 scheduleObj.appendTo('#Schedule');

diff --git a/ej2-javascript/code-snippet/schedule/header-rows-cs5/index.ts b/ej2-javascript/code-snippet/schedule/header-rows-cs5/index.ts
@@ -33,7 +33,7 @@ let scheduleObj: Schedule = new Schedule({
     ],
     views: [{ option: 'TimelineMonth' }],
     eventSettings: { dataSource: eventData }
-};
+});
 scheduleObj.appendTo('#Schedule');
 
 
diff --git a/ej2-javascript/code-snippet/schedule/resource-grouping-cs3/index.ts b/ej2-javascript/code-snippet/schedule/resource-grouping-cs3/index.ts
@@ -32,7 +32,7 @@ let scheduleObj: Schedule = new Schedule({
         textField: 'OwnerText', idField: 'Id', groupIDField: 'OwnerGroupId', colorField: 'OwnerColor'
     }],
     eventSettings: { dataSource: resourceData },
-    renderCell: (args: RenderCellEventArgs) {
+    renderCell: (args: RenderCellEventArgs) => {
       if (args.elementType == 'resourceGroupCells' &&
        args.element.className.indexOf('e-work-hours') > 0) {
           args.element.style.background = "#FAFAE3";

diff --git a/ej2-javascript/diagram/events.md b/ej2-javascript/diagram/events.md
@@ -87,8 +87,9 @@ The [`mouseWheel`](../api/diagram/iMouseWheelEventArgs/) event triggers when the
 {% previewsample "page.domainurl/code-snippet/diagram/events-cs2" %}
 {% endif %}
 
+## Other events
 
-There are several other events that will be triggered while interacting with diagram elements. To learn more about these events, refer to the sections on [`node-events`](./nodes-events.md) , [`connector-events`](./connector-events.md) , [`port-events`](./ports-interaction.md/#events) , [`annotation-events`](./label-events.md) , [`scroll-events`](./scroll-settings.md/#scroll-change-event) , [`history-events`](./undo-redo.md/#history-change-event) , [`layout-events`](./layout-event.md), [`user-handle-events`](./user-handle.md/#user-handle-events) , [`fixed-user-handle-events`](./user-handle.md/#fixed-user-handle-events) , [`Symbol-palette-events`](./palette-events.md).
+There are several other events that will be triggered while interacting with diagram elements. To learn more about these events, refer to the sections on [`node-events`](./nodes-events) , [`connector-events`](./connector-events) , [`port-events`](./ports-interaction/#events) , [`annotation-events`](./label-events) , [`scroll-events`](./scroll-settings/#scroll-change-event) , [`history-events`](./undo-redo/#history-change-event) , [`layout-events`](./layout-event), [`user-handle-events`](./user-handle/#user-handle-events) , [`fixed-user-handle-events`](./user-handle/#fixed-user-handle-events) , [`Symbol-palette-events`](./palette-events).
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,7 +11,6 @@ const carouselObj: Carousel = new Carousel({ @@
         { template: '<figure class="img-container"><img src="https://ej2.syncfusion.com/products/images/carousel/bee-eater.png" alt="bee-eater" style="height:100%;width:100%;" /><figcaption class="img-caption">Bee-eater</figcaption></figure>' }
       ],
       animationEffect: "Fade",
-      },
     });
     carouselObj.appendTo("#carousel");
@@ Expand Down @@