syncfusion-content · SyncfusionBuild · Jul 6, 2024 · Jul 5, 2024
diff --git a/ej2-javascript-toc.html b/ej2-javascript-toc.html
@@ -726,7 +726,7 @@
             <li><a href="/ej2-javascript/diagram/bpmn-dataObject">BPMN Data Object</a></li>
             <li><a href="/ej2-javascript/diagram/bpmn-dataSource">BPMN Data Source</a></li>
             <li><a href="/ej2-javascript/diagram/bpmn-textAnnotation">BPMN Text Annotation</a></li>
-            <li><a href="/ej2-javascript/diagram/bpmn-groups">BPMN Group</a></li>
+            <li><a href="/ej2-javascript/diagram/bpmn-group">BPMN Group</a></li>
             <li><a href="/ej2-javascript/diagram/bpmn-expandedSubProcess">BPMN Expanded SubProcess</a></li>
             <li><a href="/ej2-javascript/diagram/bpmn-flows">BPMN Flow Connectors</a></li>
         </ul>
@@ -765,7 +765,7 @@
             <li><a href="/ej2-javascript/diagram/node-labels">Annotation for Node</a></li>
             <li><a href="/ej2-javascript/diagram/connector-labels">Annotation for Connector</a></li>
             <li><a href="/ej2-javascript/diagram/label-appearance">Annotation Appearance</a></li>
-            <li><a href="/ej2-javascript/diagram/label-interaction">Annotation Iteraction</a></li>
+            <li><a href="/ej2-javascript/diagram/label-interaction">Annotation Interaction</a></li>
             <li><a href="/ej2-javascript/diagram/label-events">Annotation Events</a></li>
 
         </ul>
@@ -794,7 +794,7 @@
         <li><a href="/ej2-javascript/diagram/radial-layout">Radial tree</a></li>
         <li><a href="/ej2-javascript/diagram/mindmap-layout">Mind Map tree</a></li>
         <li><a href="/ej2-javascript/diagram/symmetric-layout">Symmetric layout</a></li>
-        <li><a href="/ej2-javascript/diagram/layout-customization">Layout customization tree</a></li>
+        <li><a href="/ej2-javascript/diagram/layout-customization">Layout customization</a></li>
         <li><a href="/ej2-javascript/diagram/layout-event">Events</a></li>
         </ul>
     </li>
@@ -1200,6 +1200,8 @@
                 <li><a href="/ej2-javascript/gantt/pdf-export/pdf-export">Pdf Export</a>
                     <ul>
                         <li><a href="/ej2-javascript/gantt/pdf-export/multiple-gantt-exporting">Multiple Gantt Exporting</a></li>
+                        <li><a href="/ej2-javascript/gantt/pdf-export/customize-pdf-export">Customize PDF Export</a></li>
+                        <li><a href="/ej2-javascript/gantt/pdf-export/header-and-footer">Header and Footer</a></li> 
                     </ul>
                 </li>
             </ul>
@@ -1227,7 +1229,8 @@
         </li>
         <li><a href="https://ej2.syncfusion.com/documentation/api/gantt/">API Reference</a></li>
     </ul>
-</li><li>
+</li>
+<li>
 Grid
 <ul>
 <li><a href="/ej2-javascript/grid/getting-started">Getting Started</a></li>

diff --git a/ej2-javascript/diagram/images/SymmetricNoneImage.png b/ej2-javascript/diagram/images/SymmetricNoneImage.png
diff --git a/ej2-javascript/diagram/js/bezier-controlPoint.md b/ej2-javascript/diagram/js/bezier-controlPoint.md
@@ -9,16 +9,18 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-### How to interact with the bezier segments efficiently
+# Bezier Control points 
+
+## How to interact with the bezier segments efficiently
 
 While interacting with multiple bezier segments, maintain their control points at the same distance and angle by using the bezierSettings.smoothness property of the connector class.
 
 | BezierSmoothness value | Description | Output |
 |-------- | -------- | -------- |
