DOCINFRA-2341_merged_using_automation

ej2-javascript-toc.html

@@ -1875,6 +1875,7 @@
 <li><a href="/ej2-javascript/pdfviewer/how-to/signatureselect-signatureunselect-js">SignatureSelect and SignatureUnselect event</a></li>
 <li><a href="/ej2-javascript/pdfviewer/how-to/download-start-event-js">Controlling File Downloads</a></li>
 <li><a href="/ej2-javascript/pdfviewer/how-to/min-max-zoom-js">Minimum and Maximum Zoom Properties</a></li>
+<li><a href="/ej2-javascript/pdfviewer/how-to/restricting-zoom-in-mobile-mode-js">How to Restrict Zoom Percentage on Mobile Devices</a></li>
 </ul>
 </li>
 <li>Troubleshooting

ej2-javascript/code-snippet/diagram/customRuler-cs1/index.js

@@ -1,8 +1,23 @@
 var diagram = new ej.diagrams.Diagram({
-    width: '100%', height: '600px', 
-        rulerSettings: {
-            showRulers: true, horizontalRuler:{interval:8, segmentWidth:100, thickness:35, tickAlignment:"LeftOrTop"}, verticalRuler:{interval:10, segmentWidth:150, thickness:35, tickAlignment:"RightOrBottom"}
-        },
-});
-diagram.appendTo('#element');
-
+    width: '100%',
+    height: '600px',
+    rulerSettings: {
+      showRulers: true,
+      horizontalRuler: {
+        interval: 8,
+        segmentWidth: 100,
+        thickness: 35,
+        //Align horizontal ruler tick to the bottom side.
+        tickAlignment: 'RightOrBottom',
+      },
+      verticalRuler: {
+        interval: 10,
+        segmentWidth: 200,
+        thickness: 35,
+        //Align vertical ruler tick to the left side.
+        tickAlignment: 'LeftOrTop',
+      },
+    },
+  });
+  diagram.appendTo('#element');
+

ej2-javascript/code-snippet/diagram/customRuler-cs1/index.ts

@@ -1,12 +1,23 @@
-
-
-
 import { Diagram } from '@syncfusion/ej2-diagrams';
 let diagram: Diagram = new Diagram({
-        width: '100%', height: '600px', rulerSettings: {
-            showRulers: true, horizontalRuler:{interval:8, segmentWidth:100, thickness:25, tickAlignment:"LeftOrTop"},verticalRuler:{interval:10, segmentWidth:150, thickness:35, tickAlignment:"RightOrBottom"}
-        },
-    });
-    diagram.appendTo('#element');
-
-
+  width: '100%',
+  height: '600px',
+  rulerSettings: {
+    showRulers: true,
+    horizontalRuler: {
+      interval: 8,
+      segmentWidth: 100,
+      thickness: 25,
+      //Align horizontal ruler tick to the bottom side.
+      tickAlignment: 'RightOrBottom',
+    },
+    verticalRuler: {
+      interval: 10,
+      segmentWidth: 200,
+      thickness: 35,
+      //Align vertical ruler tick to the left side.
+      tickAlignment: 'LeftOrTop',
+    },
+  },
+});
+diagram.appendTo('#element');

ej2-javascript/code-snippet/diagram/gridlines-cs3/index.ts

