DOCINFRA-2341_merged_using_automation

ej2-javascript-toc.html

@@ -713,7 +713,7 @@
 </li><li>
     Diagram
     <ul>
-    <li><a href="/ej2-javascript/diagram/es5-getting-started">Getting Started</a></li>
+    <li><a href="/ej2-javascript/diagram/getting-started">Getting Started</a></li>
     <li><a href="/ej2-javascript/diagram/nodes">Node</a>
         <ul>
         <li><a href="/ej2-javascript/diagram/customization">Customization</a></li>
@@ -809,15 +809,24 @@
     <li><a href="/ej2-javascript/diagram/undo-redo">Undo and Redo</a></li>
     <li><a href="/ej2-javascript/diagram/virtualization">Virtualization</a></li>
     <li><a href="/ej2-javascript/diagram/serialization">Serialization</a></li>
-    <li><a href="/ej2-javascript/diagram/export">Printing and Exporting</a></li>
+    <li><a href="/ej2-javascript/diagram/print">Printing</a></li>
+    <li><a href="/ej2-javascript/diagram/export">Exporting</a></li>
     <li><a href="/ej2-javascript/diagram/tool-tip">Tooltip</a></li>
     <li><a href="/ej2-javascript/diagram/user-handle">Userhandle</a></li>
     <li><a href="/ej2-javascript/diagram/style">CSS Structure</a></li>
     <li><a href="/ej2-javascript/diagram/ruler">Ruler</a></li>
     <li><a href="/ej2-javascript/diagram/layers">Layers</a></li>
     <li><a href="/ej2-javascript/diagram/context-menu">Context Menu</a></li>
-    <li><a href="/ej2-javascript/diagram/symbol-palette">Symbol Palette</a></li>
+    <li><a href="/ej2-javascript/diagram/symbol-palette">Symbol Palette</a>
+        <ul>
+            <li><a href="/ej2-javascript/diagram/palette-customization">Customization</a></li>
+            <li><a href="/ej2-javascript/diagram/palette-events">Events</a></li>
+
+        </ul>
+    </li>
     <li><a href="/ej2-javascript/diagram/overview">Overview Control</a></li>
+    <li><a href="/ej2-javascript/diagram/events">Events</a></li>
+    <li><a href="/ej2-javascript/diagram/diagram-methods">Diagram Properties</a></li>
     <li><a href="/ej2-javascript/diagram/ej1-api-migration">Migration from Essential JS 1</a></li>
     <li><a href="/ej2-javascript/diagram/load-json">Load EJ1 Saved JSON into EJ2</a></li>
     <li><a href="https://ej2.syncfusion.com/javascript/documentation/api/diagram/">API Reference</a></li>
@@ -905,9 +914,10 @@
 <li><a href="/ej2-javascript/document-editor/server-deployment/how-to-deploy-documenteditor-java-web-api-in-azure">How to Deploy Document Editor Java Web API in Azure App Service</a></li>
 </ul>
 </li>
-<li>Collaborative Editing
+<li><a href="/ej2-javascript/document-editor/collaborative-editing/overview">Collaborative Editing</a>
           <ul>
-             <li><a href="/ej2-javascript/document-editor/collaborative-editing/using-dot-net">Using ASP.NET Core</a></li>
+             <li><a href="/ej2-javascript/document-editor/collaborative-editing/using-redis-cache-asp-net-core">Using Redis in ASP.NET Core</a></li>
+             <li><a href="/ej2-javascript/document-editor/collaborative-editing/using-dot-net">Using Database in ASP.NET Core</a></li>
              <li><a href="/ej2-javascript/document-editor/collaborative-editing/using-java">Using Java</a></li>  
         </ul>
 </li>

ej2-javascript/code-snippet/diagram/AutomaticLayout-animComplete/index.css

@@ -0,0 +1,18 @@
+#container {
+    visibility: hidden;
+}
+
+#loader {
+  color: #008cff;
+  font-family: 'Helvetica Neue','calibiri';
+  font-size: 14px;
+  height: 40px;
+  left: 45%;
+  position: absolute;
+  top: 45%;
+  width: 30%;
+}
+
+#element {
+    display: block;
+}

ej2-javascript/code-snippet/diagram/AutomaticLayout-animComplete/index.js

@@ -0,0 +1,114 @@
+var nodes = [
+  {
+    id: 'Start',
+    width: 140,
+    height: 50,
+    offsetX: 300,
+    offsetY: 50,
+    annotations: [
+      {
+        content: 'Node1',
+      },
+    ],
+    style: {
+      fill: '#6BA5D7',
+      strokeColor: 'white',
+    },
+    expandIcon: {
+      shape: 'ArrowDown',
+      width: 20,
+      height: 15,
+    },
+    collapseIcon: {
+      shape: 'ArrowUp',
+      width: 20,
+      height: 15,
+    },
+  },
+  {
+    id: 'Init',
+    width: 140,
+    height: 50,
+    offsetX: 300,
+    offsetY: 140,
+    style: {
+      fill: '#6BA5D7',
+      strokeColor: 'white',
+    },
+    annotations: [
+      {
+        content: 'Node2',
+      },
+    ],
+  },
+  {
+    id: 'Init2',
+    width: 140,
+    height: 50,
+    offsetX: 100,
+    offsetY: 140,
+    style: {
+      fill: '#6BA5D7',
+      strokeColor: 'white',
+    },
+    annotations: [
+      {
+        content: 'Node3 ',
+      },
+    ],
+  },
+  {
+    id: 'Init3',
+    width: 140,
+    height: 50,
+    offsetX: 150,
+    offsetY: 140,
+    style: {
+      fill: '#6BA5D7',
+      strokeColor: 'white',
+    },
+    annotations: [
+      {
+        content: 'Node4 ',
+      },
+    ],
+  },
+];
+var connectors = [
+  {
+    // Unique name for the connector
+    id: 'connector1',
+    sourceID: 'Start',
+    targetID: 'Init',
+    type: 'Orthogonal',
+  },
+  {
+    // Unique name for the connector
+    id: 'connector2',
+    sourceID: 'Start',
+    targetID: 'Init2',
+    type: 'Orthogonal',
+  },
+  {
+    // Unique name for the connector
+    id: 'connector3',
+    sourceID: 'Init2',
+    targetID: 'Init3',
+    type: 'Orthogonal',
+  },
+];
+var diagram = new ej.diagrams.Diagram({
+  width: '100%',
+  height: '600px',
+  layout: { type: 'HierarchicalTree' },
+  nodes: nodes,
+  connectors: connectors,
+  animationComplete: function () {
+    console.log('Animation complete');
+    diagram.nodes[0].style.fill =
+      diagram.nodes[0].style.fill === '#6BA5D7' ? 'red' : '#6BA5D7';
+    diagram.dataBind();
+    //customize
+  },
+});
+diagram.appendTo('#element');