-| SymmetricDistance| Both control points of adjacent segments will be at the same distance when any one of them is editing. | ![Symmetric distance](../../../images/Symmetric-distance.gif) |
-| SymmetricAngle | Both control points of adjacent segments will be at the same angle when any one of them is editing. | ![Symmetric Angle](../../../images/symmetric-Angle.gif) |
-| Default | Both control points of adjacent segments will be at the same angle and same distance when any one of them is editing. | ![Default](../../../images/DefaultSymmetric.gif) |
-| None | Segment’s control points are interacted independently from each other. | ![None](../../../images/SymmetricNone.gif) |
+| SymmetricDistance| Both control points of adjacent segments will be at the same distance when any one of them is editing. | ![Symmetric distance](../images/Symmetric-distance.gif) |
+| SymmetricAngle | Both control points of adjacent segments will be at the same angle when any one of them is editing. | ![Symmetric Angle](../images/symmetric-Angle.gif) |
+| Default | Both control points of adjacent segments will be at the same angle and same distance when any one of them is editing. | ![Default](../images/DefaultSymmetric.gif) |
+| None | Segment’s control points are interacted independently from each other. | ![None](../images/SymmetricNoneImage.png) |
 
 {% tabs %}
 {% highlight js tabtitle="index.js" %}
@@ -31,14 +33,14 @@ While interacting with multiple bezier segments, maintain their control points a
 
 {% previewsample "page.domainurl/code-snippet/diagram/connectors-cs17" %}
 
-### How to show or hide the bezier segment’s control points
+## How to show or hide the bezier segment’s control points
 
-By using the [`controlPointsVisibility`](../api/diagram/controlPointsVisibility/) property of the Connector class, you can enable or disable the visibility of the bezier segment’s control points.
+By using the [`controlPointsVisibility`](../api/diagram/controlPointsVisibility/) property of [`bezierSettings`](../api/diagram/bezierSettingsModel/), you can enable or disable the visibility of the bezier segment’s control points.
 
 | ControlPointsVisibility value | Description | Output |
 |-------- | -------- | -------- |
-| None |It allows you to hide all control points of the bezier connector. | ![ControlPointsVisibility None](../../../images/Symmetric-distance.gif) |
-| Source | It allows you to show control points of the source segment and hides all other control points in a bezier connector. | ![ControlPointsVisibility Source](../../../images/symmetric-Angle.gif) |
-| Target | It allows you to show control points of the target segment and hides all other control points in a bezier connector. | ![ControlPointsVisibility Target](../../../images/DefaultSymmetric.gif) |
-| Intermediate | It allows you to show control points of the intermediate segments and hides all other control points in a bezier connector.| ![ControlPointsVisibility Intermediate](../../../images/SymmetricNone.gif) |
-| All | It allows you to show all the control points of the bezier connector, including the source, target, and intermediate segments’ control points. | ![ControlPointsVisibility All](../../../images/SymmetricNone.gif) |
+| None |It allows you to hide all control points of the bezier connector. | ![ControlPointsVisibility None](../images/controlPointVisibilityNone.png) |
+| Source | It allows you to show control points of the source segment and hides all other control points in a bezier connector. | ![ControlPointsVisibility Source](../images/controlPointVisibilitySource.png) |
+| Target | It allows you to show control points of the target segment and hides all other control points in a bezier connector. | ![ControlPointsVisibility Target](../images/controlPointVisibilityTarget.png) |
+| Intermediate | It allows you to show control points of the intermediate segments and hides all other control points in a bezier connector.| ![ControlPointsVisibility Intermediate](../images/controlPointVisibilityIntermediate.png) |
+| All | It allows you to show all the control points of the bezier connector, including the source, target, and intermediate segments’ control points. | ![ControlPointsVisibility All](../images/controlPointVisibilityAll.png) |
diff --git a/ej2-javascript/diagram/js/bezier-segEditOrientation.md b/ej2-javascript/diagram/js/bezier-segEditOrientation.md
@@ -9,16 +9,18 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
+# Bezier Connector Settings
+
 ## How to edit bezier segments based on bezier connector settings
 