@@ -1,29 +1,34 @@
-
-
-
-import {Diagram,SnapConstraints,SnapSettingsModel,Snapping} from '@syncfusion/ej2-diagrams';
-Diagram.Inject(Snapping);
-let snapSettings: SnapSettingsModel = {
+import {
+    Diagram,
+    SnapConstraints,
+    SnapSettingsModel,
+    Snapping,
+  } from '@syncfusion/ej2-diagrams';
+  Diagram.Inject(Snapping);
+  let snapSettings: SnapSettingsModel = {
+    // Define the Constraints for gridlines and snapping
     constraints: SnapConstraints.ShowLines,
+    gridType: 'Dots',
+    // Defines the horizontalGridlines for SnapSettings
     horizontalGridlines: {
-        // Sets the lineIntervals of Gridlines
-        lineIntervals: [1.25, 14, 0.25, 15, 0.25, 15, 0.25, 15, 0.25, 15],
-        lineColor: 'blue',
-        lineDashArray: '2 2'
+      // Sets the line color of gridlines
+      lineColor: 'blue',
+      // Defines the dot intervals of gridlines
+      dotIntervals: [3, 20, 1, 20, 1, 20, 1, 20, 1, 20],
     },
+    // Defines the verticalGridlines for SnapSettings
     verticalGridlines: {
-        // Sets the lineIntervals of Gridlines
-        lineIntervals: [1.25, 14, 0.25, 15, 0.25, 15, 0.25, 15, 0.25, 15],
-        lineColor: 'blue',
-        lineDashArray: '2 2'
-    }
-};
-let diagram: Diagram = new Diagram({
+      // Defines the dot intervals of gridlines
+      dotIntervals: [3, 20, 1, 20, 1, 20],
+      // Sets the line color of gridlines
+      lineColor: 'blue',
+    },
+  };
+  let diagram: Diagram = new Diagram({
     width: '100%',
-    height: '500px',
-    snapSettings: snapSettings
-});
-diagram.appendTo('#element');
-
-
-
+    height: '700px',
+    // Define the snap setting for the diagram
+    snapSettings: snapSettings,
+  });
+  diagram.appendTo('#element');
+

ej2-javascript/code-snippet/diagram/gridlines-cs6/index.js

