diff --git a/ej2-javascript/3D-chart/ts/getting-started.md b/ej2-javascript/3D-chart/ts/getting-started.md
index 9d60f98a3..b9c3b614b 100644
--- a/ej2-javascript/3D-chart/ts/getting-started.md
+++ b/ej2-javascript/3D-chart/ts/getting-started.md
@@ -11,7 +11,7 @@ domainurl: ##DomainURL##
# Getting started in ##Platform_Name## 3D Chart control
-This section explains how to create a simple 3D Chart and configure its available functionalities in TypeScript using Essential JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository.
+This section explains how to create a simple 3D Chart and configure its available functionalities in TypeScript using Essential JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository.
> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/).
@@ -31,7 +31,7 @@ Below is the list of minimum dependencies required to use the 3D Chart.
## Set up development environment
-Open the command prompt from the required directory, and run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack).
+Open the command prompt from the required directory, and run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-).
{% tabs %}
{% highlight bash tabtitle="CMD" %}
@@ -266,4 +266,4 @@ The tooltip is useful when you cannot display information by using the data labe
{% previewsample "page.domainurl/code-snippet/chart3d/getting-started-cs7" %}
-> You can refer to our [JavaScript 3D Charts](https://www.syncfusion.com/javascript-ui-controls/js-3d-charts) feature tour page for its groundbreaking feature representations. You can also explore our [JavaScript 3D Charts example](https://ej2.syncfusion.com/demos/#/bootstrap5/three-dimension-chart/column.html) that shows various 3D Chart types and how to represent time-dependent data, showing trends in data at equal intervals.
\ No newline at end of file
+> You can refer to our `JavaScript 3D Charts` feature tour page for its groundbreaking feature representations. You can also explore our [JavaScript 3D Charts example](https://ej2.syncfusion.com/demos/#/material3/three-dimension-chart/column.html) that shows various 3D Chart types and how to represent time-dependent data, showing trends in data at equal intervals.
\ No newline at end of file
diff --git a/ej2-javascript/auto-complete/filtering.md b/ej2-javascript/auto-complete/filtering.md
index 18b6ceee5..f3d8dec49 100644
--- a/ej2-javascript/auto-complete/filtering.md
+++ b/ej2-javascript/auto-complete/filtering.md
@@ -186,6 +186,6 @@ In the following sample,data with diacritics are bound as dataSource for AutoCom
## See Also
-* [How to acheive autofill while filtering](./how-to/autofill/)
+* [How to acheive autofill while filtering](./how-to/autofill)
* [How to group the data using header](./grouping)
-* [How to highlight the search data](./how-to/custom-search/)
\ No newline at end of file
+* [How to highlight the search data](./how-to/custom-search)
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/maps/default-map-cs141/ts/index.html b/ej2-javascript/code-snippet/maps/default-map-cs141/ts/index.html
index f2cbf7f6f..04e120609 100644
--- a/ej2-javascript/code-snippet/maps/default-map-cs141/ts/index.html
+++ b/ej2-javascript/code-snippet/maps/default-map-cs141/ts/index.html
@@ -11,7 +11,6 @@
-
diff --git a/ej2-javascript/code-snippet/maps/default-map-cs62/js/index.html b/ej2-javascript/code-snippet/maps/default-map-cs62/js/index.html
index d033a30fc..312c151f5 100644
--- a/ej2-javascript/code-snippet/maps/default-map-cs62/js/index.html
+++ b/ej2-javascript/code-snippet/maps/default-map-cs62/js/index.html
@@ -10,7 +10,6 @@
-
diff --git a/ej2-javascript/code-snippet/maps/default-map-cs89/js/index.html b/ej2-javascript/code-snippet/maps/default-map-cs89/js/index.html
index 0f1ced118..312c151f5 100644
--- a/ej2-javascript/code-snippet/maps/default-map-cs89/js/index.html
+++ b/ej2-javascript/code-snippet/maps/default-map-cs89/js/index.html
@@ -8,7 +8,9 @@
-
+
+
+
diff --git a/ej2-javascript/code-snippet/maps/default-map-cs90/world-map.js b/ej2-javascript/code-snippet/maps/default-map-cs89/world-map.js
similarity index 100%
rename from ej2-javascript/code-snippet/maps/default-map-cs90/world-map.js
rename to ej2-javascript/code-snippet/maps/default-map-cs89/world-map.js
diff --git a/ej2-javascript/code-snippet/maps/default-map-cs90/js/index.html b/ej2-javascript/code-snippet/maps/default-map-cs90/js/index.html
index f8ff963b8..3f96ee156 100644
--- a/ej2-javascript/code-snippet/maps/default-map-cs90/js/index.html
+++ b/ej2-javascript/code-snippet/maps/default-map-cs90/js/index.html
@@ -8,7 +8,8 @@
-
+
+
diff --git a/ej2-javascript/code-snippet/maps/default-map-cs89/usa.js b/ej2-javascript/code-snippet/maps/default-map-cs90/usa.js
similarity index 100%
rename from ej2-javascript/code-snippet/maps/default-map-cs89/usa.js
rename to ej2-javascript/code-snippet/maps/default-map-cs90/usa.js
diff --git a/ej2-javascript/code-snippet/pivot-table/pivot-table-cs501/index.ts b/ej2-javascript/code-snippet/pivot-table/pivot-table-cs501/index.ts
index dd16203ae..1598db21c 100644
--- a/ej2-javascript/code-snippet/pivot-table/pivot-table-cs501/index.ts
+++ b/ej2-javascript/code-snippet/pivot-table/pivot-table-cs501/index.ts
@@ -20,7 +20,7 @@ let pivotGridObj: PivotView = new PivotView({
}
}
});
-pivotGridObj.appendTo('#PivotTable');
+pivotGridObj.appendTo('#PivotView');
function secondsToHms(d: number) {
d = Number(d);
diff --git a/ej2-javascript/code-snippet/predefined-dialogs/custom-dialog-content-cs1/systemjs.config.js b/ej2-javascript/code-snippet/predefined-dialogs/custom-dialog-content-cs1/systemjs.config.js
index 716b84115..7f298062f 100644
--- a/ej2-javascript/code-snippet/predefined-dialogs/custom-dialog-content-cs1/systemjs.config.js
+++ b/ej2-javascript/code-snippet/predefined-dialogs/custom-dialog-content-cs1/systemjs.config.js
@@ -18,8 +18,7 @@ System.config({
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
"@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
"@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
- "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.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"
}
});
diff --git a/ej2-javascript/combo-box/data-binding.md b/ej2-javascript/combo-box/data-binding.md
index 9145b658c..f6ea57e5d 100644
--- a/ej2-javascript/combo-box/data-binding.md
+++ b/ej2-javascript/combo-box/data-binding.md
@@ -160,7 +160,7 @@ In the following sample, displayed first 6 contacts from the `customer` table of
## See Also
-* [How to acheive cascading](./how-to/cascading)
-* [How to load data using template](./templates#item-template)
+* [How to acheive cascading](./how-to/cascading/)
+* [How to load data using template](./templates/#item-template)
* [How to group the data using header](./grouping)
* [How to filter the bound data](./filtering)
\ No newline at end of file
diff --git a/ej2-javascript/combo-box/ts/getting-started.md b/ej2-javascript/combo-box/ts/getting-started.md
index 445f1c8a6..d79b69289 100644
--- a/ej2-javascript/combo-box/ts/getting-started.md
+++ b/ej2-javascript/combo-box/ts/getting-started.md
@@ -11,7 +11,7 @@ domainurl: ##DomainURL##
# Getting started in ##Platform_Name## Combo box control
-This section explains how to create a simple **ComboBox** component and configure its available functionalities in TypeScript, using Essential JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository.
+This section explains how to create a simple **ComboBox** component and configure its available functionalities in TypeScript, using Essential JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository.
> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/).
@@ -32,7 +32,7 @@ The following list of dependencies are required to use the `ComboBox` component
## Set up development environment
-Open the command prompt from the required directory, and run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack).
+Open the command prompt from the required directory, and run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-).
{% tabs %}
{% highlight bash tabtitle="CMD" %}
diff --git a/ej2-javascript/context-menu/how-to/enable-or-disable-context-menu-items.md b/ej2-javascript/context-menu/how-to/enable-or-disable-context-menu-items.md
index f294d1187..e7b848b1d 100644
--- a/ej2-javascript/context-menu/how-to/enable-or-disable-context-menu-items.md
+++ b/ej2-javascript/context-menu/how-to/enable-or-disable-context-menu-items.md
@@ -11,7 +11,7 @@ domainurl: ##DomainURL##
# Enable or disable context menu items in ##Platform_Name## Context menu control
-You can enable and disable the menu items using the [`enableItems`](../../api/menu/#enableitems) method in ContextMenu. To enable menuItems, set the `enable` property in argument to `true` and vice-versa.
+You can enable and disable the menu items using the [`enableItems`](../../api/menu#enableitems) method in ContextMenu. To enable menuItems, set the `enable` property in argument to `true` and vice-versa.
In the following example, the **Display Settings** in parent items and **Medium icons** in sub menu items are disabled.
@@ -36,4 +36,4 @@ In the following example, the **Display Settings** in parent items and **Medium
{% previewsample "page.domainurl/code-snippet/context-menu/getting-started-cs3" %}
{% endif %}
-> To disable sub menu items, use the [`beforeOpen`](../../api/menu/#beforeopen) event.
\ No newline at end of file
+> To disable sub menu items, use the [`beforeOpen`](../../api/menu#beforeopen) event.
\ No newline at end of file
diff --git a/ej2-javascript/context-menu/js/es5-getting-started.md b/ej2-javascript/context-menu/js/es5-getting-started.md
index f1b8bc039..86370aa27 100644
--- a/ej2-javascript/context-menu/js/es5-getting-started.md
+++ b/ej2-javascript/context-menu/js/es5-getting-started.md
@@ -153,9 +153,9 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin
> Control Styles: `https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/styles/material.css`
**Example:**
-> Script: [`https://cdn.syncfusion.com/ej2/ej2-navigations/dist/global/ej2-navigations.min.js`](http://cdn.syncfusion.com/ej2/ej2-navigations/dist/global/ej2-navigations.min.js)
+> Script: [`https://cdn.syncfusion.com/ej2/ej2-navigations/dist/global/ej2-navigations.min.js`](https://cdn.syncfusion.com/ej2/ej2-navigations/dist/global/ej2-navigations.min.js)
>
-> Styles: [`https://cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css`](http://cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css)
+> Styles: [`https://cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css`](https://cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css)
**Step 3:** Create a HTML page (index.html) in `~/quickstart/index.html` location and add the CDN link references. Now, add the `ContextMenu` element and initiate the `Syncfusion JavaScript ContextMenu` control in the index.html by using following code.
@@ -171,7 +171,7 @@ The [`Custom Resource Generator (CRG)`](https://crg.syncfusion.com/) is an onlin
## Rendering items with Separator
-The Separators are the horizontal lines that are used to separate the menu items. You cannot select the separators. You can enable separators to group the menu items using the [`separator`](../api/context-menu/menuItemModel#separator) property. Cut, Copy, and Paste menu items are grouped using the `separator` property in the following sample.
+The Separators are the horizontal lines that are used to separate the menu items. You cannot select the separators. You can enable separators to group the menu items using the [`separator`](../api/context-menu/menuItemModel/#separator) property. Cut, Copy, and Paste menu items are grouped using the `separator` property in the following sample.
{% tabs %}
{% highlight html tabtitle="index.html" %}
@@ -181,7 +181,7 @@ The Separators are the horizontal lines that are used to separate the menu items
{% previewsample "page.domainurl/code-snippet/context-menu/es5-getting-started-cs2" %}
-> The [`separator`](../api/context-menu/menuItemModel#separator) property `should not` be given along with the other fields in the [`MenuItem`](../api/context-menu/menuItemModel).
+> The [`separator`](../api/context-menu/menuItemModel/#separator) property `should not` be given along with the other fields in the [`MenuItem`](../api/context-menu/menuItemmodel/).
## See Also
diff --git a/ej2-javascript/diagram/images/javascript-diagram-symbol-custom-tooltip.gif b/ej2-javascript/diagram/images/SymbolCustomTooltip.gif
similarity index 100%
rename from ej2-javascript/diagram/images/javascript-diagram-symbol-custom-tooltip.gif
rename to ej2-javascript/diagram/images/SymbolCustomTooltip.gif
diff --git a/ej2-javascript/diagram/images/javascript-diagram-symbol-palatte-tooltip.gif b/ej2-javascript/diagram/images/SymbolPalatteTooltip.gif
similarity index 100%
rename from ej2-javascript/diagram/images/javascript-diagram-symbol-palatte-tooltip.gif
rename to ej2-javascript/diagram/images/SymbolPalatteTooltip.gif
diff --git a/ej2-javascript/diagram/ts/symbol-palette.md b/ej2-javascript/diagram/ts/symbol-palette.md
index 9d535817a..ad31dcb28 100644
--- a/ej2-javascript/diagram/ts/symbol-palette.md
+++ b/ej2-javascript/diagram/ts/symbol-palette.md
@@ -1,7 +1,7 @@
---
layout: post
-title: Symbol Palette in ##Platform_Name## Diagram Control | Syncfusion
-description: Learn here all about Symbol Palette in Syncfusion Essential ##Platform_Name## Diagram control, its elements and more.
+title: Symbol palette in ##Platform_Name## Diagram control | Syncfusion
+description: Learn here all about Symbol palette in Syncfusion ##Platform_Name## Diagram control of Syncfusion Essential JS 2 and more.
platform: ej2-javascript
control: Symbol palette
publishingplatform: ##Platform_Name##
@@ -9,7 +9,7 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Symbol Palette in ##Platform_Name## Diagram Control
+# Symbol palette in ##Platform_Name## Diagram control
The **SymbolPalette** displays a collection of palettes. The palette shows a set of nodes and connectors. It allows to drag and drop the nodes and connectors into the diagram.
@@ -18,7 +18,7 @@ The **SymbolPalette** displays a collection of palettes. The palette shows a s
## Create symbol palette
-The [`width`](../api/diagram/palette/#width-number) and [`height`](../api/diagram/palette/#height-number) properties of the symbol palette allows to define the size of the symbol palette.
+The [`width`](../api/diagram/palette#width-number) and [`height`](../api/diagram/palette#height-number) properties of the symbol palette allows to define the size of the symbol palette.
```ts
import {
@@ -37,11 +37,11 @@ palette.appendTo('#element');
## Add palettes to SymbolPalette
-A palette allows to display a group of related symbols and it textually annotates the group with its header. A [`Palettes`](../api/diagram/palette/#palettes-PaletteModel[]) can be added as a collection of symbol groups.
+A palette allows to display a group of related symbols and it textually annotates the group with its header. A [`Palettes`](../api/diagram/palette#palettes-PaletteModel[]) can be added as a collection of symbol groups.
-The collection of predefined symbols can be added in palettes using the [`symbols`](../api/diagram/palette/#symbols-[]) property.
+The collection of predefined symbols can be added in palettes using the [`symbols`](../api/diagram/palette#symbols-[]) property.
-To initialize a palette, define a JSON object with the property [`ID`](../api/diagram/palette/#id-string) that is unique ID is set to the palettes.
+To initialize a palette, define a JSON object with the property [`ID`](../api/diagram/palette#id-string) that is unique ID is set to the palettes.
The following code example illustrates how to define a palette and how its added to symbol palette.
@@ -60,15 +60,15 @@ The following code example illustrates how to define a palette and how its added
Palettes can be annotated with its header texts.
-The [`title`](../api/diagram/palette/#title-string) displayed as the header text of palette.
+The [`title`](../api/diagram/palette#title-string) displayed as the header text of palette.
-The [`expanded`](../api/diagram/palette/#expanded-boolean) property of palette allows to expand/collapse its palette items.
+The [`expanded`](../api/diagram/palette#expanded-boolean) property of palette allows to expand/collapse its palette items.
-The [`height`](../api/diagram/palette/#height-number) property of palette sets the height of the symbol group.
+The [`height`](../api/diagram/palette#height-number) property of palette sets the height of the symbol group.
-The [`iconCss`](../api/diagram/palette/#iconCss-string) property sets the content of the symbol group.
+The [`iconCss`](../api/diagram/palette#iconCss-string) property sets the content of the symbol group.
-The [`description`](../api/diagram/symbolDescription/#description) defines the text to be displayed and how that is to be handled in `getSymbolInfo`.
+The [`description`](../api/diagram/symbolDescription#description) defines the text to be displayed and how that is to be handled in `getSymbolInfo`.
Also, any HTML element into a palette header can be embedded by defining the getSymbolInfo property.
The following code example illustrates how to customize palette headers.
@@ -101,7 +101,7 @@ The symbol palette panel can be restricted from getting expanded. The [`cancel`]
## Stretch the symbols into the palette
-The [`fit`](../api/diagram/symbolInfo/#fit-boolean) property defines whether the symbol has to be fit inside the size, that is defined by the symbol palette. For example, when you resize the rectangle in the symbol, ratio of the rectangle size has to be maintained rather changing into square shape. The following code example illustrates how to customize the symbol size.
+The [`fit`](../api/diagram/symbolInfo#fit-boolean) property defines whether the symbol has to be fit inside the size, that is defined by the symbol palette. For example, when you resize the rectangle in the symbol, ratio of the rectangle size has to be maintained rather changing into square shape. The following code example illustrates how to customize the symbol size.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
@@ -116,9 +116,9 @@ The [`fit`](../api/diagram/symbolInfo/#fit-boolean) property defines whether the
## Add/Remove symbols to palette at runtime
-* Symbols can be added to palette at runtime by using public method, [`addPaletteItem`](../api/diagram/palette/#addPaletteItem-number).
+* Symbols can be added to palette at runtime by using public method, [`addPaletteItem`](../api/diagram/palette#addPaletteItem-number).
-* Symbols can be removed from palette at runtime by using public method, [`removePaletteItem`](../api/diagram/palette/#removePaletteItem-number).
+* Symbols can be removed from palette at runtime by using public method, [`removePaletteItem`](../api/diagram/palette#removePaletteItem-number).
## Customize the size of symbols
@@ -139,7 +139,7 @@ The [`symbolMargin`](../api/diagram/symbolPaletteModel/#symbolmargin) property i
## Symbol preview
-The symbol preview size of the palette items can be customized using [`symbolPreview`](../api/diagram/symbolPreview/). The [`width`](../api/diagram/symbolPreview/#width-number) and [`height`](../api/diagram/symbolPreview/#height-number) properties of SymbolPalette enables you to define the preview size to all the symbol palette items. The [`offset`](../api/diagram/symbolPreview/#offset-PointModel) of the dragging helper relative to the mouse cursor.
+The symbol preview size of the palette items can be customized using [`symbolPreview`](../api/diagram/symbolPreview). The [`width`](../api/diagram/symbolPreview#width-number) and [`height`](../api/diagram/symbolPreview#height-number) properties of SymbolPalette enables you to define the preview size to all the symbol palette items. The [`offset`](../api/diagram/symbolPreview#offset-PointModel) of the dragging helper relative to the mouse cursor.
The following code example illustrates how to change the preview size of a palette item.
@@ -212,7 +212,7 @@ When hovering over symbols in the symbol palette, the default tooltip displays t
Refer to the image below for an illustration of the tooltip behavior in the symbol palette.
-
+
### Custom tooltip for symbols
@@ -235,12 +235,12 @@ Here, the code provided below demonstrates how to define tooltip content to symb
Differentiate the tooltips between symbols in the symbol palette and dropped nodes by utilizing the dragEnter event. When a custom tooltip is defined for a symbol, it will be displayed for both the symbol and the dropped node in the diagram canvas. However, to provide distinct tooltips for symbols in the palette and dropped nodes, capture the dragEnter event and assign specific tooltips dynamically.
-When a symbol is dragged from the symbol palette and enters the diagram canvas, the [`DragEnter`] [`IDragEnterEventArgs`](../api/diagram/iDragEnterEventArgs/) event is triggered. Within this event, you can define a new tooltip for the dropped node. By assigning custom tooltip content to the Tooltip property of the node, you can provide a distinct tooltip that is specific to the dropped node.
+When a symbol is dragged from the symbol palette and enters the diagram canvas, the [`DragEnter`] [`IDragEnterEventArgs`](../api/diagram/iDragEnterEventArgs) event is triggered. Within this event, you can define a new tooltip for the dropped node. By assigning custom tooltip content to the Tooltip property of the node, you can provide a distinct tooltip that is specific to the dropped node.
The following image illustrates the differentiation of tooltips displayed in the Symbol Palette and the Diagram.
-
+
The following code snippet will demonstrate how to define two different tooltip for symbol in the symbol palette and dropped node in the diagram canvas.
@@ -269,15 +269,15 @@ Palette interaction notifies the element enter, leave, and dragging of the symbo
## DragEnter
-[`DragEnter`] [`IDragEnterEventArgs`](../api/diagram/iDragEnterEventArgs/) notifies, when the element enter into the diagram from symbol palette.
+[`DragEnter`] [`IDragEnterEventArgs`](../api/diagram/iDragEnterEventArgs) notifies, when the element enter into the diagram from symbol palette.
## DragLeave
-[`DragLeave`] [`IDragLeaveEventArgs`](../api/diagram/iDragLeaveEventArgs/) notifies, when the element leaves from the diagram.
+[`DragLeave`] [`IDragLeaveEventArgs`](../api/diagram/iDragLeaveEventArgs) notifies, when the element leaves from the diagram.
## DragOver
-[`DragOver`] [`IDragOverEventArgs`](../api/diagram/iDragOverEventArgs/) notifies, when an element drag over another diagram element.
+[`DragOver`] [`IDragOverEventArgs`](../api/diagram/iDragOverEventArgs) notifies, when an element drag over another diagram element.
>Note: The diagram provides support to cancel the drag and drop operation from the symbol palette to the diagram when the ESC key is pressed
diff --git a/ej2-javascript/diagram/umldiagram.md b/ej2-javascript/diagram/umldiagram.md
index e714a31d6..7b82601b1 100644
--- a/ej2-javascript/diagram/umldiagram.md
+++ b/ej2-javascript/diagram/umldiagram.md
@@ -23,11 +23,11 @@ The UML class diagram shapes are explained as follows.
* A class defines a group of objects that share common specifications, features, constraints, and semantics. To create a class object, the classifier should be defined using the [class] (../api/diagram/umlClassifierShapeModel#class)notation. This notation serves as a foundational element in object-oriented programming, encapsulating the essential characteristics and behavior that objects belonging to the class will exhibit.
-* Also, define the [`name`](../api/diagram/umlClassModel/#name), [`attributes`](../api/diagram/umlClassModel/#attributes), and [`methods`](../api/diagram/umlClassModel/#methods) of the class using the class property of node.
+* Also, define the [`name`](../api/diagram/umlClassModel#name), [`attributes`](../api/diagram/umlClassModel#attributes), and [`methods`](../api/diagram/umlClassModel#methods) of the class using the class property of node.
-* The attribute’s [`name`](../api/diagram/umlClassAttributeModel/#name), [`type`](../api/diagram/umlClassAttributeModel/#type), and [`scope`](../api/diagram/umlClassAttributeModel/#scope) properties allow you to define the name, data type, and visibility of the attribute.
+* The attribute’s [`name`](../api/diagram/umlClassAttributeModel#name), [`type`](../api/diagram/umlClassAttributeModel#type), and [`scope`](../api/diagram/umlClassAttributeModel#scope) properties allow you to define the name, data type, and visibility of the attribute.
-* The method’s [`name`](../api/diagram/umlClassMethodModel/#name), [`parameters`](../api/diagram/umlClassMethodModel/#parameters), [`type`](../api/diagram/umlClassMethodModel/#type), and [`scope`](../api/diagram/umlClassMethodModel/#scope) properties allow you to define the name, parameter, return type, and visibility of the methods.
+* The method’s [`name`](../api/diagram/umlClassMethodModel#name), [`parameters`](../api/diagram/umlClassMethodModel#parameters), [`type`](../api/diagram/umlClassMethodModel#type), and [`scope`](../api/diagram/umlClassMethodModel#scope) properties allow you to define the name, parameter, return type, and visibility of the methods.
* The method parameters object properties allow you to define the name and type of the parameter.
@@ -62,9 +62,9 @@ The UML class diagram shapes are explained as follows.
### Interface
-* An interface is a specific type of classifier that signifies a declaration of a cohesive set of public features and obligations. When creating an interface, involves defining the classifier property using the [interface](../api/diagram/umlClassifierShapeModel/#interface) notation. This essential concept in object-oriented programming outlines a contract for classes to adhere to, specifying the required methods and behaviors without delving into the implementation details.
+* An interface is a specific type of classifier that signifies a declaration of a cohesive set of public features and obligations. When creating an interface, involves defining the classifier property using the [interface](../api/diagram/umlClassifierShapeModel#interface) notation. This essential concept in object-oriented programming outlines a contract for classes to adhere to, specifying the required methods and behaviors without delving into the implementation details.
-* Also, define the [`name`](../api/diagram/umlInterfaceModel/#name), [`attributes`](../api/diagram/umlInterfaceModel/#attributes), and [`methods`](../api/diagram/umlInterfaceModel/#methods) of the interface using the interface property of the node.
+* Also, define the [`name`](../api/diagram/umlInterfaceModel#name), [`attributes`](../api/diagram/umlInterfaceModel#attributes), and [`methods`](../api/diagram/umlInterfaceModel#methods) of the interface using the interface property of the node.
* The attribute’s name, type, and scope properties allow you to define the name, data type, and visibility of the attribute.
@@ -103,7 +103,7 @@ The UML class diagram shapes are explained as follows.
### Enumeration
-* To establish an enumeration, designate the classifier property of the node as [enumeration](../api/diagram/umlClassifierShapeModel/#enumeration). Additionally, define the name and enumerate the members of the enumeration using the appropriate enumeration property of the node. This process encapsulates a set of distinct values within the enumeration, allowing for a clear representation of specific, and named constants within a system.
+* To establish an enumeration, designate the classifier property of the node as [enumeration](../api/diagram/umlClassifierShapeModel#enumeration). Additionally, define the name and enumerate the members of the enumeration using the appropriate enumeration property of the node. This process encapsulates a set of distinct values within the enumeration, allowing for a clear representation of specific, and named constants within a system.
* You can set a name for the enumeration members collection using the name property of the members collection.
@@ -337,7 +337,7 @@ Multiplicity is a definition of an inclusive interval of non-negative integers t
* To set an optionality or cardinality for the connector source label, use the optional property.
-* The [`lowerBounds`](../api/diagram/multiplicityLabelModel/#lowerBounds) and [`upperBounds`](../api/diagram/multiplicityLabelModel/#upperBounds) could be natural constants or constant expressions evaluated to a natural (non negative) number. The upper bound could also be specified as an asterisk ‘\*’ which denotes an unlimited number of elements. The upper bound should be greater than or equal to the lower bound.
+* The [`lowerBounds`](../api/diagram/multiplicityLabelModel#lowerBounds) and [`upperBounds`](../api/diagram/multiplicityLabelModel#upperBounds) could be natural constants or constant expressions evaluated to a natural (non negative) number. The upper bound could also be specified as an asterisk ‘\*’ which denotes an unlimited number of elements. The upper bound should be greater than or equal to the lower bound.
* The following code example illustrates how to customize the multiplicity.
@@ -374,7 +374,7 @@ In UML nodes, child elements such as members, methods and attributes can be adde
### Adding UML child through code
-The [addChildToUmlNode](../api/diagram/#addchildtoumlnode) method is employed for dynamically adding a child to the UML node during runtime, providing flexibility in modifying the diagram structure programmatically.
+The [addChildToUmlNode](../api/diagram#addchildtoumlnode) method is employed for dynamically adding a child to the UML node during runtime, providing flexibility in modifying the diagram structure programmatically.
The following code illustrates how to add methods to UML nodes in the diagram.
diff --git a/ej2-javascript/drop-down-list/data-binding.md b/ej2-javascript/drop-down-list/data-binding.md
index 90ca9f62a..997657f68 100644
--- a/ej2-javascript/drop-down-list/data-binding.md
+++ b/ej2-javascript/drop-down-list/data-binding.md
@@ -164,7 +164,7 @@ The following sample displays the first 6 contacts from “Customers” table of
* [How to group the data using header](./grouping)
* [How to filter the bound data](./filtering)
* [How to get the count of the data when using remote data](./how-to/remote-data-bind)
-* [How to acheive cascading](./how-to/cascading)
-* [How to add item in between the options](./how-to/add-item)
-* [How to remove an item](./how-to/remove-item)
-* [How to preselect the items in dropdownlist](./how-to/multiple-cascading)
\ No newline at end of file
+* [How to acheive cascading](./how-to/cascading/)
+* [How to add item in between the options](./how-to/add-item/)
+* [How to remove an item](./how-to/remove-item/)
+* [How to preselect the items in dropdownlist](./how-to/multiple-cascading/)
\ No newline at end of file
diff --git a/ej2-javascript/form-validator/validation-rules.md b/ej2-javascript/form-validator/validation-rules.md
index 55b7648e4..6f3dc4ef0 100644
--- a/ej2-javascript/form-validator/validation-rules.md
+++ b/ej2-javascript/form-validator/validation-rules.md
@@ -32,7 +32,7 @@ The `FormValidator` has following default validation rules, which are used to va
| `min` | Input value must have greater than or equal to `min` number | if `min: 4`, **5** is valid and **2** is invalid |
| `regex` | Input value must have valid `regex` format | if `regex: '^[A-z]+$'`, **a** is valid and **1** is invalid |
-> The [`rules`](../api/form-validator/#rules) option should map the input element's `name` attribute.
+> The [`rules`](../api/form-validator#rules) option should map the input element's `name` attribute.
> The `FormValidator` library only validates the mapped input elements.
## Defining Custom Rules
diff --git a/ej2-javascript/gantt/pdf-export/pdf-export.md b/ej2-javascript/gantt/pdf-export/pdf-export.md
index 6d0b4e580..0d3849f13 100644
--- a/ej2-javascript/gantt/pdf-export/pdf-export.md
+++ b/ej2-javascript/gantt/pdf-export/pdf-export.md
@@ -1,7 +1,7 @@
---
layout: post
-title: Pdf export in ##Platform_Name## Gantt Control | Syncfusion
-description: Learn here all about Pdf export in Syncfusion Essential ##Platform_Name## Gantt control, its elements and more.
+title: Pdf export in ##Platform_Name## Gantt control | Syncfusion
+description: Learn here all about Pdf export in Syncfusion ##Platform_Name## Gantt control of Syncfusion Essential JS 2 and more.
platform: ej2-javascript
control: Pdf export
publishingplatform: ##Platform_Name##
@@ -9,7 +9,7 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Pdf export in ##Platform_Name## Gantt Control
+# Pdf export in ##Platform_Name## Gantt control
## PDF Export
@@ -148,9 +148,9 @@ Also, we can customize the chart width and grid width in exported file using [`c
## Exporting with column template
-The PDF export functionality allows to export Grid columns that include images, hyperlinks, and custom text to an PDF document using [pdfQueryCellInfo](https://ej2.syncfusion.com/react/documentation/api/gantt/pdfQueryCellInfoEventArgs/) event.
+The PDF export functionality allows to export Grid columns that include images, hyperlinks, and custom text to an PDF document using [pdfQueryCellInfo](https://helpej2.syncfusion.com/react/documentation/api/gantt/pdfQueryCellInfoEventArgs/) event.
-In the following sample, the hyperlinks and images are exported to PDF using [hyperlink](https://ej2.syncfusion.com/documentation/api/gantt/pdfQueryCellInfoEventArgs/#hyperlink) and [image](https://ej2.syncfusion.com/documentation/api/gantt/pdfQueryCellInfoEventArgs/#image) properties in the [pdfQueryCellInfo](https://ej2.syncfusion.com/documentation/api/gantt/pdfQueryCellInfoEventArgs/) event.
+In the following sample, the hyperlinks and images are exported to PDF using [hyperlink](https://helpej2.syncfusion.com/documentation/api/gantt/pdfQueryCellInfoEventArgs/#hyperlink) and [image](https://helpej2.syncfusion.com/documentation/api/gantt/pdfQueryCellInfoEventArgs/#image) properties in the [pdfQueryCellInfo](https://helpej2.syncfusion.com/documentation/api/gantt/pdfQueryCellInfoEventArgs/) event.
>Note: PDF Export supports base64 string to export the images.
diff --git a/ej2-javascript/gantt/timeline/timeline.md b/ej2-javascript/gantt/timeline/timeline.md
index 4263b0be6..3ed44ef5d 100644
--- a/ej2-javascript/gantt/timeline/timeline.md
+++ b/ej2-javascript/gantt/timeline/timeline.md
@@ -1,7 +1,7 @@
---
layout: post
-title: Timeline in ##Platform_Name## Gantt Control | Syncfusion
-description: Learn here all about timeline in Syncfusion Essential ##Platform_Name## Gantt control, its elements and more.
+title: Timeline in ##Platform_Name## Gantt control | Syncfusion
+description: Learn here all about Timeline in Syncfusion ##Platform_Name## Gantt control of Syncfusion Essential JS 2 and more.
platform: ej2-javascript
control: Timeline
publishingplatform: ##Platform_Name##
@@ -9,7 +9,7 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Timeline in ##Platform_Name## Gantt Control
+# Timeline in ##Platform_Name## Gantt control
In the Gantt control, timeline is used to represent the project duration as individual cells with defined unit and formats.
diff --git a/ej2-javascript/grid/adaptive.md b/ej2-javascript/grid/adaptive.md
index ede75ea65..89fc5b826 100644
--- a/ej2-javascript/grid/adaptive.md
+++ b/ej2-javascript/grid/adaptive.md
@@ -1,7 +1,7 @@
---
layout: post
-title: Adaptive in ##Platform_Name## Grid Control | Syncfusion
-description: Learn here all about adaptive in Syncfusion Essential ##Platform_Name## Grid control, its elements and more.
+title: Adaptive in ##Platform_Name## Grid control | Syncfusion
+description: Learn here all about Adaptive in Syncfusion ##Platform_Name## Grid control of Syncfusion Essential JS 2 and more.
platform: ej2-javascript
control: Adaptive
publishingplatform: ##Platform_Name##
@@ -9,7 +9,7 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Adaptive in ##Platform_Name## Grid Control
+# Adaptive in ##Platform_Name## Grid control
The Grid user interface (UI) was redesigned to provide an optimal viewing experience and improve usability on small screens. This interface will render the filter, sort, column chooser, column menu(supports only when the `rowRenderingMode` as Horizontal) and edit dialogs adaptively and have an option to render the grid row elements in the vertical direction.
@@ -90,10 +90,10 @@ The following features are only supported in vertical row rendering:
* Infinite scroll
* Toolbar - Options like **Add**, **Filter**, **Sort**, **Edit**, **Delete**, **Search**, and **Toolbar template** are available when their respective features are enabled. The toolbar dynamically includes a three-dotted icon, containing additional features like **ColumnChooser**, **Print**, **PdfExport**, **ExcelExport**, or **CsvExport**, once these features are enabled. Please refer to the following snapshot.
-
+
A snapshot of the adaptive grid displaying enabled paging along with a pager dropdown.
-
+
-> The Column Menu feature, which includes grouping, sorting, autofit, filter, and column chooser, is exclusively supported for the Grid in **Horizontal** [`rowRenderingMode`](../api/grid/rowRenderingMode/).
+> The Column Menu feature, which includes grouping, sorting, autofit, filter, and column chooser, is exclusively supported for the Grid in **Horizontal** [`rowRenderingMode`](../api/grid/rowRenderingMode/).
\ No newline at end of file
diff --git a/ej2-javascript/grid/data-binding/data-binding.md b/ej2-javascript/grid/data-binding/data-binding.md
index 7e2f7e3fe..638f84760 100644
--- a/ej2-javascript/grid/data-binding/data-binding.md
+++ b/ej2-javascript/grid/data-binding/data-binding.md
@@ -92,4 +92,4 @@ button.addEventListener("click", function(e){
## See Also
-* [How to bind SQL Server data in TypeScript DataGrid using SqlClient data provider](https://support.syncfusion.com/kb/article/9963/how-to-bind-sql-server-data-in-typescript-datagrid-using-sqlclient-data-provider)
\ No newline at end of file
+* [How to bind SQL Server data in TypeScript DataGrid using SqlClient data provider](https://www.syncfusion.com/kb/11452/how-to-bind-sql-server-data-in-typescript-datagrid-using-sqlclient-data-provider)
\ No newline at end of file
diff --git a/ej2-javascript/grid/getting-started.md b/ej2-javascript/grid/getting-started.md
index 4cfb466a8..112934952 100644
--- a/ej2-javascript/grid/getting-started.md
+++ b/ej2-javascript/grid/getting-started.md
@@ -328,7 +328,7 @@ Output will be displayed as follows.
* [Overview of Grid](https://www.syncfusion.com/blogs/post/overview-of-grid-in-essential-js-2-part-1.aspx)
* [Introduction to the Grid control](https://www.syncfusion.com/blogs/post/introduction-to-the-grid-control-for-javascript.aspx)
-* [How to display a table data after clicking Submit button in Javascript?](https://support.syncfusion.com/kb/article/10145/how-to-display-a-table-data-after-clicking-submit-button)
-* [How to display table in popup window using Javascript?](https://support.syncfusion.com/kb/article/10339/how-to-display-table-in-popup-window-using-javascript)
-* [How to open pdf document on button click inside a Grid](https://support.syncfusion.com/kb/article/10246/how-to-open-pdf-document-on-button-click-inside-a-grid)
-* [How to disable the default keyboard actions in Grid](https://support.syncfusion.com/kb/article/9578/how-to-disable-the-default-keyboard-actions-in-js-grid)
\ No newline at end of file
+* [How to display a table data after clicking Submit button in Javascript?](https://www.syncfusion.com/kb/11810/how-to-display-a-table-data-after-clicking-submit-button-in-javascript)
+* [How to display table in popup window using Javascript?](https://www.syncfusion.com/kb/11781/how-to-display-table-in-popup-window-using-javascript)
+* [How to open pdf document on button click inside a Grid](https://www.syncfusion.com/kb/11693/how-to-open-pdf-document-on-button-click-inside-a-grid)
+* [How to disable the default keyboard actions in Grid](https://www.syncfusion.com/kb/11024/how-to-disable-the-default-keyboard-actions-in-grid)
\ No newline at end of file
diff --git a/ej2-javascript/grid/hierarchy-grid.md b/ej2-javascript/grid/hierarchy-grid.md
index 8f0803322..db3028f32 100644
--- a/ej2-javascript/grid/hierarchy-grid.md
+++ b/ej2-javascript/grid/hierarchy-grid.md
@@ -13,7 +13,7 @@ domainurl: ##DomainURL##
The Grid allows display of table data in a hierarchical structure to visualize relations between parent and child records. This feature is enabled by defining the [`childGrid`](../api/grid/#childgrid) and [`childGrid.queryString`](../api/grid/#querystring). The [`childGrid`](../api/grid/#childgrid) describes the options of grid and the [`childGrid.queryString`](../api/grid/#querystring) describes the relation between parent and child grids.
-To use hierarchical binding, inject the [`DetailRow`](../api/grid/detailRow/) module in the grid.
+To use hierarchical binding, inject the [`DetailRow`](../api/grid/detailRow) module in the grid.
{% if page.publishingplatform == "typescript" %}
@@ -109,7 +109,7 @@ You can expand a particular child grid at initial rendering by invoking the [`ex
## Dynamically load child grid data
-You can dynamically load child grid dataSource by using the [`load`](../api/grid/#load) event. This [`load`](../api/grid/#load) event triggers when the child grid is expanded for the first time.
+You can dynamically load child grid dataSource by using the [`load`](../api/grid#load) event. This [`load`](../api/grid#load) event triggers when the child grid is expanded for the first time.
{% if page.publishingplatform == "typescript" %}
diff --git a/ej2-javascript/grid/images/javascript-grid-pager-dropdown-adaptive.gif b/ej2-javascript/grid/images/PagerDropdown_Adaptive.gif
similarity index 100%
rename from ej2-javascript/grid/images/javascript-grid-pager-dropdown-adaptive.gif
rename to ej2-javascript/grid/images/PagerDropdown_Adaptive.gif
diff --git a/ej2-javascript/grid/images/javascript-grid-vertical-mode-column-menu.gif b/ej2-javascript/grid/images/VerticalmodeColumnMenu.gif
similarity index 100%
rename from ej2-javascript/grid/images/javascript-grid-vertical-mode-column-menu.gif
rename to ej2-javascript/grid/images/VerticalmodeColumnMenu.gif
diff --git a/ej2-javascript/grid/style-and-appearance/style-and-appearance.md b/ej2-javascript/grid/style-and-appearance/style-and-appearance.md
index e66b7e26b..4b52541a6 100644
--- a/ej2-javascript/grid/style-and-appearance/style-and-appearance.md
+++ b/ej2-javascript/grid/style-and-appearance/style-and-appearance.md
@@ -84,4 +84,4 @@ In the following sample, the font family of grid content is changed to **cursive
## See Also
-* [How to change the font size of Grid elements](https://support.syncfusion.com/kb/article/10075/how-to-change-the-font-size-of-grid-elements-in-javascript)
\ No newline at end of file
+* [How to change the font size of Grid elements](https://www.syncfusion.com/kb/11321/how-to-change-the-font-size-of-grid-elements)
\ No newline at end of file
diff --git a/ej2-javascript/grid/tool-bar/tool-bar.md b/ej2-javascript/grid/tool-bar/tool-bar.md
index 722a6e381..e860bf7de 100644
--- a/ej2-javascript/grid/tool-bar/tool-bar.md
+++ b/ej2-javascript/grid/tool-bar/tool-bar.md
@@ -11,7 +11,7 @@ domainurl: ##DomainURL##
# Tool bar in ##Platform_Name## Grid control
-The Grid provides ToolBar support to handle grid actions. The [`toolbar`](../../api/grid/#toolbar) property accepts either the collection of built-in toolbar items and [`ItemModel`](../../api/toolbar/itemModel/) objects for custom toolbar items or HTML element ID for toolbar template.
+The Grid provides ToolBar support to handle grid actions. The [`toolbar`](../../api/grid/#toolbar) property accepts either the collection of built-in toolbar items and [`ItemModel`](../../api/toolbar/itemModel) objects for custom toolbar items or HTML element ID for toolbar template.
To use ToolBar, inject [`Toolbar`](../../api/grid/#toolbarmodule) module in the grid.
@@ -79,5 +79,5 @@ You can add the Grid toolbar component at the bottom of Grid using the ['created
## See Also
-* [Toolbar Component](../../toolbar/getting-started)
-* [How to set overflow mode in Grid toolbar](https://support.syncfusion.com/kb/article/9929/how-to-set-overflow-mode-in-grid-toolbar)
\ No newline at end of file
+* [Toolbar Component](../../toolbar/getting-started/)
+* [How to set overflow mode in Grid toolbar](https://www.syncfusion.com/kb/11524/how-to-set-overflow-mode-in-grid-toolbar)
\ No newline at end of file
diff --git a/ej2-javascript/in-place-editor/accessibility.md b/ej2-javascript/in-place-editor/accessibility.md
index 66f3e8b43..c222868e9 100644
--- a/ej2-javascript/in-place-editor/accessibility.md
+++ b/ej2-javascript/in-place-editor/accessibility.md
@@ -17,15 +17,15 @@ The accessibility compliance for the Inplace editor component is outlined below.
| Accessibility Criteria | Compatibility |
| -- | -- |
-| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | |
-| [Section 508 Support](../common/accessibility#accessibility-standards) | |
-| [Screen Reader Support](../common/accessibility#screen-reader-support) | |
-| [Right-To-Left Support](../common/accessibility#right-to-left-support) | |
-| [Color Contrast](../common/accessibility#color-contrast) | |
-| [Mobile Device Support](../common/accessibility#mobile-device-support) | |
-| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | |
-| [Accessibility Checker Validation](../common/accessibility#ensuring-accessibility) | |
-| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | |
+| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | |
+| [Section 508 Support](../common/accessibility#accessibility-standards) | |
+| [Screen Reader Support](../common/accessibility#screen-reader-support) | |
+| [Right-To-Left Support](../common/accessibility#right-to-left-support) | |
+| [Color Contrast](../common/accessibility#color-contrast) | |
+| [Mobile Device Support](../common/accessibility#mobile-device-support) | |
+| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | |
+| [Accessibility Checker Validation](../common/accessibility#ensuring-accessibility) | |
+| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | |
-
- All features of the component meet the requirement.
+
- All features of the component meet the requirement.
-
- Some features of the component do not meet the requirement.
+
- Some features of the component do not meet the requirement.
diff --git a/ej2-javascript/list-box/ts/getting-started.md b/ej2-javascript/list-box/ts/getting-started.md
index 7ac4afba5..f8da4ca60 100644
--- a/ej2-javascript/list-box/ts/getting-started.md
+++ b/ej2-javascript/list-box/ts/getting-started.md
@@ -11,7 +11,7 @@ domainurl: ##DomainURL##
# Getting started in ##Platform_Name## List box control
-This section explains how to create a simple **ListBox** component and configure its available functionalities in TypeScript using the Essential JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack) seed repository.
+This section explains how to create a simple **ListBox** component and configure its available functionalities in TypeScript using the Essential JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository.
> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/).
@@ -32,7 +32,7 @@ The following list of dependencies are required to use the ListBox component in
## Set up development environment
-Open the command prompt from the required directory, and run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack).
+Open the command prompt from the required directory, and run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-).
{% tabs %}
{% highlight bash tabtitle="CMD" %}
@@ -195,5 +195,5 @@ The following example illustrates the output in your browser.
## See Also
-* [How to reorder the items in the list box](./dual-list-box#dual-list-box)
-* [How to form submit to the list box](./how-to/form-submit#form-submit-to-the-list-box)
\ No newline at end of file
+* [How to reorder the items in the list box](./dual-list-box/#dual-list-box)
+* [How to form submit to the list box](./how-to/form-submit/#form-submit-to-the-list-box)
\ No newline at end of file
diff --git a/ej2-javascript/menu/how-to/menu-item-click.md b/ej2-javascript/menu/how-to/menu-item-click.md
index d92dcf3a3..1d8a2a99d 100644
--- a/ej2-javascript/menu/how-to/menu-item-click.md
+++ b/ej2-javascript/menu/how-to/menu-item-click.md
@@ -11,7 +11,7 @@ domainurl: ##DomainURL##
# Menu item click in ##Platform_Name## Menu control
-You can open menu items and sub menu on menu item click by setting [`showItemOnClick`](../../api/menushowitemonclick) property of the Menu. To open sub menu items only on item click, should be set as `true`.
+You can open menu items and sub menu on menu item click by setting [`showItemOnClick`](../../api/menu/#showitemonclick) property of the Menu. To open sub menu items only on item click, should be set as `true`.
{% if page.publishingplatform == "typescript" %}
diff --git a/ej2-javascript/pdfviewer/ts/feature-module.md b/ej2-javascript/pdfviewer/ts/feature-module.md
index 370de4489..be585ca63 100644
--- a/ej2-javascript/pdfviewer/ts/feature-module.md
+++ b/ej2-javascript/pdfviewer/ts/feature-module.md
@@ -1,7 +1,7 @@
---
layout: post
-title: Feature module in ##Platform_Name## Pdfviewer Control | Syncfusion
-description: Learn here all about Feature module in Syncfusion Essential ##Platform_Name## Pdfviewer control, its elements and more.
+title: Feature module in ##Platform_Name## Pdfviewer control | Syncfusion
+description: Learn here all about Feature module in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
platform: ej2-javascript
control: Feature module
publishingplatform: ##Platform_Name##
@@ -9,7 +9,7 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Feature module in ##Platform_Name## Pdfviewer Control
+# Feature module in ##Platform_Name## Pdfviewer control
The PDF Viewer features are segregated into individual feature-wise modules to enable selectively referencing in the application. The required modules should be injected to extend its functionality. The following are the selective modules of PDF Viewer that can be included as required:
diff --git a/ej2-javascript/ribbon/js/accessibility.md b/ej2-javascript/ribbon/js/accessibility.md
deleted file mode 100644
index 5ffc212da..000000000
--- a/ej2-javascript/ribbon/js/accessibility.md
+++ /dev/null
@@ -1,125 +0,0 @@
----
-layout: post
-title: Accessibility in ##Platform_Name## Ribbon control | Syncfusion
-description: Checkout and learn about Ribbon Accessibility with ##Platform_Name## Ribbon control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Ribbon
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Accessibility in ##Platform_Name## Ribbon control
-
-The Ribbon control followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
-
-The accessibility compliance for the Ribbon control is outlined below.
-
-| Accessibility Criteria | Compatibility |
-| -- | -- |
-| [WCAG 2.2](https://www.w3.org/TR/WCAG22/) Support | |
-| [Section 508](https://www.section508.gov/) Support | |
-| Screen Reader Support | |
-| Right-To-Left Support | |
-| Color Contrast | |
-| Mobile Device Support | |
-| Keyboard Navigation Support | |
-| [Accessibility Checker](https://www.npmjs.com/package/accessibility-checker) Validation | |
-| [Axe-core](https://www.npmjs.com/package/axe-core) Accessibility Validation | |
-
-
-
- All features of the control meet the requirement.
-
-
- Some features of the control do not meet the requirement.
-
-
- The control does not meet the requirement.
-
-## WAI-ARIA attributes
-
-The Ribbon control followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) patterns to meet the accessibility. The following ARIA attributes are used in the Ribbon control:
-
-| Attributes | Purpose |
-| --- | --- |
-| `role=tablist` | Used to identify the element that serves as the container for a set of tabs. |
-| `role=tab` | Indicates an interactive element within a tablist that, when activated, displays its associated tab panel.|
-| `role=tabpanel` | Specifies the role for the content associated with an active tab, describing its role in presenting the active content.|
-| `role=button` | Represents a clickable element that trigger a response when activated by the user.|
-| `role=menu` | Represents an item that have sub menu.|
-| `role=menuitem` | Indicates an option in a set of choices within a menu. |
-| `role=combobox` | Identifies an element as an input that controls another element, commonly used for dropdowns. |
-| `role=option` | Used for selectable items in a combobox. |
-| `role=gridcell` | Specified as gridcell for the tiles in the color palette. |
-| `aria-orientation` | Indicates the element's orientation as horizontal, vertical, or unknown/ambiguous. |
-| `aria-selected` | Indicates the current `selected` state of various widgets. |
-| `aria-labelledby` | Sets to the Tab content element to indicates the associated Tab header for the content. |
-| `aria-controls` | Indicates the associated tabpanel for the header by setting the attribute on Tab items. |
-| `aria-haspopup` | Indicates availability and type of interactive popup triggered by the element it's set on. |
-| `aria-disabled` | Indicates that the element is perceivable but disabled, making it not editable or operable. |
-| `aria-expanded` | Indicates whether a control is expanded or collapsed, set on the respective element. |
-| `aria-label` | Defines a string value that labels an interactive element for accessibility. |
-| `aria-checked` | Indicates the current `checked` state of checkboxes, radio buttons, and other widgets. |
-| `aria-owns` | Identifies an element or elements, establishing a relationship when DOM hierarchy can't represent it. |
-| `aria-readonly` | Indicates that the element is not editable but is otherwise operable. |
-| `aria-activedescendent` | Identifies the currently active element when focus is on a combobox, textbox, group, or application. |
-| `aria-autocomplete` | Indicates whether inputting text could trigger display of predictions and specifies how predictions will be presented for a combobox, searchbox, or textbox. |
-
-## Keyboard interaction
-
-The Ribbon control followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Ribbon control.
-
-| **Press** | **To do this** |
-| --- | --- |
-Ribbon Tab||
-| Tab | To focus the ribbon tabs. |
-| Right Arrow | Moves focus to the next Tab. |
-| Left Arrow | Moves focus to the previous Tab. |
-| Enter / Space | To select the currently focused ribbon tab. |
-Ribbon Items||
-| Tab | To focus the ribbon Items. |
-| Right Arrow | Focuses the next item. |
-| Left Arrow | Focuses the previous item. |
-| Enter / Space | To select the currently focused ribbon item. |
-Ribbon Dropdown Items/ Ribbon Split button||
-| Esc | Closes the popup. |
-| Enter / Space | Opens the popup, or activates the highlighted item and closes the popup. |
-| Arrow Up | Focuses the next item. |
-| Arrow Down | Focuses the previous item. |
-| Alt + Arrow Up | Closes the popup.|
-| Alt + Arrow Down | Opens the popup |
-Ribbon File menu||
-| Tab | To focus the ribbon file menu. |
-| Esc | Closes the popup. |
-| Enter | Opens the popup, or activates the highlighted item and closes the popup. |
-| Arrow Up | Focuses the previous action item. |
-| Arrow Down | Focuses the next action item. |
-| Alt + Arrow Down | Opens the popup |
-Ribbon Combobox||
-| Arrow Down | Selects the first item in the ComboBox when no item selected. Otherwise, selects the item next to the currently selected item. |
-| Arrow Up | Selects the item previous to the currently selected one. |
-| Page Down | Scrolls down to the next page and selects the first item when popup list opens. |
-| Page Up | Scrolls up to the previous page and selects the first item when popup list opens. |
-| Enter | Selects the focused item and popup list closes when it is in open state. |
-| Tab | Focuses on the next TabIndex element on the page when the popup is closed. Otherwise, closes the popup list and remains the focus of the control. |
-| Shift + tab | Focuses on the previous TabIndex element on the page when the popup is closed. Otherwise, closes the popup list and remains the focus of the control. |
-| Alt + Down | Open the popup list |
-| Alt + Up | Close the popup list |
-| Esc(Escape) | Closes the popup list when it is in an open state and the currently selected item remains the same. |
-| Home | Cursor moves to before of first character in input |
-| End | Cursor moves to next of last character in input |
-
-## Ensuring accessibility
-
-The Ribbon control's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing.
-
-The accessibility compliance of the Ribbon control is shown in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/ribbon.html) in a new window to evaluate the accessibility of the Ribbon control with accessibility tools.
-
-{% previewsample "https://ej2.syncfusion.com/accessibility/ribbon.html" %}
-
-## See also
-
-* [Accessibility in Syncfusion JavaScript controls](../common/accessibility)
diff --git a/ej2-javascript/ribbon/ts/accessibility.md b/ej2-javascript/ribbon/ts/accessibility.md
deleted file mode 100644
index 90213bc19..000000000
--- a/ej2-javascript/ribbon/ts/accessibility.md
+++ /dev/null
@@ -1,125 +0,0 @@
----
-layout: post
-title: Ribbon Accessibility in ##Platform_Name## Ribbon control | Syncfusion
-description: Checkout and learn about Ribbon Accessibility with ##Platform_Name## Ribbon control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Ribbon
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Accessibility in ##Platform_Name## Ribbon control
-
-The Ribbon control followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
-
-The accessibility compliance for the Ribbon control is outlined below.
-
-| Accessibility Criteria | Compatibility |
-| -- | -- |
-| [WCAG 2.2](https://www.w3.org/TR/WCAG22/) Support | |
-| [Section 508](https://www.section508.gov/) Support | |
-| Screen Reader Support | |
-| Right-To-Left Support | |
-| Color Contrast | |
-| Mobile Device Support | |
-| Keyboard Navigation Support | |
-| [Accessibility Checker](https://www.npmjs.com/package/accessibility-checker) Validation | |
-| [Axe-core](https://www.npmjs.com/package/axe-core) Accessibility Validation | |
-
-
-
- All features of the control meet the requirement.
-
-
- Some features of the control do not meet the requirement.
-
-
- The control does not meet the requirement.
-
-## WAI-ARIA attributes
-
-The Ribbon control followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) patterns to meet the accessibility. The following ARIA attributes are used in the Ribbon control:
-
-| Attributes | Purpose |
-| --- | --- |
-| `role=tablist` | Used to identify the element that serves as the container for a set of tabs. |
-| `role=tab` | Indicates an interactive element within a tablist that, when activated, displays its associated tab panel.|
-| `role=tabpanel` | Specifies the role for the content associated with an active tab, describing its role in presenting the active content.|
-| `role=button` | Represents a clickable element that trigger a response when activated by the user.|
-| `role=menu` | Represents an item that have sub menu.|
-| `role=menuitem` | Indicates an option in a set of choices within a menu. |
-| `role=combobox` | Identifies an element as an input that controls another element, commonly used for dropdowns. |
-| `role=option` | Used for selectable items in a combobox. |
-| `role=gridcell` | Specified as gridcell for the tiles in the color palette. |
-| `aria-orientation` | Indicates the element's orientation as horizontal, vertical, or unknown/ambiguous. |
-| `aria-selected` | Indicates the current `selected` state of various widgets. |
-| `aria-labelledby` | Sets to the Tab content element to indicates the associated Tab header for the content. |
-| `aria-controls` | Indicates the associated tabpanel for the header by setting the attribute on Tab items. |
-| `aria-haspopup` | Indicates availability and type of interactive popup triggered by the element it's set on. |
-| `aria-disabled` | Indicates that the element is perceivable but disabled, making it not editable or operable. |
-| `aria-expanded` | Indicates whether a control is expanded or collapsed, set on the respective element. |
-| `aria-label` | Defines a string value that labels an interactive element for accessibility. |
-| `aria-checked` | Indicates the current `checked` state of checkboxes, radio buttons, and other widgets. |
-| `aria-owns` | Identifies an element or elements, establishing a relationship when DOM hierarchy can't represent it. |
-| `aria-readonly` | Indicates that the element is not editable but is otherwise operable. |
-| `aria-activedescendent` | Identifies the currently active element when focus is on a combobox, textbox, group, or application. |
-| `aria-autocomplete` | Indicates whether inputting text could trigger display of predictions and specifies how predictions will be presented for a combobox, searchbox, or textbox. |
-
-## Keyboard interaction
-
-The Ribbon control followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Ribbon control.
-
-| **Press** | **To do this** |
-| --- | --- |
-Ribbon Tab||
-| Tab | To focus the ribbon tabs. |
-| Right Arrow | Moves focus to the next Tab. |
-| Left Arrow | Moves focus to the previous Tab. |
-| Enter / Space | To select the currently focused ribbon tab. |
-Ribbon Items||
-| Tab | To focus the ribbon Items. |
-| Right Arrow | Focuses the next item. |
-| Left Arrow | Focuses the previous item. |
-| Enter / Space | To select the currently focused ribbon item. |
-Ribbon Dropdown Items/ Ribbon Split button||
-| Esc | Closes the popup. |
-| Enter / Space | Opens the popup, or activates the highlighted item and closes the popup. |
-| Arrow Up | Focuses the next item. |
-| Arrow Down | Focuses the previous item. |
-| Alt + Arrow Up | Closes the popup.|
-| Alt + Arrow Down | Opens the popup |
-Ribbon File menu||
-| Tab | To focus the ribbon file menu. |
-| Esc | Closes the popup. |
-| Enter | Opens the popup, or activates the highlighted item and closes the popup. |
-| Arrow Up | Focuses the previous action item. |
-| Arrow Down | Focuses the next action item. |
-| Alt + Arrow Down | Opens the popup |
-Ribbon Combobox||
-| Arrow Down | Selects the first item in the ComboBox when no item selected. Otherwise, selects the item next to the currently selected item. |
-| Arrow Up | Selects the item previous to the currently selected one. |
-| Page Down | Scrolls down to the next page and selects the first item when popup list opens. |
-| Page Up | Scrolls up to the previous page and selects the first item when popup list opens. |
-| Enter | Selects the focused item and popup list closes when it is in open state. |
-| Tab | Focuses on the next TabIndex element on the page when the popup is closed. Otherwise, closes the popup list and remains the focus of the control. |
-| Shift + tab | Focuses on the previous TabIndex element on the page when the popup is closed. Otherwise, closes the popup list and remains the focus of the control. |
-| Alt + Down | Open the popup list |
-| Alt + Up | Close the popup list |
-| Esc(Escape) | Closes the popup list when it is in an open state and the currently selected item remains the same. |
-| Home | Cursor moves to before of first character in input |
-| End | Cursor moves to next of last character in input |
-
-## Ensuring accessibility
-
-The Ribbon control's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing.
-
-The accessibility compliance of the Ribbon control is shown in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/ribbon.html) in a new window to evaluate the accessibility of the Ribbon control with accessibility tools.
-
-{% previewsample "https://ej2.syncfusion.com/accessibility/ribbon.html" %}
-
-## See also
-
-* [Accessibility in Syncfusion TypeScript controls](../common/accessibility)
diff --git a/ej2-javascript/rich-text-editor/iframe.md b/ej2-javascript/rich-text-editor/iframe.md
index b9fe4ffa3..6bc0461b2 100644
--- a/ej2-javascript/rich-text-editor/iframe.md
+++ b/ej2-javascript/rich-text-editor/iframe.md
@@ -106,4 +106,4 @@ Likewise, add the external script file to the `