-The intermediate point of two adjacent bezier segments can be edited interactively based on the [`segmentEditOrientation`](../api/diagram/bezierSegmentEditOrientation/) property of the Connector class.
+The intermediate point of two adjacent bezier segments can be edited interactively based on the [`segmentEditOrientation`](../api/diagram/bezierSegmentEditOrientation/) property of [`bezierSettings`](../api/diagram/bezierSettingsModel/).
 
 | SegmentEditOrientation value | Description | Output |
 |-------- | -------- | -------- |
-| Bidirectional |It allows the intermediate points to be dragged in either vertical or horizontal directions. | ![Bidirectional](../../../images/bez-bidirectional.gif) |
-| Freeform | It allows the intermediate points to be dragged in any direction. | ![Freeform](../../../images/bez-freeform.gif) |
+| Bidirectional |It allows the intermediate points to be dragged in either vertical or horizontal directions. | ![Bidirectional](../images/bez-bidirectional.gif) |
+| Freeform | It allows the intermediate points to be dragged in any direction. | ![Freeform](../images/bez-freeform.gif) |
 
-The following code illustrates how to interact with Bezier efficiently by using the [`smoothness`](../api/diagram/bezierSmoothness/) and `segmentEditOrientation` properties of the Connector class.
+The following code illustrates how to interact with Bezier efficiently by using the [`smoothness`](../api/diagram/bezierSmoothness/) and `segmentEditOrientation` properties of the `bezierSettings`.
 
 {% tabs %}
 {% highlight js tabtitle="index.js" %}

diff --git a/ej2-javascript/diagram/js/connector-customization.md b/ej2-javascript/diagram/js/connector-customization.md
@@ -59,7 +59,7 @@ The following code example illustrates how to customize the appearance of the de
 
 The gradient property is used to set the gradient color for the decorator. There are two types of gradient.
  * Linear
- * Raial
+ * Radial
 
 The following code example illustrates how to apply gradient for the decorator.
 
@@ -273,5 +273,5 @@ The following code illustrates how to split the connector and create a connectio
 
 {% previewsample "page.domainurl/code-snippet/diagram/connectors-cs29" %}
 
-![Enable Connector Split](../images/EnableSplit.gif)
+![Enable Connector Split](images/EnableSplit.gif)
 
diff --git a/ej2-javascript/diagram/js/connector-interaction.md b/ej2-javascript/diagram/js/connector-interaction.md
@@ -17,8 +17,6 @@ Connectors can be selected, dragged, and routed over the diagram page.
 
 A connector can be selected, simply just by clicking on it.
 
-![Connector select unSelect GIF](../images/connector-SelectionGif.gif)
-
 A connector can be selected at runtime by using the Select method and clear the selection in the diagram using the ClearSelection. The following code explains how to select and clear selection in the diagram.
 
 {% tabs %}
@@ -36,7 +34,7 @@ A connector can be selected at runtime by using the Select method and clear the
 
 Connector can be dragged by just clicking on the connector and dragging.
 
-![Connector Drag Gif](../images/connector-dragGif.gif)
+![Connector Drag Gif](images/connector-dragGif.gif)
 
 A connector can be dragged at runtime by using the Drag method. The following code explains how to drag the connector by using the drag method.
 
@@ -55,7 +53,7 @@ A connector can be dragged at runtime by using the Drag method. The following co
 
 The connector can be selected by clicking it. When the connector is selected, circles will be added on the starting and ending of the connector that is represented by Thumbs. Clicking and dragging those handles helps you to adjust the source and target points.
 
-![End Point drag GIF](../images/EndPointDragGif.gif)
+![End Point drag GIF](images/EndPointDragGif.gif)
 
 The following code example shows how to drag connector end point at runtime.
 