ej2-javascript/code-snippet/diagram/AutomaticLayout-animComplete/index.ts

@@ -0,0 +1,122 @@
+import {
+  Diagram,
+  NodeModel,
+  ConnectorModel,
+  HierarchicalTree,
+  LayoutAnimation,
+} from '@syncfusion/ej2-diagrams';
+Diagram.Inject(HierarchicalTree, LayoutAnimation);
+let nodes: NodeModel[] = [
+  {
+    id: 'Start',
+    width: 140,
+    height: 50,
+    offsetX: 300,
+    offsetY: 50,
+    annotations: [
+      {
+        content: 'Node1',
+      },
+    ],
+    style: {
+      fill: '#6BA5D7',
+      strokeColor: 'white',
+    },
+    expandIcon: {
+      shape: 'ArrowDown',
+      width: 20,
+      height: 15,
+    },
+    collapseIcon: {
+      shape: 'ArrowUp',
+      width: 20,
+      height: 15,
+    },
+  },
+  {
+    id: 'Init',
+    width: 140,
+    height: 50,
+    offsetX: 300,
+    offsetY: 140,
+    style: {
+      fill: '#6BA5D7',
+      strokeColor: 'white',
+    },
+    annotations: [
+      {
+        content: 'Node2',
+      },
+    ],
+  },
+  {
+    id: 'Init2',
+    width: 140,
+    height: 50,
+    offsetX: 100,
+    offsetY: 140,
+    style: {
+      fill: '#6BA5D7',
+      strokeColor: 'white',
+    },
+    annotations: [
+      {
+        content: 'Node3 ',
+      },
+    ],
+  },
+  {
+    id: 'Init3',
+    width: 140,
+    height: 50,
+    offsetX: 150,
+    offsetY: 140,
+    style: {
+      fill: '#6BA5D7',
+      strokeColor: 'white',
+    },
+    annotations: [
+      {
+        content: 'Node4 ',
+      },
+    ],
+  },
+];
+let connectors: ConnectorModel[] = [
+  {
+    // Unique name for the connector
+    id: 'connector1',
+    sourceID: 'Start',
+    targetID: 'Init',
+    type: 'Orthogonal',
+  },
+  {
+    // Unique name for the connector
+    id: 'connector2',
+    sourceID: 'Start',
+    targetID: 'Init2',
+    type: 'Orthogonal',
+  },
+  {
+    // Unique name for the connector
+    id: 'connector3',
+    sourceID: 'Init2',
+    targetID: 'Init3',
+    type: 'Orthogonal',
+  },
+];
+let diagram: Diagram = new Diagram({
+  width: '100%',
+  height: '600px',
+  layout: { type: 'HierarchicalTree' },
+  nodes: nodes,
+  connectors: connectors,
+  animationComplete: function () {
+    console.log('Animation complete');
+    diagram.nodes[0].style.fill =
+      diagram.nodes[0].style.fill === '#6BA5D7' ? 'red' : '#6BA5D7';
+    diagram.dataBind();
+    //customize
+  },
+});
+diagram.appendTo('#element');

ej2-javascript/code-snippet/diagram/AutomaticLayout-animComplete/js/index.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 Diagram</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">
+
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-buttons/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-popups/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-splitbuttons/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-diagrams/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/20.3.56/ej2-navigations/styles/fabric.css" rel="stylesheet">
+
+<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
+</head>
+
+<body>
+
+    <div id="container">
+        <div id="element"></div>
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+      </script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>

ej2-javascript/code-snippet/diagram/AutomaticLayout-animComplete/systemjs.config.js

@@ -0,0 +1,38 @@
+System.config({
+    transpiler: "typescript",
+    typescriptOptions: {
+        compilerOptions: {
+            target: "umd",
+            module: "commonjs",
+            moduleResolution: "node",
+            emitDecoratorMetadata: true,
+            experimentalDecorators: true
+        }
+    },
+    paths: {
+        "syncfusion:": "https://cdn.syncfusion.com/ej2/20.3.56/"
+    },
+    map: {
+        main: "index.ts",
+        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-diagrams": "syncfusion:ej2-diagrams/dist/ej2-diagrams.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-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+        "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+        "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.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"
+    }
+});
+
+System.import('index.ts').catch(console.error.bind(console)).then(function () {
+    document.getElementById('loader').style.display = "none";
+    document.getElementById('container').style.visibility = "visible";
+});