@@ -1,31 +1,44 @@
-let nodes = [{
-    id: 'node1',
-    width: 100,
-    height: 100,
-    offsetX: 100,
-    offsetY: 100,
-    style: {
-        strokeColor: '#6BA5D7',
-        fill: '#6BA5D7'
-    }
-}];
-
-var snapSettings = {
+let nodes = [
+    {
+      id: 'node1',
+      style: { fill: '#6BA5D7', strokeColor: '#6BA5D7' },
+      width: 100,
+      height: 100,
+      offsetX: 100,
+      offsetY: 100,
+    },
+    {
+      id: 'node2',
+      style: { fill: '#6BA5D7', strokeColor: '#6BA5D7' },
+      width: 100,
+      height: 100,
+      offsetX: 300,
+      offsetY: 100,
+    },
+  ];
+
+  var snapSettings = {
+    // Enable snap to object constraint
+    constraints:
+      ej.diagrams.SnapConstraints.SnapToObject |
+      ej.diagrams.SnapConstraints.ShowLines,
+    // Sets the Snap object distance
     snapObjectDistance: 10,
-    snapAngle: 10,
-    snapLineColor: 'red'
-};
-var diagram = new ej.diagrams.Diagram({
-    width: '800px',
-    height: '500px',
-    nodes: nodes,
-    getNodeDefaults: function(node) {
+  };
+  var diagram = new ej.diagrams.Diagram(
+    {
+      width: '800px',
+      height: '500px',
+      nodes: nodes,
+      getNodeDefaults: function (node) {
         node.height = 100;
         node.width = 100;
         node.style.fill = '#6BA5D7';
         node.style.strokeColor = 'white';
         return node;
+      },
+      snapSettings: snapSettings,
     },
-    snapSettings: snapSettings
-}, '#element');
-
+    '#element'
+  );
+  

ej2-javascript/code-snippet/diagram/gridlines-cs6/index.ts

@@ -1,41 +1,40 @@
-
-
-
-import {Diagram,SnapConstraints,SnapSettingsModel,Snapping,NodeModel} from '@syncfusion/ej2-diagrams';
-Diagram.Inject(Snapping);
-let nodes: NodeModel[] = [{
-    id: 'node1',
-    style:{fill:'#6BA5D7',strokeColor:'#6BA5D7'},
-    width: 100,
-    height: 100,
-    offsetX: 100,
-    offsetY: 100
-},{
-    id: 'node2',
-    style:{fill:'#6BA5D7',strokeColor:'#6BA5D7'},
-    width: 100,
-    height: 100,
-    offsetX: 300,
-    offsetY: 100
-}];
-let snapSettings: SnapSettingsModel = {
+import {
+    Diagram,
+    SnapConstraints,
+    SnapSettingsModel,
+    Snapping,
+    NodeModel,
+  } from '@syncfusion/ej2-diagrams';
+  Diagram.Inject(Snapping);
+  let nodes: NodeModel[] = [
+    {
+      id: 'node1',
+      style: { fill: '#6BA5D7', strokeColor: '#6BA5D7' },
+      width: 100,
+      height: 100,
+      offsetX: 100,
+      offsetY: 100,
+    },
+    {
+      id: 'node2',
+      style: { fill: '#6BA5D7', strokeColor: '#6BA5D7' },
+      width: 100,
+      height: 100,
+      offsetX: 300,
+      offsetY: 100,
+    },
+  ];
+  let snapSettings: SnapSettingsModel = {
     // Enable snap to object constraint
-    constraints: SnapConstraints.SnapToObject|SnapConstraints.ShowLines,
+    constraints: SnapConstraints.SnapToObject | SnapConstraints.ShowLines,
     // Sets the Snap object distance
     snapObjectDistance: 10,
-    // Snap Angle for object
-    snapAngle: 10,
-    // Set the Snapline color
-    snapLineColor: 'red'
-
-};
-let diagram: Diagram = new Diagram({
+  };
+  let diagram: Diagram = new Diagram({
     width: '100%',
     height: '500px',
     nodes: nodes,
-    snapSettings: snapSettings
-});
-diagram.appendTo('#element');
-
-
-
+    snapSettings: snapSettings,
+  });
+  diagram.appendTo('#element');
+

ej2-javascript/code-snippet/diagram/gridlines-dots/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/gridlines-dots/index.js

@@ -0,0 +1,28 @@
+var snapSettings = {
+    // Define the Constraints for gridlines and snapping
+    constraints: ej.diagrams.SnapConstraints.ShowLines,
+    gridType: 'Dots',
+    // Defines the horizontalGridlines for SnapSettings
+    horizontalGridlines: {
+      // Sets the line color of gridlines
+      lineColor: 'blue',
+      // Defines the dot intervals of gridlines
+      dotIntervals: [3, 20, 1, 20, 1, 20, 1, 20, 1, 20],
+    },
+    // Defines the verticalGridlines for SnapSettings
+    verticalGridlines: {
+      // Defines the dot intervals of gridlines
+      dotIntervals: [3, 20, 1, 20, 1, 20],
+      // Sets the line color of gridlines
+      lineColor: 'blue',
+    },
+  };
+  var diagram = new ej.diagrams.Diagram(
+    {
+      width: '100%',
+      height: '700px',
+      snapSettings: snapSettings,
+    },
+    '#element'
+  );
+

ej2-javascript/code-snippet/diagram/gridlines-dots/index.ts

@@ -0,0 +1,27 @@
+import {
+    Diagram,
+    SnapConstraints,
+    SnapSettingsModel,
+    Snapping,
+  } from '@syncfusion/ej2-diagrams';
+  Diagram.Inject(Snapping);
+  let snapSettings: SnapSettingsModel = {
+    constraints: SnapConstraints.ShowLines,
+    horizontalGridlines: {
+      // Sets the lineIntervals of Gridlines
+      lineIntervals: [1.25, 10, 0.25, 10, 0.25, 10, 0.25, 10, 0.25, 10],
+      lineColor: 'black',
+    },
+    verticalGridlines: {
+      // Sets the lineIntervals of Gridlines
+      lineIntervals: [1.25, 10, 0.25, 10, 0.25, 10, 0.25, 10, 0.25, 10],
+      lineColor: 'black',
+    },
+  };
+  let diagram: Diagram = new Diagram({
+    width: '100%',
+    height: '500px',
+    snapSettings: snapSettings,
+  });
+  diagram.appendTo('#element');
+

ej2-javascript/code-snippet/diagram/gridlines-dots/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>