diff --git a/ej2-javascript/diagram/js/constraints.md b/ej2-javascript/diagram/js/constraints.md
@@ -19,14 +19,6 @@ To know more about Bitwise operators, refer to [`Bitwise Operations`](#bitwise-o
 
 [`Diagram constraints`](../api/diagram/diagramconstraints/) allows you to enable or disable the following behaviors:
 
-* Page editing
-* Bridging
-* Zoom and pan
-* Undo/redo
-* Tooltip
-* Line routing
-* Virtualization
-
 The following table displays the list of all diagram constraints.
 
 | Constraints | Description |
@@ -93,16 +85,6 @@ N> By default, the following constraints are enabled in the diagram,
 
 Node constraints allows to enable or disable the following behaviors of node. They are as follows:
 
-* Select
-* Drag
-* Resize
-* Rotate
-* Delete
-* InConnect
-* OutConnect
-* Shadow
-* Tooltip
-
 | Constraints | Description |
 | -------- | -------- |
 |None|Disable all node Constraints|
@@ -207,15 +189,6 @@ N>By default, the following constraints are enabled for the node,
 
 Connector constraints allows you to enable or disable certain behaviors of connectors.
 
-* Select
-* Drag
-* DragSourceEnd
-* DragTargetEnd
-* Delete
-* InheritBridging
-* PointerEvents
-* Tooltip
-
 | Constraints | Description |
 | -------- | -------- |
 |None|Disable all connector Constraints.|
@@ -332,9 +305,6 @@ N>By default, the following constraints are enabled for the connector,
 
 The constraints property of the Port allows you to enable or disable the following behaviors of port.
 
-* InConnect
-* OutConnect
-
 | Constraints | Description |
 | -------- | -------- |
 |None|Disable all port Constraints.|
@@ -476,10 +446,6 @@ For more details about annotation constraints, refer to [`AnnotationConstraints`
 
 Selector visually represents the selected elements with certain editable thumbs. The visibility of the thumbs can be controlled with selector constraints. The part of selector is categorized as follows:
 
-* Resizer
-* Rotator
-* User handles
-
 | Constraints | Description |
 | -------- | -------- |
 |None|Hides all the selector elements.|
@@ -550,12 +516,7 @@ N> By default, the following constraints are enabled for the selected items,
 
 ## Snap constraints
 
-Snap constraints control the visibility of gridlines and enable/disable snapping. Snap constraints allow to set the following behaviors.
-
-* Show only horizontal or vertical gridlines.
-* Show both horizontal and vertical gridlines.
-* Snap to either horizontal or vertical gridlines.
-* Snap to both horizontal and vertical gridlines.
+Snap constraints control the visibility of gridlines and enable/disable snapping.
 
 The following list of snapping constraints are used to enable or disable certain features of snapping.
 
@@ -617,11 +578,7 @@ N> By default, the following constraints are enabled for the snap functionality
 
 ## Boundary constraints
 
-Boundary constraints defines a boundary for the diagram inside which the interaction should be done. Boundary constraints allow to set the following behaviors.
-
-* Infinite
-* Diagram
-* Page
+Boundary constraints defines a boundary for the diagram inside which the interaction should be done.
 
 The following list of constraints are used to enable or disable certain features of boundary interactions of the diagram.
 

diff --git a/ej2-javascript/diagram/ts/bezier-controlPoint.md b/ej2-javascript/diagram/ts/bezier-controlPoint.md
@@ -8,17 +8,18 @@ publishingplatform: ##Platform_Name##
 documentation: ug
 domainurl: ##DomainURL##
 ---
+# Bezier Control points 
 
-### How to interact with the bezier segments efficiently
+## How to interact with the bezier segments efficiently
 
 While interacting with multiple bezier segments, maintain their control points at the same distance and angle by using the bezierSettings.smoothness property of the connector class.
 
 | BezierSmoothness value | Description | Output |
 |-------- | -------- | -------- |
-| SymmetricDistance| Both control points of adjacent segments will be at the same distance when any one of them is editing. | ![Symmetric distance](../../../images/Symmetric-distance.gif) |
-| SymmetricAngle | Both control points of adjacent segments will be at the same angle when any one of them is editing. | ![Symmetric Angle](../../../images/symmetric-Angle.gif) |
-| Default | Both control points of adjacent segments will be at the same angle and same distance when any one of them is editing. | ![Default](../../../images/DefaultSymmetric.gif) |
-| None | Segment’s control points are interacted independently from each other. | ![None](../../../images/SymmetricNone.gif) |
+| SymmetricDistance| Both control points of adjacent segments will be at the same distance when any one of them is editing. | ![Symmetric distance](../images/Symmetric-distance.gif) |
+| SymmetricAngle | Both control points of adjacent segments will be at the same angle when any one of them is editing. | ![Symmetric Angle](../images/symmetric-Angle.gif) |
+| Default | Both control points of adjacent segments will be at the same angle and same distance when any one of them is editing. | ![Default](../images/DefaultSymmetric.gif) |
+| None | Segment’s control points are interacted independently from each other. | ![None](../images/SymmetricNoneImage.png) |
 
 {% tabs %}
 {% highlight ts tabtitle="index.ts" %}
@@ -31,14 +32,14 @@ While interacting with multiple bezier segments, maintain their control points a
 
 {% previewsample "page.domainurl/code-snippet/diagram/connectors-cs17" %}
 
-### How to show or hide the bezier segment’s control points
+## How to show or hide the bezier segment’s control points
 
-By using the [`controlPointsVisibility`](../api/diagram/controlPointsVisibility/) property of the Connector class, you can enable or disable the visibility of the bezier segment’s control points.
+By using the [`controlPointsVisibility`](../api/diagram/controlPointsVisibility/) property of [`bezierSettings`](../api/diagram/bezierSettingsModel/), you can enable or disable the visibility of the bezier segment’s control points.
 
 | ControlPointsVisibility value | Description | Output |
 |-------- | -------- | -------- |
-| None |It allows you to hide all control points of the bezier connector. | ![ControlPointsVisibility None](../../../images/Symmetric-distance.gif) |
-| Source | It allows you to show control points of the source segment and hides all other control points in a bezier connector. | ![ControlPointsVisibility Source](../../../images/symmetric-Angle.gif) |
-| Target | It allows you to show control points of the target segment and hides all other control points in a bezier connector. | ![ControlPointsVisibility Target](../../../images/DefaultSymmetric.gif) |
-| Intermediate | It allows you to show control points of the intermediate segments and hides all other control points in a bezier connector.| ![ControlPointsVisibility Intermediate](../../../images/SymmetricNone.gif) |
-| All | It allows you to show all the control points of the bezier connector, including the source, target, and intermediate segments’ control points. | ![ControlPointsVisibility All](../../../images/SymmetricNone.gif) |
+| None |It allows you to hide all control points of the bezier connector. | ![ControlPointsVisibility None](../images/controlPointVisibilityNone.png) |
+| Source | It allows you to show control points of the source segment and hides all other control points in a bezier connector. | ![ControlPointsVisibility Source](../images/controlPointVisibilitySource.png) |
+| Target | It allows you to show control points of the target segment and hides all other control points in a bezier connector. | ![ControlPointsVisibility Target](../images/controlPointVisibilityTarget.png) |
+| Intermediate | It allows you to show control points of the intermediate segments and hides all other control points in a bezier connector.| ![ControlPointsVisibility Intermediate](../images/controlPointVisibilityIntermediate.png) |
+| All | It allows you to show all the control points of the bezier connector, including the source, target, and intermediate segments’ control points. | ![ControlPointsVisibility All](../images/controlPointVisibilityAll.png) |