diff --git a/ej2-react/3d-chart/tool-tip.md b/ej2-react/3d-chart/tool-tip.md
index 0cb3ebeab8..2be0348610 100644
--- a/ej2-react/3d-chart/tool-tip.md
+++ b/ej2-react/3d-chart/tool-tip.md
@@ -63,6 +63,56 @@ By default, tooltip shows information of x and y value in points. In addition to
{% previewsample "page.domainurl/code-snippet/3d-chart/tooltip/tooltip-cs3" %}
+## Inline tooltip formatting
+
+The tooltip content can be formatted directly within the [`format`](https://ej2.syncfusion.com/react/documentation/api/chart3d/tooltipsettings#format) property by adding DateTime or number format specifiers to supported tooltip tokens. This allows you to control how point and series values are displayed without using additional events.
+
+A format specifier can be applied to a tooltip token by adding a colon (`:`) followed by the required format.
+
+For example:
+
+```typescript
+const tooltip = {
+ enable: true,
+ format: '${series.name} (${series.type}) ${point.x:MMM yyyy} : ${point.y:n2} Opacity: ${series.opacity}'
+};
+```
+
+In the above example, `point.x` is displayed in month-year format, `point.y` is displayed with two decimal places, and `series.opacity` displays the opacity value applied to the series.
+
+Inline formatting can be applied to the following tooltip tokens:
+
+- `point.x` – Specifies the x-value of the data point, such as DateTime or category values.
+- `point.y` – Specifies the numeric y-value of the data point.
+- `series.name` – Specifies the name assigned to the series.
+- `series.type` – Specifies the rendering type of the series, such as `Column`, `Bar`, `Line`, or `StackingColumn`.
+- `series.opacity` – Specifies the opacity value applied to the series. This value controls the visual transparency of the series and can be customized in the series configuration.
+
+**Important:** The availability of point-specific tokens depends on the values configured in the data source and the 3D chart series type. The `series.name` and `series.type` tokens return string values, so DateTime or number formatting is not applied to these tokens.
+
+The following format types are supported:
+
+- DateTime formats such as `MMM yyyy`, `MM:yy`, and `dd MMM`
+- Number formats such as:
+ - `n2` – number with two decimal places
+ - `n0` – number without decimal places
+ - `c2` – currency format
+ - `p1` – percentage format
+ - `e1` – exponential notation
+
+If the specified format does not match the resolved value type, the original value is displayed.
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/3d-chart/tooltip/tooltip-cs6/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/3d-chart/tooltip/tooltip-cs6/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/3d-chart/tooltip/tooltip-cs6" %}
+
## Tooltip template
Any HTML elements can be displayed in the tooltip by using the [`template`](https://ej2.syncfusion.com/react/documentation/api/chart3d/threeDimensionalTooltipSettingsModel#template) property of the tooltip. The ${x} and ${y} can be used as place holders in the HTML element to display the x and y values of the corresponding data point.
diff --git a/ej2-react/Release-notes/33.2.10.md b/ej2-react/Release-notes/33.2.10.md
new file mode 100644
index 0000000000..b5647a4f99
--- /dev/null
+++ b/ej2-react/Release-notes/33.2.10.md
@@ -0,0 +1,100 @@
+---
+title: Essential Studio for React Release Notes - v33.2.10
+description: Learn here about the controls in the Essential Studio for React Weekly Release - Release Notes - v33.2.10
+platform: ej2-react
+documentation: ug
+---
+
+# Essential Studio for React - v33.2.10 Release Notes
+
+{% include release-info.html date="June 02, 2026" version="v33.2.10" passed="78979" failed="0" %}
+
+{% directory path: _includes/release-notes/v33.2.10 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3D Chart | 232 | 232 | 0 | All Passed |
+| 3D Circular Chart | 374 | 374 | 0 | All Passed |
+| Accordion | 114 | 114 | 0 | All Passed |
+| AI Assist View | 523 | 523 | 0 | All Passed |
+| App Bar | 68 | 68 | 0 | All Passed |
+| AutoComplete | 200 | 200 | 0 | All Passed |
+| Block Editor | 2841 | 2841 | 0 | All Passed |
+| Breadcrumb | 160 | 160 | 0 | All Passed |
+| Bullet Chart | 169 | 169 | 0 | All Passed |
+| Button | 145 | 145 | 0 | All Passed |
+| ButtonGroup | 120 | 120 | 0 | All Passed |
+| calendar | 178 | 178 | 0 | All Passed |
+| Carousel | 62 | 62 | 0 | All Passed |
+| Chart | 8274 | 8274 | 0 | All Passed |
+| Chat UI | 690 | 690 | 0 | All Passed |
+| Checkbox | 37 | 37 | 0 | All Passed |
+| CircularGauge | 432 | 432 | 0 | All Passed |
+| ColorPicker | 130 | 130 | 0 | All Passed |
+| Combo Box | 148 | 148 | 0 | All Passed |
+| Common | 906 | 906 | 0 | All Passed |
+| Context Menu | 106 | 106 | 0 | All Passed |
+| Dashboard layout | 30 | 30 | 0 | All Passed |
+| Data Grid | 4139 | 4139 | 0 | All Passed |
+| Date Picker | 431 | 431 | 0 | All Passed |
+| Date Range Picker | 521 | 521 | 0 | All Passed |
+| Date Time Picker | 326 | 326 | 0 | All Passed |
+| Diagram | 16910 | 16910 | 0 | All Passed |
+| Dialog | 74 | 74 | 0 | All Passed |
+| DropDown Button | 132 | 132 | 0 | All Passed |
+| Dropdown List | 212 | 212 | 0 | All Passed |
+| Dropdown Tree | 110 | 110 | 0 | All Passed |
+| File Manager | 2198 | 2198 | 0 | All Passed |
+| Floating Action Button | 174 | 174 | 0 | All Passed |
+| Gantt | 5491 | 5491 | 0 | All Passed |
+| HeatMap Chart | 678 | 678 | 0 | All Passed |
+| Image Editor | 1653 | 1653 | 0 | All Passed |
+| In-place Editor | 643 | 643 | 0 | All Passed |
+| Kanban | 268 | 268 | 0 | All Passed |
+| LinearGauge | 427 | 427 | 0 | All Passed |
+| Listbox | 115 | 115 | 0 | All Passed |
+| ListView | 84 | 84 | 0 | All Passed |
+| Maps | 1386 | 1386 | 0 | All Passed |
+| Mention | 53 | 53 | 0 | All Passed |
+| Menu | 187 | 187 | 0 | All Passed |
+| Multicolumn Combo Box | 257 | 257 | 0 | All Passed |
+| Multiselect Dropdown | 457 | 457 | 0 | All Passed |
+| OTP Input | 240 | 240 | 0 | All Passed |
+| Pivot Table | 5656 | 5656 | 0 | All Passed |
+| Progress Bar | 83 | 83 | 0 | All Passed |
+| Progress Button | 132 | 132 | 0 | All Passed |
+| Query Builder | 480 | 480 | 0 | All Passed |
+| RadioButton | 45 | 45 | 0 | All Passed |
+| RangeNavigator | 140 | 140 | 0 | All Passed |
+| Rating | 198 | 198 | 0 | All Passed |
+| Ribbon | 629 | 629 | 0 | All Passed |
+| Rich Text Editor | 5138 | 5138 | 0 | All Passed |
+| schedule | 4733 | 4733 | 0 | All Passed |
+| sidebar | 94 | 94 | 0 | All Passed |
+| Signature | 105 | 105 | 0 | All Passed |
+| Skeleton | 144 | 144 | 0 | All Passed |
+| Slider | 147 | 147 | 0 | All Passed |
+| SmithChart | 49 | 49 | 0 | All Passed |
+| Sparkline | 58 | 58 | 0 | All Passed |
+| Speech To Text | 200 | 200 | 0 | All Passed |
+| Speed Dial | 366 | 366 | 0 | All Passed |
+| Split Button | 145 | 145 | 0 | All Passed |
+| Stepper | 91 | 91 | 0 | All Passed |
+| Stock Chart | 507 | 507 | 0 | All Passed |
+| Tab | 71 | 71 | 0 | All Passed |
+| Text Area | 112 | 112 | 0 | All Passed |
+| TextBox | 69 | 69 | 0 | All Passed |
+| Time Picker | 180 | 180 | 0 | All Passed |
+| Timeline | 213 | 213 | 0 | All Passed |
+| Toast | 139 | 139 | 0 | All Passed |
+| Toolbar | 142 | 142 | 0 | All Passed |
+| ToolTip | 139 | 139 | 0 | All Passed |
+| TreeGrid | 4969 | 4969 | 0 | All Passed |
+| Treemap | 329 | 329 | 0 | All Passed |
+| Treeview | 371 | 371 | 0 | All Passed |
\ No newline at end of file
diff --git a/ej2-react/Release-notes/33.2.12.md b/ej2-react/Release-notes/33.2.12.md
new file mode 100644
index 0000000000..4cede408f6
--- /dev/null
+++ b/ej2-react/Release-notes/33.2.12.md
@@ -0,0 +1,100 @@
+---
+title: Essential Studio for React Release Notes - v33.2.12
+description: Learn here about the controls in the Essential Studio for React Weekly Release - Release Notes - v33.2.12
+platform: ej2-react
+documentation: ug
+---
+
+# Essential Studio for React - v33.2.12 Release Notes
+
+{% include release-info.html date="June 09, 2026" version="v33.2.12" passed="79031" failed="0" %}
+
+{% directory path: _includes/release-notes/v33.2.12 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3D Chart | 232 | 232 | 0 | All Passed |
+| 3D Circular Chart | 374 | 374 | 0 | All Passed |
+| Accordion | 114 | 114 | 0 | All Passed |
+| AI Assist View | 575 | 575 | 0 | All Passed |
+| App Bar | 68 | 68 | 0 | All Passed |
+| AutoComplete | 200 | 200 | 0 | All Passed |
+| Block Editor | 2841 | 2841 | 0 | All Passed |
+| Breadcrumb | 160 | 160 | 0 | All Passed |
+| Bullet Chart | 169 | 169 | 0 | All Passed |
+| Button | 145 | 145 | 0 | All Passed |
+| ButtonGroup | 120 | 120 | 0 | All Passed |
+| calendar | 178 | 178 | 0 | All Passed |
+| Carousel | 62 | 62 | 0 | All Passed |
+| Chart | 8274 | 8274 | 0 | All Passed |
+| Chat UI | 690 | 690 | 0 | All Passed |
+| Checkbox | 37 | 37 | 0 | All Passed |
+| CircularGauge | 432 | 432 | 0 | All Passed |
+| ColorPicker | 130 | 130 | 0 | All Passed |
+| Combo Box | 148 | 148 | 0 | All Passed |
+| Common | 906 | 906 | 0 | All Passed |
+| Context Menu | 106 | 106 | 0 | All Passed |
+| Dashboard layout | 30 | 30 | 0 | All Passed |
+| Data Grid | 4139 | 4139 | 0 | All Passed |
+| Date Picker | 431 | 431 | 0 | All Passed |
+| Date Range Picker | 521 | 521 | 0 | All Passed |
+| Date Time Picker | 326 | 326 | 0 | All Passed |
+| Diagram | 16910 | 16910 | 0 | All Passed |
+| Dialog | 74 | 74 | 0 | All Passed |
+| DropDown Button | 132 | 132 | 0 | All Passed |
+| Dropdown List | 212 | 212 | 0 | All Passed |
+| Dropdown Tree | 110 | 110 | 0 | All Passed |
+| File Manager | 2198 | 2198 | 0 | All Passed |
+| Floating Action Button | 174 | 174 | 0 | All Passed |
+| Gantt | 5491 | 5491 | 0 | All Passed |
+| HeatMap Chart | 678 | 678 | 0 | All Passed |
+| Image Editor | 1653 | 1653 | 0 | All Passed |
+| In-place Editor | 643 | 643 | 0 | All Passed |
+| Kanban | 268 | 268 | 0 | All Passed |
+| LinearGauge | 427 | 427 | 0 | All Passed |
+| Listbox | 115 | 115 | 0 | All Passed |
+| ListView | 84 | 84 | 0 | All Passed |
+| Maps | 1386 | 1386 | 0 | All Passed |
+| Mention | 53 | 53 | 0 | All Passed |
+| Menu | 187 | 187 | 0 | All Passed |
+| Multicolumn Combo Box | 257 | 257 | 0 | All Passed |
+| Multiselect Dropdown | 457 | 457 | 0 | All Passed |
+| OTP Input | 240 | 240 | 0 | All Passed |
+| Pivot Table | 5656 | 5656 | 0 | All Passed |
+| Progress Bar | 83 | 83 | 0 | All Passed |
+| Progress Button | 132 | 132 | 0 | All Passed |
+| Query Builder | 480 | 480 | 0 | All Passed |
+| RadioButton | 45 | 45 | 0 | All Passed |
+| RangeNavigator | 140 | 140 | 0 | All Passed |
+| Rating | 198 | 198 | 0 | All Passed |
+| Ribbon | 629 | 629 | 0 | All Passed |
+| Rich Text Editor | 5138 | 5138 | 0 | All Passed |
+| schedule | 4733 | 4733 | 0 | All Passed |
+| sidebar | 94 | 94 | 0 | All Passed |
+| Signature | 105 | 105 | 0 | All Passed |
+| Skeleton | 144 | 144 | 0 | All Passed |
+| Slider | 147 | 147 | 0 | All Passed |
+| SmithChart | 49 | 49 | 0 | All Passed |
+| Sparkline | 58 | 58 | 0 | All Passed |
+| Speech To Text | 200 | 200 | 0 | All Passed |
+| Speed Dial | 366 | 366 | 0 | All Passed |
+| Split Button | 145 | 145 | 0 | All Passed |
+| Stepper | 91 | 91 | 0 | All Passed |
+| Stock Chart | 507 | 507 | 0 | All Passed |
+| Tab | 71 | 71 | 0 | All Passed |
+| Text Area | 112 | 112 | 0 | All Passed |
+| TextBox | 69 | 69 | 0 | All Passed |
+| Time Picker | 180 | 180 | 0 | All Passed |
+| Timeline | 213 | 213 | 0 | All Passed |
+| Toast | 139 | 139 | 0 | All Passed |
+| Toolbar | 142 | 142 | 0 | All Passed |
+| ToolTip | 139 | 139 | 0 | All Passed |
+| TreeGrid | 4969 | 4969 | 0 | All Passed |
+| Treemap | 329 | 329 | 0 | All Passed |
+| Treeview | 371 | 371 | 0 | All Passed |
\ No newline at end of file
diff --git a/ej2-react/Release-notes/33.2.13.md b/ej2-react/Release-notes/33.2.13.md
new file mode 100644
index 0000000000..049cc4472d
--- /dev/null
+++ b/ej2-react/Release-notes/33.2.13.md
@@ -0,0 +1,100 @@
+---
+title: Essential Studio for React Release Notes - v33.2.13
+description: Learn here about the controls in the Essential Studio for React Weekly Release - Release Notes - v33.2.13
+platform: ej2-react
+documentation: ug
+---
+
+# Essential Studio for React - v33.2.13 Release Notes
+
+{% include release-info.html date="June 16, 2026" version="v33.2.13" passed="79031" failed="0" %}
+
+{% directory path: _includes/release-notes/v33.2.13 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3D Chart | 232 | 232 | 0 | All Passed |
+| 3D Circular Chart | 374 | 374 | 0 | All Passed |
+| Accordion | 114 | 114 | 0 | All Passed |
+| AI Assist View | 575 | 575 | 0 | All Passed |
+| App Bar | 68 | 68 | 0 | All Passed |
+| AutoComplete | 200 | 200 | 0 | All Passed |
+| Block Editor | 2841 | 2841 | 0 | All Passed |
+| Breadcrumb | 160 | 160 | 0 | All Passed |
+| Bullet Chart | 169 | 169 | 0 | All Passed |
+| Button | 145 | 145 | 0 | All Passed |
+| ButtonGroup | 120 | 120 | 0 | All Passed |
+| calendar | 178 | 178 | 0 | All Passed |
+| Carousel | 62 | 62 | 0 | All Passed |
+| Chart | 8274 | 8274 | 0 | All Passed |
+| Chat UI | 690 | 690 | 0 | All Passed |
+| Checkbox | 37 | 37 | 0 | All Passed |
+| CircularGauge | 432 | 432 | 0 | All Passed |
+| ColorPicker | 130 | 130 | 0 | All Passed |
+| Combo Box | 148 | 148 | 0 | All Passed |
+| Common | 906 | 906 | 0 | All Passed |
+| Context Menu | 106 | 106 | 0 | All Passed |
+| Dashboard layout | 30 | 30 | 0 | All Passed |
+| Data Grid | 4139 | 4139 | 0 | All Passed |
+| Date Picker | 431 | 431 | 0 | All Passed |
+| Date Range Picker | 521 | 521 | 0 | All Passed |
+| Date Time Picker | 326 | 326 | 0 | All Passed |
+| Diagram | 16910 | 16910 | 0 | All Passed |
+| Dialog | 74 | 74 | 0 | All Passed |
+| DropDown Button | 132 | 132 | 0 | All Passed |
+| Dropdown List | 212 | 212 | 0 | All Passed |
+| Dropdown Tree | 110 | 110 | 0 | All Passed |
+| File Manager | 2198 | 2198 | 0 | All Passed |
+| Floating Action Button | 174 | 174 | 0 | All Passed |
+| Gantt | 5491 | 5491 | 0 | All Passed |
+| HeatMap Chart | 678 | 678 | 0 | All Passed |
+| Image Editor | 1653 | 1653 | 0 | All Passed |
+| In-place Editor | 643 | 643 | 0 | All Passed |
+| Kanban | 268 | 268 | 0 | All Passed |
+| LinearGauge | 427 | 427 | 0 | All Passed |
+| Listbox | 115 | 115 | 0 | All Passed |
+| ListView | 84 | 84 | 0 | All Passed |
+| Maps | 1386 | 1386 | 0 | All Passed |
+| Mention | 53 | 53 | 0 | All Passed |
+| Menu | 187 | 187 | 0 | All Passed |
+| Multicolumn Combo Box | 257 | 257 | 0 | All Passed |
+| Multiselect Dropdown | 457 | 457 | 0 | All Passed |
+| OTP Input | 240 | 240 | 0 | All Passed |
+| Pivot Table | 5656 | 5656 | 0 | All Passed |
+| Progress Bar | 83 | 83 | 0 | All Passed |
+| Progress Button | 132 | 132 | 0 | All Passed |
+| Query Builder | 480 | 480 | 0 | All Passed |
+| RadioButton | 45 | 45 | 0 | All Passed |
+| RangeNavigator | 140 | 140 | 0 | All Passed |
+| Rating | 198 | 198 | 0 | All Passed |
+| Ribbon | 629 | 629 | 0 | All Passed |
+| Rich Text Editor | 5138 | 5138 | 0 | All Passed |
+| schedule | 4733 | 4733 | 0 | All Passed |
+| sidebar | 94 | 94 | 0 | All Passed |
+| Signature | 105 | 105 | 0 | All Passed |
+| Skeleton | 144 | 144 | 0 | All Passed |
+| Slider | 147 | 147 | 0 | All Passed |
+| SmithChart | 49 | 49 | 0 | All Passed |
+| Sparkline | 58 | 58 | 0 | All Passed |
+| Speech To Text | 200 | 200 | 0 | All Passed |
+| Speed Dial | 366 | 366 | 0 | All Passed |
+| Split Button | 145 | 145 | 0 | All Passed |
+| Stepper | 91 | 91 | 0 | All Passed |
+| Stock Chart | 507 | 507 | 0 | All Passed |
+| Tab | 71 | 71 | 0 | All Passed |
+| Text Area | 112 | 112 | 0 | All Passed |
+| TextBox | 69 | 69 | 0 | All Passed |
+| Time Picker | 180 | 180 | 0 | All Passed |
+| Timeline | 213 | 213 | 0 | All Passed |
+| Toast | 139 | 139 | 0 | All Passed |
+| Toolbar | 142 | 142 | 0 | All Passed |
+| ToolTip | 139 | 139 | 0 | All Passed |
+| TreeGrid | 4969 | 4969 | 0 | All Passed |
+| Treemap | 329 | 329 | 0 | All Passed |
+| Treeview | 371 | 371 | 0 | All Passed |
\ No newline at end of file
diff --git a/ej2-react/Release-notes/33.2.15.md b/ej2-react/Release-notes/33.2.15.md
new file mode 100644
index 0000000000..7d50931234
--- /dev/null
+++ b/ej2-react/Release-notes/33.2.15.md
@@ -0,0 +1,100 @@
+---
+title: Essential Studio for React Release Notes - v33.2.15
+description: Learn here about the controls in the Essential Studio for React Weekly Release - Release Notes - v33.2.15
+platform: ej2-react
+documentation: ug
+---
+
+# Essential Studio for React - v33.2.15 Release Notes
+
+{% include release-info.html date="June 23, 2026" version="v33.2.15" passed="79031" failed="0" %}
+
+{% directory path: _includes/release-notes/v33.2.15 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3D Chart | 232 | 232 | 0 | All Passed |
+| 3D Circular Chart | 374 | 374 | 0 | All Passed |
+| Accordion | 114 | 114 | 0 | All Passed |
+| AI Assist View | 575 | 575 | 0 | All Passed |
+| App Bar | 68 | 68 | 0 | All Passed |
+| AutoComplete | 200 | 200 | 0 | All Passed |
+| Block Editor | 2841 | 2841 | 0 | All Passed |
+| Breadcrumb | 160 | 160 | 0 | All Passed |
+| Bullet Chart | 169 | 169 | 0 | All Passed |
+| Button | 145 | 145 | 0 | All Passed |
+| ButtonGroup | 120 | 120 | 0 | All Passed |
+| calendar | 178 | 178 | 0 | All Passed |
+| Carousel | 62 | 62 | 0 | All Passed |
+| Chart | 8274 | 8274 | 0 | All Passed |
+| Chat UI | 690 | 690 | 0 | All Passed |
+| Checkbox | 37 | 37 | 0 | All Passed |
+| CircularGauge | 432 | 432 | 0 | All Passed |
+| ColorPicker | 130 | 130 | 0 | All Passed |
+| Combo Box | 148 | 148 | 0 | All Passed |
+| Common | 906 | 906 | 0 | All Passed |
+| Context Menu | 106 | 106 | 0 | All Passed |
+| Dashboard layout | 30 | 30 | 0 | All Passed |
+| Data Grid | 4139 | 4139 | 0 | All Passed |
+| Date Picker | 431 | 431 | 0 | All Passed |
+| Date Range Picker | 521 | 521 | 0 | All Passed |
+| Date Time Picker | 326 | 326 | 0 | All Passed |
+| Diagram | 16910 | 16910 | 0 | All Passed |
+| Dialog | 74 | 74 | 0 | All Passed |
+| DropDown Button | 132 | 132 | 0 | All Passed |
+| Dropdown List | 212 | 212 | 0 | All Passed |
+| Dropdown Tree | 110 | 110 | 0 | All Passed |
+| File Manager | 2198 | 2198 | 0 | All Passed |
+| Floating Action Button | 174 | 174 | 0 | All Passed |
+| Gantt | 5491 | 5491 | 0 | All Passed |
+| HeatMap Chart | 678 | 678 | 0 | All Passed |
+| Image Editor | 1653 | 1653 | 0 | All Passed |
+| In-place Editor | 643 | 643 | 0 | All Passed |
+| Kanban | 268 | 268 | 0 | All Passed |
+| LinearGauge | 427 | 427 | 0 | All Passed |
+| Listbox | 115 | 115 | 0 | All Passed |
+| ListView | 84 | 84 | 0 | All Passed |
+| Maps | 1386 | 1386 | 0 | All Passed |
+| Mention | 53 | 53 | 0 | All Passed |
+| Menu | 187 | 187 | 0 | All Passed |
+| Multicolumn Combo Box | 257 | 257 | 0 | All Passed |
+| Multiselect Dropdown | 457 | 457 | 0 | All Passed |
+| OTP Input | 240 | 240 | 0 | All Passed |
+| Pivot Table | 5656 | 5656 | 0 | All Passed |
+| Progress Bar | 83 | 83 | 0 | All Passed |
+| Progress Button | 132 | 132 | 0 | All Passed |
+| Query Builder | 480 | 480 | 0 | All Passed |
+| RadioButton | 45 | 45 | 0 | All Passed |
+| RangeNavigator | 140 | 140 | 0 | All Passed |
+| Rating | 198 | 198 | 0 | All Passed |
+| Ribbon | 629 | 629 | 0 | All Passed |
+| Rich Text Editor | 5138 | 5138 | 0 | All Passed |
+| schedule | 4733 | 4733 | 0 | All Passed |
+| sidebar | 94 | 94 | 0 | All Passed |
+| Signature | 105 | 105 | 0 | All Passed |
+| Skeleton | 144 | 144 | 0 | All Passed |
+| Slider | 147 | 147 | 0 | All Passed |
+| SmithChart | 49 | 49 | 0 | All Passed |
+| Sparkline | 58 | 58 | 0 | All Passed |
+| Speech To Text | 200 | 200 | 0 | All Passed |
+| Speed Dial | 366 | 366 | 0 | All Passed |
+| Split Button | 145 | 145 | 0 | All Passed |
+| Stepper | 91 | 91 | 0 | All Passed |
+| Stock Chart | 507 | 507 | 0 | All Passed |
+| Tab | 71 | 71 | 0 | All Passed |
+| Text Area | 112 | 112 | 0 | All Passed |
+| TextBox | 69 | 69 | 0 | All Passed |
+| Time Picker | 180 | 180 | 0 | All Passed |
+| Timeline | 213 | 213 | 0 | All Passed |
+| Toast | 139 | 139 | 0 | All Passed |
+| Toolbar | 142 | 142 | 0 | All Passed |
+| ToolTip | 139 | 139 | 0 | All Passed |
+| TreeGrid | 4969 | 4969 | 0 | All Passed |
+| Treemap | 329 | 329 | 0 | All Passed |
+| Treeview | 371 | 371 | 0 | All Passed |
\ No newline at end of file
diff --git a/ej2-react/Release-notes/33.2.4.md b/ej2-react/Release-notes/33.2.4.md
new file mode 100644
index 0000000000..fbfafea512
--- /dev/null
+++ b/ej2-react/Release-notes/33.2.4.md
@@ -0,0 +1,99 @@
+---
+title: Essential Studio for React Release Notes - v33.2.4
+description: Learn here about the controls in the Essential Studio for React Weekly Release - Release Notes - v33.2.4
+platform: ej2-react
+documentation: ug
+---
+
+# Essential Studio for React - v33.2.4 Release Notes
+
+{% include release-info.html date="April 28, 2026" version="v33.2.4" passed="75809" failed="0" %}
+
+{% directory path: _includes/release-notes/v33.2.4 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3D Chart | 232 | 232 | 0 | All Passed |
+| 3D Circular Chart | 374 | 374 | 0 | All Passed |
+| Accordion | 113 | 113 | 0 | All Passed |
+| AI Assist View | 523 | 523 | 0 | All Passed |
+| App Bar | 68 | 68 | 0 | All Passed |
+| AutoComplete | 200 | 200 | 0 | All Passed |
+| Breadcrumb | 160 | 160 | 0 | All Passed |
+| Bullet Chart | 169 | 169 | 0 | All Passed |
+| Button | 145 | 145 | 0 | All Passed |
+| ButtonGroup | 120 | 120 | 0 | All Passed |
+| calendar | 178 | 178 | 0 | All Passed |
+| Carousel | 62 | 62 | 0 | All Passed |
+| Chart | 8260 | 8260 | 0 | All Passed |
+| Chat UI | 690 | 690 | 0 | All Passed |
+| Checkbox | 37 | 37 | 0 | All Passed |
+| CircularGauge | 432 | 432 | 0 | All Passed |
+| ColorPicker | 130 | 130 | 0 | All Passed |
+| Combo Box | 148 | 148 | 0 | All Passed |
+| Common | 906 | 906 | 0 | All Passed |
+| Context Menu | 106 | 106 | 0 | All Passed |
+| Dashboard layout | 30 | 30 | 0 | All Passed |
+| Data Grid | 4139 | 4139 | 0 | All Passed |
+| Date Picker | 431 | 431 | 0 | All Passed |
+| Date Range Picker | 515 | 515 | 0 | All Passed |
+| Date Time Picker | 326 | 326 | 0 | All Passed |
+| Diagram | 16910 | 16910 | 0 | All Passed |
+| Dialog | 74 | 74 | 0 | All Passed |
+| DropDown Button | 132 | 132 | 0 | All Passed |
+| Dropdown List | 210 | 210 | 0 | All Passed |
+| Dropdown Tree | 110 | 110 | 0 | All Passed |
+| File Manager | 2198 | 2198 | 0 | All Passed |
+| Floating Action Button | 174 | 174 | 0 | All Passed |
+| Gantt | 5486 | 5486 | 0 | All Passed |
+| HeatMap Chart | 677 | 677 | 0 | All Passed |
+| Image Editor | 1653 | 1653 | 0 | All Passed |
+| In-place Editor | 643 | 643 | 0 | All Passed |
+| Kanban | 268 | 268 | 0 | All Passed |
+| LinearGauge | 427 | 427 | 0 | All Passed |
+| Listbox | 115 | 115 | 0 | All Passed |
+| ListView | 84 | 84 | 0 | All Passed |
+| Maps | 1387 | 1387 | 0 | All Passed |
+| Mention | 50 | 50 | 0 | All Passed |
+| Menu | 187 | 187 | 0 | All Passed |
+| Multicolumn Combo Box | 257 | 257 | 0 | All Passed |
+| Multiselect Dropdown | 453 | 453 | 0 | All Passed |
+| OTP Input | 240 | 240 | 0 | All Passed |
+| Pivot Table | 5371 | 5371 | 0 | All Passed |
+| Progress Bar | 83 | 83 | 0 | All Passed |
+| Progress Button | 132 | 132 | 0 | All Passed |
+| Query Builder | 480 | 480 | 0 | All Passed |
+| RadioButton | 45 | 45 | 0 | All Passed |
+| RangeNavigator | 140 | 140 | 0 | All Passed |
+| Rating | 198 | 198 | 0 | All Passed |
+| Ribbon | 628 | 628 | 0 | All Passed |
+| Rich Text Editor | 5138 | 5138 | 0 | All Passed |
+| schedule | 4733 | 4733 | 0 | All Passed |
+| sidebar | 94 | 94 | 0 | All Passed |
+| Signature | 105 | 105 | 0 | All Passed |
+| Skeleton | 144 | 144 | 0 | All Passed |
+| Slider | 147 | 147 | 0 | All Passed |
+| SmithChart | 49 | 49 | 0 | All Passed |
+| Sparkline | 58 | 58 | 0 | All Passed |
+| Speech To Text | 200 | 200 | 0 | All Passed |
+| Speed Dial | 366 | 366 | 0 | All Passed |
+| Split Button | 145 | 145 | 0 | All Passed |
+| Stepper | 91 | 91 | 0 | All Passed |
+| Stock Chart | 507 | 507 | 0 | All Passed |
+| Tab | 71 | 71 | 0 | All Passed |
+| Text Area | 112 | 112 | 0 | All Passed |
+| TextBox | 67 | 67 | 0 | All Passed |
+| Time Picker | 180 | 180 | 0 | All Passed |
+| Timeline | 213 | 213 | 0 | All Passed |
+| Toast | 139 | 139 | 0 | All Passed |
+| Toolbar | 141 | 141 | 0 | All Passed |
+| ToolTip | 138 | 138 | 0 | All Passed |
+| TreeGrid | 4965 | 4965 | 0 | All Passed |
+| Treemap | 329 | 329 | 0 | All Passed |
+| Treeview | 371 | 371 | 0 | All Passed |
\ No newline at end of file
diff --git a/ej2-react/Release-notes/33.2.5.md b/ej2-react/Release-notes/33.2.5.md
new file mode 100644
index 0000000000..3799230f7d
--- /dev/null
+++ b/ej2-react/Release-notes/33.2.5.md
@@ -0,0 +1,100 @@
+---
+title: Essential Studio for React Release Notes - v33.2.5
+description: Learn here about the controls in the Essential Studio for React Weekly Release - Release Notes - v33.2.5
+platform: ej2-react
+documentation: ug
+---
+
+# Essential Studio for React - v33.2.5 Release Notes
+
+{% include release-info.html date="May 05, 2026" version="v33.2.5" passed="77267" failed="0" %}
+
+{% directory path: _includes/release-notes/v33.2.5 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3D Chart | 232 | 232 | 0 | All Passed |
+| 3D Circular Chart | 374 | 374 | 0 | All Passed |
+| Accordion | 113 | 113 | 0 | All Passed |
+| AI Assist View | 523 | 523 | 0 | All Passed |
+| App Bar | 68 | 68 | 0 | All Passed |
+| AutoComplete | 200 | 200 | 0 | All Passed |
+| Block Editor | 1455 | 1455 | 0 | All Passed |
+| Breadcrumb | 160 | 160 | 0 | All Passed |
+| Bullet Chart | 169 | 169 | 0 | All Passed |
+| Button | 145 | 145 | 0 | All Passed |
+| ButtonGroup | 120 | 120 | 0 | All Passed |
+| calendar | 178 | 178 | 0 | All Passed |
+| Carousel | 62 | 62 | 0 | All Passed |
+| Chart | 8260 | 8260 | 0 | All Passed |
+| Chat UI | 690 | 690 | 0 | All Passed |
+| Checkbox | 37 | 37 | 0 | All Passed |
+| CircularGauge | 432 | 432 | 0 | All Passed |
+| ColorPicker | 130 | 130 | 0 | All Passed |
+| Combo Box | 148 | 148 | 0 | All Passed |
+| Common | 906 | 906 | 0 | All Passed |
+| Context Menu | 106 | 106 | 0 | All Passed |
+| Dashboard layout | 30 | 30 | 0 | All Passed |
+| Data Grid | 4139 | 4139 | 0 | All Passed |
+| Date Picker | 431 | 431 | 0 | All Passed |
+| Date Range Picker | 515 | 515 | 0 | All Passed |
+| Date Time Picker | 326 | 326 | 0 | All Passed |
+| Diagram | 16910 | 16910 | 0 | All Passed |
+| Dialog | 74 | 74 | 0 | All Passed |
+| DropDown Button | 132 | 132 | 0 | All Passed |
+| Dropdown List | 210 | 210 | 0 | All Passed |
+| Dropdown Tree | 110 | 110 | 0 | All Passed |
+| File Manager | 2198 | 2198 | 0 | All Passed |
+| Floating Action Button | 174 | 174 | 0 | All Passed |
+| Gantt | 5490 | 5490 | 0 | All Passed |
+| HeatMap Chart | 677 | 677 | 0 | All Passed |
+| Image Editor | 1653 | 1653 | 0 | All Passed |
+| In-place Editor | 643 | 643 | 0 | All Passed |
+| Kanban | 268 | 268 | 0 | All Passed |
+| LinearGauge | 427 | 427 | 0 | All Passed |
+| Listbox | 115 | 115 | 0 | All Passed |
+| ListView | 84 | 84 | 0 | All Passed |
+| Maps | 1386 | 1386 | 0 | All Passed |
+| Mention | 50 | 50 | 0 | All Passed |
+| Menu | 187 | 187 | 0 | All Passed |
+| Multicolumn Combo Box | 257 | 257 | 0 | All Passed |
+| Multiselect Dropdown | 453 | 453 | 0 | All Passed |
+| OTP Input | 240 | 240 | 0 | All Passed |
+| Pivot Table | 5371 | 5371 | 0 | All Passed |
+| Progress Bar | 83 | 83 | 0 | All Passed |
+| Progress Button | 132 | 132 | 0 | All Passed |
+| Query Builder | 480 | 480 | 0 | All Passed |
+| RadioButton | 45 | 45 | 0 | All Passed |
+| RangeNavigator | 140 | 140 | 0 | All Passed |
+| Rating | 198 | 198 | 0 | All Passed |
+| Ribbon | 628 | 628 | 0 | All Passed |
+| Rich Text Editor | 5138 | 5138 | 0 | All Passed |
+| schedule | 4733 | 4733 | 0 | All Passed |
+| sidebar | 94 | 94 | 0 | All Passed |
+| Signature | 105 | 105 | 0 | All Passed |
+| Skeleton | 144 | 144 | 0 | All Passed |
+| Slider | 147 | 147 | 0 | All Passed |
+| SmithChart | 49 | 49 | 0 | All Passed |
+| Sparkline | 58 | 58 | 0 | All Passed |
+| Speech To Text | 200 | 200 | 0 | All Passed |
+| Speed Dial | 366 | 366 | 0 | All Passed |
+| Split Button | 145 | 145 | 0 | All Passed |
+| Stepper | 91 | 91 | 0 | All Passed |
+| Stock Chart | 507 | 507 | 0 | All Passed |
+| Tab | 71 | 71 | 0 | All Passed |
+| Text Area | 112 | 112 | 0 | All Passed |
+| TextBox | 67 | 67 | 0 | All Passed |
+| Time Picker | 180 | 180 | 0 | All Passed |
+| Timeline | 213 | 213 | 0 | All Passed |
+| Toast | 139 | 139 | 0 | All Passed |
+| Toolbar | 141 | 141 | 0 | All Passed |
+| ToolTip | 138 | 138 | 0 | All Passed |
+| TreeGrid | 4965 | 4965 | 0 | All Passed |
+| Treemap | 329 | 329 | 0 | All Passed |
+| Treeview | 371 | 371 | 0 | All Passed |
\ No newline at end of file
diff --git a/ej2-react/Release-notes/33.2.6.md b/ej2-react/Release-notes/33.2.6.md
new file mode 100644
index 0000000000..dfc658f0ef
--- /dev/null
+++ b/ej2-react/Release-notes/33.2.6.md
@@ -0,0 +1,100 @@
+---
+title: Essential Studio for React Release Notes - v33.2.6
+description: Learn here about the controls in the Essential Studio for React Weekly Release - Release Notes - v33.2.6
+platform: ej2-react
+documentation: ug
+---
+
+# Essential Studio for React - v33.2.6 Release Notes
+
+{% include release-info.html date="May 12, 2026" version="v33.2.6" passed="78666" failed="0" %}
+
+{% directory path: _includes/release-notes/v33.2.6 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3D Chart | 232 | 232 | 0 | All Passed |
+| 3D Circular Chart | 374 | 374 | 0 | All Passed |
+| Accordion | 113 | 113 | 0 | All Passed |
+| AI Assist View | 523 | 523 | 0 | All Passed |
+| App Bar | 68 | 68 | 0 | All Passed |
+| AutoComplete | 200 | 200 | 0 | All Passed |
+| Block Editor | 2841 | 2841 | 0 | All Passed |
+| Breadcrumb | 160 | 160 | 0 | All Passed |
+| Bullet Chart | 169 | 169 | 0 | All Passed |
+| Button | 145 | 145 | 0 | All Passed |
+| ButtonGroup | 120 | 120 | 0 | All Passed |
+| calendar | 178 | 178 | 0 | All Passed |
+| Carousel | 62 | 62 | 0 | All Passed |
+| Chart | 8260 | 8260 | 0 | All Passed |
+| Chat UI | 690 | 690 | 0 | All Passed |
+| Checkbox | 37 | 37 | 0 | All Passed |
+| CircularGauge | 432 | 432 | 0 | All Passed |
+| ColorPicker | 130 | 130 | 0 | All Passed |
+| Combo Box | 148 | 148 | 0 | All Passed |
+| Common | 906 | 906 | 0 | All Passed |
+| Context Menu | 106 | 106 | 0 | All Passed |
+| Dashboard layout | 30 | 30 | 0 | All Passed |
+| Data Grid | 4139 | 4139 | 0 | All Passed |
+| Date Picker | 431 | 431 | 0 | All Passed |
+| Date Range Picker | 517 | 517 | 0 | All Passed |
+| Date Time Picker | 326 | 326 | 0 | All Passed |
+| Diagram | 16910 | 16910 | 0 | All Passed |
+| Dialog | 74 | 74 | 0 | All Passed |
+| DropDown Button | 132 | 132 | 0 | All Passed |
+| Dropdown List | 210 | 210 | 0 | All Passed |
+| Dropdown Tree | 110 | 110 | 0 | All Passed |
+| File Manager | 2198 | 2198 | 0 | All Passed |
+| Floating Action Button | 174 | 174 | 0 | All Passed |
+| Gantt | 5490 | 5490 | 0 | All Passed |
+| HeatMap Chart | 678 | 678 | 0 | All Passed |
+| Image Editor | 1653 | 1653 | 0 | All Passed |
+| In-place Editor | 643 | 643 | 0 | All Passed |
+| Kanban | 268 | 268 | 0 | All Passed |
+| LinearGauge | 427 | 427 | 0 | All Passed |
+| Listbox | 115 | 115 | 0 | All Passed |
+| ListView | 84 | 84 | 0 | All Passed |
+| Maps | 1386 | 1386 | 0 | All Passed |
+| Mention | 50 | 50 | 0 | All Passed |
+| Menu | 187 | 187 | 0 | All Passed |
+| Multicolumn Combo Box | 257 | 257 | 0 | All Passed |
+| Multiselect Dropdown | 457 | 457 | 0 | All Passed |
+| OTP Input | 240 | 240 | 0 | All Passed |
+| Pivot Table | 5371 | 5371 | 0 | All Passed |
+| Progress Bar | 83 | 83 | 0 | All Passed |
+| Progress Button | 132 | 132 | 0 | All Passed |
+| Query Builder | 480 | 480 | 0 | All Passed |
+| RadioButton | 45 | 45 | 0 | All Passed |
+| RangeNavigator | 140 | 140 | 0 | All Passed |
+| Rating | 198 | 198 | 0 | All Passed |
+| Ribbon | 629 | 629 | 0 | All Passed |
+| Rich Text Editor | 5138 | 5138 | 0 | All Passed |
+| schedule | 4733 | 4733 | 0 | All Passed |
+| sidebar | 94 | 94 | 0 | All Passed |
+| Signature | 105 | 105 | 0 | All Passed |
+| Skeleton | 144 | 144 | 0 | All Passed |
+| Slider | 147 | 147 | 0 | All Passed |
+| SmithChart | 49 | 49 | 0 | All Passed |
+| Sparkline | 58 | 58 | 0 | All Passed |
+| Speech To Text | 200 | 200 | 0 | All Passed |
+| Speed Dial | 366 | 366 | 0 | All Passed |
+| Split Button | 145 | 145 | 0 | All Passed |
+| Stepper | 91 | 91 | 0 | All Passed |
+| Stock Chart | 507 | 507 | 0 | All Passed |
+| Tab | 71 | 71 | 0 | All Passed |
+| Text Area | 112 | 112 | 0 | All Passed |
+| TextBox | 67 | 67 | 0 | All Passed |
+| Time Picker | 180 | 180 | 0 | All Passed |
+| Timeline | 213 | 213 | 0 | All Passed |
+| Toast | 139 | 139 | 0 | All Passed |
+| Toolbar | 141 | 141 | 0 | All Passed |
+| ToolTip | 139 | 139 | 0 | All Passed |
+| TreeGrid | 4969 | 4969 | 0 | All Passed |
+| Treemap | 329 | 329 | 0 | All Passed |
+| Treeview | 371 | 371 | 0 | All Passed |
\ No newline at end of file
diff --git a/ej2-react/Release-notes/33.2.7.md b/ej2-react/Release-notes/33.2.7.md
new file mode 100644
index 0000000000..fa24f83885
--- /dev/null
+++ b/ej2-react/Release-notes/33.2.7.md
@@ -0,0 +1,100 @@
+---
+title: Essential Studio for React Release Notes - v33.2.7
+description: Learn here about the controls in the Essential Studio for React Weekly Release - Release Notes - v33.2.7
+platform: ej2-react
+documentation: ug
+---
+
+# Essential Studio for React - v33.2.7 Release Notes
+
+{% include release-info.html date="May 19, 2026" version="v33.2.7" passed="78961" failed="0" %}
+
+{% directory path: _includes/release-notes/v33.2.7 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3D Chart | 232 | 232 | 0 | All Passed |
+| 3D Circular Chart | 374 | 374 | 0 | All Passed |
+| Accordion | 113 | 113 | 0 | All Passed |
+| AI Assist View | 523 | 523 | 0 | All Passed |
+| App Bar | 68 | 68 | 0 | All Passed |
+| AutoComplete | 200 | 200 | 0 | All Passed |
+| Block Editor | 2841 | 2841 | 0 | All Passed |
+| Breadcrumb | 160 | 160 | 0 | All Passed |
+| Bullet Chart | 169 | 169 | 0 | All Passed |
+| Button | 145 | 145 | 0 | All Passed |
+| ButtonGroup | 120 | 120 | 0 | All Passed |
+| calendar | 178 | 178 | 0 | All Passed |
+| Carousel | 62 | 62 | 0 | All Passed |
+| Chart | 8260 | 8260 | 0 | All Passed |
+| Chat UI | 690 | 690 | 0 | All Passed |
+| Checkbox | 37 | 37 | 0 | All Passed |
+| CircularGauge | 432 | 432 | 0 | All Passed |
+| ColorPicker | 130 | 130 | 0 | All Passed |
+| Combo Box | 148 | 148 | 0 | All Passed |
+| Common | 906 | 906 | 0 | All Passed |
+| Context Menu | 106 | 106 | 0 | All Passed |
+| Dashboard layout | 30 | 30 | 0 | All Passed |
+| Data Grid | 4139 | 4139 | 0 | All Passed |
+| Date Picker | 431 | 431 | 0 | All Passed |
+| Date Range Picker | 519 | 519 | 0 | All Passed |
+| Date Time Picker | 326 | 326 | 0 | All Passed |
+| Diagram | 16910 | 16910 | 0 | All Passed |
+| Dialog | 74 | 74 | 0 | All Passed |
+| DropDown Button | 132 | 132 | 0 | All Passed |
+| Dropdown List | 212 | 212 | 0 | All Passed |
+| Dropdown Tree | 110 | 110 | 0 | All Passed |
+| File Manager | 2198 | 2198 | 0 | All Passed |
+| Floating Action Button | 174 | 174 | 0 | All Passed |
+| Gantt | 5491 | 5491 | 0 | All Passed |
+| HeatMap Chart | 678 | 678 | 0 | All Passed |
+| Image Editor | 1653 | 1653 | 0 | All Passed |
+| In-place Editor | 643 | 643 | 0 | All Passed |
+| Kanban | 268 | 268 | 0 | All Passed |
+| LinearGauge | 427 | 427 | 0 | All Passed |
+| Listbox | 115 | 115 | 0 | All Passed |
+| ListView | 84 | 84 | 0 | All Passed |
+| Maps | 1386 | 1386 | 0 | All Passed |
+| Mention | 53 | 53 | 0 | All Passed |
+| Menu | 187 | 187 | 0 | All Passed |
+| Multicolumn Combo Box | 257 | 257 | 0 | All Passed |
+| Multiselect Dropdown | 457 | 457 | 0 | All Passed |
+| OTP Input | 240 | 240 | 0 | All Passed |
+| Pivot Table | 5656 | 5656 | 0 | All Passed |
+| Progress Bar | 83 | 83 | 0 | All Passed |
+| Progress Button | 132 | 132 | 0 | All Passed |
+| Query Builder | 480 | 480 | 0 | All Passed |
+| RadioButton | 45 | 45 | 0 | All Passed |
+| RangeNavigator | 140 | 140 | 0 | All Passed |
+| Rating | 198 | 198 | 0 | All Passed |
+| Ribbon | 629 | 629 | 0 | All Passed |
+| Rich Text Editor | 5138 | 5138 | 0 | All Passed |
+| schedule | 4733 | 4733 | 0 | All Passed |
+| sidebar | 94 | 94 | 0 | All Passed |
+| Signature | 105 | 105 | 0 | All Passed |
+| Skeleton | 144 | 144 | 0 | All Passed |
+| Slider | 147 | 147 | 0 | All Passed |
+| SmithChart | 49 | 49 | 0 | All Passed |
+| Sparkline | 58 | 58 | 0 | All Passed |
+| Speech To Text | 200 | 200 | 0 | All Passed |
+| Speed Dial | 366 | 366 | 0 | All Passed |
+| Split Button | 145 | 145 | 0 | All Passed |
+| Stepper | 91 | 91 | 0 | All Passed |
+| Stock Chart | 507 | 507 | 0 | All Passed |
+| Tab | 71 | 71 | 0 | All Passed |
+| Text Area | 112 | 112 | 0 | All Passed |
+| TextBox | 69 | 69 | 0 | All Passed |
+| Time Picker | 180 | 180 | 0 | All Passed |
+| Timeline | 213 | 213 | 0 | All Passed |
+| Toast | 139 | 139 | 0 | All Passed |
+| Toolbar | 141 | 141 | 0 | All Passed |
+| ToolTip | 139 | 139 | 0 | All Passed |
+| TreeGrid | 4969 | 4969 | 0 | All Passed |
+| Treemap | 329 | 329 | 0 | All Passed |
+| Treeview | 371 | 371 | 0 | All Passed |
\ No newline at end of file
diff --git a/ej2-react/Release-notes/33.2.8.md b/ej2-react/Release-notes/33.2.8.md
new file mode 100644
index 0000000000..36f8a9d304
--- /dev/null
+++ b/ej2-react/Release-notes/33.2.8.md
@@ -0,0 +1,100 @@
+---
+title: Essential Studio for React Release Notes - v33.2.8
+description: Learn here about the controls in the Essential Studio for React Weekly Release - Release Notes - v33.2.8
+platform: ej2-react
+documentation: ug
+---
+
+# Essential Studio for React - v33.2.8 Release Notes
+
+{% include release-info.html date="May 26, 2026" version="v33.2.8" passed="78979" failed="0" %}
+
+{% directory path: _includes/release-notes/v33.2.8 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3D Chart | 232 | 232 | 0 | All Passed |
+| 3D Circular Chart | 374 | 374 | 0 | All Passed |
+| Accordion | 114 | 114 | 0 | All Passed |
+| AI Assist View | 523 | 523 | 0 | All Passed |
+| App Bar | 68 | 68 | 0 | All Passed |
+| AutoComplete | 200 | 200 | 0 | All Passed |
+| Block Editor | 2841 | 2841 | 0 | All Passed |
+| Breadcrumb | 160 | 160 | 0 | All Passed |
+| Bullet Chart | 169 | 169 | 0 | All Passed |
+| Button | 145 | 145 | 0 | All Passed |
+| ButtonGroup | 120 | 120 | 0 | All Passed |
+| calendar | 178 | 178 | 0 | All Passed |
+| Carousel | 62 | 62 | 0 | All Passed |
+| Chart | 8274 | 8274 | 0 | All Passed |
+| Chat UI | 690 | 690 | 0 | All Passed |
+| Checkbox | 37 | 37 | 0 | All Passed |
+| CircularGauge | 432 | 432 | 0 | All Passed |
+| ColorPicker | 130 | 130 | 0 | All Passed |
+| Combo Box | 148 | 148 | 0 | All Passed |
+| Common | 906 | 906 | 0 | All Passed |
+| Context Menu | 106 | 106 | 0 | All Passed |
+| Dashboard layout | 30 | 30 | 0 | All Passed |
+| Data Grid | 4139 | 4139 | 0 | All Passed |
+| Date Picker | 431 | 431 | 0 | All Passed |
+| Date Range Picker | 521 | 521 | 0 | All Passed |
+| Date Time Picker | 326 | 326 | 0 | All Passed |
+| Diagram | 16910 | 16910 | 0 | All Passed |
+| Dialog | 74 | 74 | 0 | All Passed |
+| DropDown Button | 132 | 132 | 0 | All Passed |
+| Dropdown List | 212 | 212 | 0 | All Passed |
+| Dropdown Tree | 110 | 110 | 0 | All Passed |
+| File Manager | 2198 | 2198 | 0 | All Passed |
+| Floating Action Button | 174 | 174 | 0 | All Passed |
+| Gantt | 5491 | 5491 | 0 | All Passed |
+| HeatMap Chart | 678 | 678 | 0 | All Passed |
+| Image Editor | 1653 | 1653 | 0 | All Passed |
+| In-place Editor | 643 | 643 | 0 | All Passed |
+| Kanban | 268 | 268 | 0 | All Passed |
+| LinearGauge | 427 | 427 | 0 | All Passed |
+| Listbox | 115 | 115 | 0 | All Passed |
+| ListView | 84 | 84 | 0 | All Passed |
+| Maps | 1386 | 1386 | 0 | All Passed |
+| Mention | 53 | 53 | 0 | All Passed |
+| Menu | 187 | 187 | 0 | All Passed |
+| Multicolumn Combo Box | 257 | 257 | 0 | All Passed |
+| Multiselect Dropdown | 457 | 457 | 0 | All Passed |
+| OTP Input | 240 | 240 | 0 | All Passed |
+| Pivot Table | 5656 | 5656 | 0 | All Passed |
+| Progress Bar | 83 | 83 | 0 | All Passed |
+| Progress Button | 132 | 132 | 0 | All Passed |
+| Query Builder | 480 | 480 | 0 | All Passed |
+| RadioButton | 45 | 45 | 0 | All Passed |
+| RangeNavigator | 140 | 140 | 0 | All Passed |
+| Rating | 198 | 198 | 0 | All Passed |
+| Ribbon | 629 | 629 | 0 | All Passed |
+| Rich Text Editor | 5138 | 5138 | 0 | All Passed |
+| schedule | 4733 | 4733 | 0 | All Passed |
+| sidebar | 94 | 94 | 0 | All Passed |
+| Signature | 105 | 105 | 0 | All Passed |
+| Skeleton | 144 | 144 | 0 | All Passed |
+| Slider | 147 | 147 | 0 | All Passed |
+| SmithChart | 49 | 49 | 0 | All Passed |
+| Sparkline | 58 | 58 | 0 | All Passed |
+| Speech To Text | 200 | 200 | 0 | All Passed |
+| Speed Dial | 366 | 366 | 0 | All Passed |
+| Split Button | 145 | 145 | 0 | All Passed |
+| Stepper | 91 | 91 | 0 | All Passed |
+| Stock Chart | 507 | 507 | 0 | All Passed |
+| Tab | 71 | 71 | 0 | All Passed |
+| Text Area | 112 | 112 | 0 | All Passed |
+| TextBox | 69 | 69 | 0 | All Passed |
+| Time Picker | 180 | 180 | 0 | All Passed |
+| Timeline | 213 | 213 | 0 | All Passed |
+| Toast | 139 | 139 | 0 | All Passed |
+| Toolbar | 142 | 142 | 0 | All Passed |
+| ToolTip | 139 | 139 | 0 | All Passed |
+| TreeGrid | 4969 | 4969 | 0 | All Passed |
+| Treemap | 329 | 329 | 0 | All Passed |
+| Treeview | 371 | 371 | 0 | All Passed |
\ No newline at end of file
diff --git a/ej2-react/Release-notes/34.1.29.md b/ej2-react/Release-notes/34.1.29.md
new file mode 100644
index 0000000000..36054e226b
--- /dev/null
+++ b/ej2-react/Release-notes/34.1.29.md
@@ -0,0 +1,100 @@
+---
+title: Essential Studio for React Release Notes
+description: Learn here about the controls in the Essential Studio for React 2026 Volume 2 Main Release - Release Notes
+platform: ej2-react
+documentation: ug
+---
+
+# Essential Studio for React - v34.1.29 Release Notes
+
+{% include release-info.html date="July 01, 2026" version="v34.1.29" passed="79342" failed="0" %}
+
+{% directory path: _includes/release-notes/v34.1.29 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3D Chart | 232 | 232 | 0 | All Passed |
+| 3D Circular Chart | 374 | 374 | 0 | All Passed |
+| Accordion | 114 | 114 | 0 | All Passed |
+| AI Assist View | 575 | 575 | 0 | All Passed |
+| App Bar | 68 | 68 | 0 | All Passed |
+| AutoComplete | 200 | 200 | 0 | All Passed |
+| Block Editor | 2869 | 2869 | 0 | All Passed |
+| Breadcrumb | 160 | 160 | 0 | All Passed |
+| Bullet Chart | 169 | 169 | 0 | All Passed |
+| Button | 145 | 145 | 0 | All Passed |
+| ButtonGroup | 120 | 120 | 0 | All Passed |
+| calendar | 178 | 178 | 0 | All Passed |
+| Carousel | 62 | 62 | 0 | All Passed |
+| Chart | 8274 | 8274 | 0 | All Passed |
+| Chat UI | 690 | 690 | 0 | All Passed |
+| Checkbox | 37 | 37 | 0 | All Passed |
+| CircularGauge | 432 | 432 | 0 | All Passed |
+| ColorPicker | 130 | 130 | 0 | All Passed |
+| Combo Box | 148 | 148 | 0 | All Passed |
+| Common | 906 | 906 | 0 | All Passed |
+| Context Menu | 106 | 106 | 0 | All Passed |
+| Dashboard layout | 30 | 30 | 0 | All Passed |
+| Data Grid | 4140 | 4140 | 0 | All Passed |
+| Date Picker | 431 | 431 | 0 | All Passed |
+| Date Range Picker | 521 | 521 | 0 | All Passed |
+| Date Time Picker | 326 | 326 | 0 | All Passed |
+| Diagram | 16999 | 16999 | 0 | All Passed |
+| Dialog | 76 | 76 | 0 | All Passed |
+| DropDown Button | 132 | 132 | 0 | All Passed |
+| Dropdown List | 212 | 212 | 0 | All Passed |
+| Dropdown Tree | 110 | 110 | 0 | All Passed |
+| File Manager | 2198 | 2198 | 0 | All Passed |
+| Floating Action Button | 174 | 174 | 0 | All Passed |
+| Gantt | 5605 | 5605 | 0 | All Passed |
+| HeatMap Chart | 678 | 678 | 0 | All Passed |
+| Image Editor | 1653 | 1653 | 0 | All Passed |
+| In-place Editor | 643 | 643 | 0 | All Passed |
+| Kanban | 268 | 268 | 0 | All Passed |
+| LinearGauge | 427 | 427 | 0 | All Passed |
+| Listbox | 115 | 115 | 0 | All Passed |
+| ListView | 84 | 84 | 0 | All Passed |
+| Maps | 1390 | 1390 | 0 | All Passed |
+| Mention | 53 | 53 | 0 | All Passed |
+| Menu | 187 | 187 | 0 | All Passed |
+| Multicolumn Combo Box | 257 | 257 | 0 | All Passed |
+| Multiselect Dropdown | 457 | 457 | 0 | All Passed |
+| OTP Input | 240 | 240 | 0 | All Passed |
+| Pivot Table | 5675 | 5675 | 0 | All Passed |
+| Progress Bar | 83 | 83 | 0 | All Passed |
+| Progress Button | 132 | 132 | 0 | All Passed |
+| Query Builder | 480 | 480 | 0 | All Passed |
+| RadioButton | 45 | 45 | 0 | All Passed |
+| RangeNavigator | 140 | 140 | 0 | All Passed |
+| Rating | 198 | 198 | 0 | All Passed |
+| Ribbon | 629 | 629 | 0 | All Passed |
+| Rich Text Editor | 5138 | 5138 | 0 | All Passed |
+| schedule | 4734 | 4734 | 0 | All Passed |
+| sidebar | 94 | 94 | 0 | All Passed |
+| Signature | 105 | 105 | 0 | All Passed |
+| Skeleton | 144 | 144 | 0 | All Passed |
+| Slider | 147 | 147 | 0 | All Passed |
+| SmithChart | 49 | 49 | 0 | All Passed |
+| Sparkline | 58 | 58 | 0 | All Passed |
+| Speech To Text | 200 | 200 | 0 | All Passed |
+| Speed Dial | 366 | 366 | 0 | All Passed |
+| Split Button | 145 | 145 | 0 | All Passed |
+| Stepper | 91 | 91 | 0 | All Passed |
+| Stock Chart | 507 | 507 | 0 | All Passed |
+| Tab | 71 | 71 | 0 | All Passed |
+| Text Area | 112 | 112 | 0 | All Passed |
+| TextBox | 69 | 69 | 0 | All Passed |
+| Time Picker | 180 | 180 | 0 | All Passed |
+| Timeline | 213 | 213 | 0 | All Passed |
+| Toast | 139 | 139 | 0 | All Passed |
+| Toolbar | 142 | 142 | 0 | All Passed |
+| ToolTip | 139 | 139 | 0 | All Passed |
+| TreeGrid | 5022 | 5022 | 0 | All Passed |
+| Treemap | 329 | 329 | 0 | All Passed |
+| Treeview | 371 | 371 | 0 | All Passed |
\ No newline at end of file
diff --git a/ej2-react/accumulation-chart/getting-started.md b/ej2-react/accumulation-chart/getting-started.md
index 9ab7307853..4aed9e1f81 100644
--- a/ej2-react/accumulation-chart/getting-started.md
+++ b/ej2-react/accumulation-chart/getting-started.md
@@ -8,121 +8,169 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Getting started with React Accumulation Charts of Syncfusion
+# Getting Started with React Accumulation Chart Component
-This section describes the steps to create a simple Accumulation Chart and demonstrates the basic usage of the Accumulation Chart component. The dependencies for Accumulation Chart is same as chart control.
+This section describes the steps to create a simple Accumulation Chart.
A quick video overview of the React Accumulation Charts setup is available:
{% youtube "https://www.youtube.com/watch?v=VHYoL3gVmHA" %}
-## Dependencies
+## Prerequisites
-Below is the list of minimum dependencies required to use the Accumulation Chart component.
+Before getting started, ensure that your development environment meets the [system requirements for Syncfusion® React UI components](https://ej2.syncfusion.com/react/documentation/system-requirement)
-```
-|-- @syncfusion/ej2-react-charts
- |-- @syncfusion/ej2-data
- |-- @syncfusion/ej2-pdf-export
- |-- @syncfusion/ej2-file-utils
- |-- @syncfusion/ej2-compression
- |-- @syncfusion/ej2-react-popups
- |-- @syncfusion/ej2-react-buttons
- |-- @syncfusion/ej2-react-base
-```
+## Before You Begin
+
+This guide uses the React application structure generated by Vite with the TypeScript template.
+
+The main files used in this guide are:
+
+* `src/App.tsx` — Defines the root React component.
+* `src/main.tsx` — Application entry point.
+* `index.html` — Root HTML file.
+
+> **Note:** In a Vite React TypeScript application, the root component is commonly generated as `src/App.tsx`. If your application uses JavaScript, the equivalent file is typically `src/App.jsx`.
-Once you install `@syncfusion/ej2-react-charts`, the other required dependencies will be installed automatically along with the main package.
+> **Note:** This guide uses the TypeScript template for better type checking with Accumulation Chart models.
## Installation and configuration
-### Create a React application
+> **Note:** As an alternative, you can create a React application using [`create-react-app`](https://github.com/facebook/create-react-app) For detailed instructions, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app).
-To easily set up a React application, use the Vite CLI (`npm create vite`), which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like [`create-react-app`](https://github.com/facebook/create-react-app). For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide). Vite sets up your environment using JavaScript and optimizes your application for production.
+### Step 1: Set up the React environment
-> **Note:** To create a React application using [`create-react-app`](https://github.com/facebook/create-react-app) instead, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details.
+Use [Vite](https://vitejs.dev/) to create and manage React applications. Vite provides a fast development environment and optimized builds for modern React applications. Syncfusion® React documentation also recommends Vite for setting up React applications.
-To create a new React application, run the following command.
+Start by opening a terminal on your system **(Command Prompt, PowerShell, or Terminal)**. You may work from the default C: drive location or create a new folder and open the terminal in it.
+
+### Step 2: Create a React application
+
+Create a new React application using the below command.
```bash
-npm create vite@latest my-app
+npm create vite@latest my-chart-app -- --template react-ts
```
-This command will prompt you for a few settings for the new project, such as selecting a framework and a variant.
-
-
+If Vite prompts you to install dependencies and start the project immediately, choose **No**. The Syncfusion package is installed in a later step.
-To set up a React application in TypeScript environment, run the following command.
+Navigate to the project folder:
```bash
-npm create vite@latest my-app -- --template react-ts
-cd my-app
-npm run dev
+cd my-chart-app
```
-To set up a React application in JavaScript environment, run the following command.
+Install the application dependencies:
```bash
-npm create vite@latest my-app -- --template react
-cd my-app
-npm run dev
+npm install
```
-### Install Syncfusion® Accumulation Chart package
+> **Note:** If you prefer JavaScript instead of TypeScript, create the application using `npm create vite@latest my-chart-app -- --template react`.
+
+### Step 3: Install the Syncfusion® React Chart package
-All the available Essential® JS 2 packages are published in the [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry.
+All Syncfusion Essential® JS 2 packages are available in the [npmjs.com](https://www.npmjs.com/~syncfusionorg) registry.
-To install the Syncfusion® Accumulation Chart package, use the following command
+Install the React Chart package using the following command:
```bash
npm install @syncfusion/ej2-react-charts --save
```
-> The –save will instruct NPM to include the Accumulation Chart package inside of the **dependencies** section of the package.json.
+> Installing `@syncfusion/ej2-react-charts` automatically installs the required dependency packages. The –save will instruct NPM to include the Chart package inside of the **dependencies** section of the package.json.
-## Add Accumulation Chart to the project
+The steps up to this point can be completed using the initially opened terminal or command prompt. For adding Chart components, open the project in the IDE installed on your device.
+
+### Step 4: Add Accumulation Chart to the project
Add the Accumulation Chart component to `src/App.tsx` using the following code.
{% tabs %}
-{% highlight js tabtitle="App.jsx" %}
-
-import {AccumulationChartComponent} from '@syncfusion/ej2-react-charts';
-import * as React from 'react';
-function App() {
+{% highlight ts tabtitle="~/src/App.tsx" %}
+import { AccumulationChartComponent } from '@syncfusion/ej2-react-charts';
+function App() {
return ();
}
-export default App;
-
+export default App;
{% endhighlight %}
-{% highlight ts tabtitle="App.tsx" %}
+{% endtabs %}
-import { AccumulationChartComponent } from '@syncfusion/ej2-react-charts';
-import * as React from 'react';
+> **Note:** This will render an empty accumulation chart area by running `npm run dev` in terminal ([Refer Step 7](#step-7-run-the-application)). Proceed to the next steps to add data, series, and necessary module injections to visualize your data.
+
+### Step 5: Module injection
+
+Accumulation Chart features are delivered as separate modules and must be explicitly injected. Here, the PieSeries module is used to render basic pie chart.
+
+* `PieSeries` - Inject this module in to `services` to use pie series.
+
+Import the above-mentioned module from the chart package and inject that into the `services` section of the Accumulation Chart component as follows.
+
+{% tabs %}
+{% highlight ts tabtitle="~/src/App.tsx" %}
+import { AccumulationChartComponent, PieSeries, Inject } from '@syncfusion/ej2-react-charts';
function App() {
- return ();
+ return (
+
+
+
+ );
}
export default App;
-
{% endhighlight %}
{% endtabs %}
-Now run the `npm run dev` command in the console to start the development server. This command compiles your code and serves the application locally, opening it in the browser.
-
-```
-npm run dev
-```
+**Note:** At this stage, No pie series is rendered because the Accumulation Chart component has not yet been configured with a data source.
-## Pie series
+### Step 6: Populate Accumulation Chart with data
-By default, a pie series is rendered when JSON data is assigned to the series [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationSeriesModel#datasource) property. Map JSON fields to the series [`xName`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationSeriesModel#xname) and [`yName`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationSeriesModel#yname) properties to bind data correctly.
+The pie chart data should be provided as a JSON array in the following format. You can define the data in the same `src/App.tsx` file or place it in a separate file (for example, `src/datasource.ts`) and import it into `App.tsx`.
{% tabs %}
-{% highlight js tabtitle="App.jsx" %}
-{% include code-snippet/chart/code-path/series/pie-cs4/app/index.jsx %}
+{% highlight ts tabtitle="~/src/datasource.ts" %}
+const data = [
+ { x: 'Jan', y: 3, text: 'Jan: 3' }, { x: 'Feb', y: 3.5, text: 'Feb: 3.5' },
+ { x: 'Mar', y: 7, text: 'Mar: 7' }, { x: 'Apr', y: 13.5, text: 'Apr: 13.5' },
+ { x: 'May', y: 19, text: 'May: 19' }, { x: 'Jun', y: 23.5, text: 'Jun: 23.5' },
+ { x: 'Jul', y: 26, text: 'Jul: 26' }, { x: 'Aug', y: 25, text: 'Aug: 25' },
+ { x: 'Sep', y: 21, text: 'Sep: 21' }, { x: 'Oct', y: 15, text: 'Oct: 15' }
+ ];
{% endhighlight %}
-{% highlight ts tabtitle="App.tsx" %}
-{% include code-snippet/chart/code-path/series/pie-cs4/app/index.tsx %}
+{% endtabs %}
+
+After defining the required data set, bind the data to the Chart component in the `AccumulationSeriesDirective` tag. The following code snippet demonstrates the complete configuration required to render a basic pie chart.
+
+{% tabs %}
+{% highlight ts tabtitle="~/src/App.tsx" %}
+import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, PieSeries } from '@syncfusion/ej2-react-charts';
+
+function App() {
+ const data = [
+ { x: 'Jan', y: 3, text: 'Jan: 3' }, { x: 'Feb', y: 3.5, text: 'Feb: 3.5' },
+ { x: 'Mar', y: 7, text: 'Mar: 7' }, { x: 'Apr', y: 13.5, text: 'Apr: 13.5' },
+ { x: 'May', y: 19, text: 'May: 19' }, { x: 'Jun', y: 23.5, text: 'Jun: 23.5' },
+ { x: 'Jul', y: 26, text: 'Jul: 26' }, { x: 'Aug', y: 25, text: 'Aug: 25' },
+ { x: 'Sep', y: 21, text: 'Sep: 21' }, { x: 'Oct', y: 15, text: 'Oct: 15' }
+ ];
+
+ return
+
+
+
+
+ ;
+}
+export default App;
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/chart/preview-sample/series/pie-cs4" %}
+### Step 7: Run the application
+
+Run the application using the following command:
+
+```bash
+npm run dev
+```
+Open the generated local URL (for example, `localhost:5173/`) from terminal in the browser. The application displays the basic pie chart as shown below:
+
+
\ No newline at end of file
diff --git a/ej2-react/accumulation-chart/images/pie-chart.png b/ej2-react/accumulation-chart/images/pie-chart.png
new file mode 100644
index 0000000000..c650e34d60
Binary files /dev/null and b/ej2-react/accumulation-chart/images/pie-chart.png differ
diff --git a/ej2-react/accumulation-chart/pie-dough-nut.md b/ej2-react/accumulation-chart/pie-dough-nut.md
index 9cf05f128b..48948abda8 100644
--- a/ej2-react/accumulation-chart/pie-dough-nut.md
+++ b/ej2-react/accumulation-chart/pie-dough-nut.md
@@ -86,6 +86,21 @@ To achieve a doughnut in pie series, customize the [`innerRadius`](https://ej2.s
{% previewsample "page.domainurl/code-snippet/chart/preview-sample/series/doughnut-cs1" %}
+## Multiple Donut
+
+You can create multiple donuts within a single chart by adding multiple series with different [`innerRadius`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationSeries#innerradius) and [`radius`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationSeries#radius) values. This allows you to compare multiple data sets with the same categories. Each series can have different data, colors, and customizations. You can also use the [`mappingKey`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationLegendSettings#mappingkey) property in `legendSettings` to map the legend items based on the specified field from the data source. When set, points with matching `mappingKey` values are grouped into a single legend item.
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/chart/code-path/series/multiple-doughnut-cs1/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/chart/code-path/series/multiple-doughnut-cs1/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/preview-sample/series/multiple-doughnut-cs1" %}
+
## Start and end angles
You can customize the start and end angle of the pie series using the [`startAngle`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationSeries#startangle) and [`endAngle`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationSeries#endangle) properties. The default value of `startAngle` is 0 degree, and `endAngle` is 360 degrees. By customizing this, you can achieve a semi pie series.
diff --git a/ej2-react/accumulation-chart/tool-tip.md b/ej2-react/accumulation-chart/tool-tip.md
index d036b4e670..f0c1ec9500 100644
--- a/ej2-react/accumulation-chart/tool-tip.md
+++ b/ej2-react/accumulation-chart/tool-tip.md
@@ -55,6 +55,62 @@ By default, tooltip shows information of x and y value in points. In addition to
{% previewsample "page.domainurl/code-snippet/chart/preview-sample/series/legend-cs15" %}
+## Inline tooltip formatting
+
+The tooltip content can be formatted directly within the [`format`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/tooltipsettings#format) property by adding DateTime or number format specifiers to supported tooltip tokens. This allows you to control how point and series values are displayed without using additional events.
+
+A format specifier can be applied to a tooltip token by adding a colon (`:`) followed by the required format.
+
+For example:
+
+```typescript
+const tooltip = {
+ enable: true,
+ format: '${series.name} ${point.x} : ${point.y:n2} Percentage: ${point.percentage:p1} Opacity: ${series.opacity}'
+};
+```
+
+In the above example, `point.y` is displayed with two decimal places, `point.percentage` is displayed in percentage format, and `series.opacity` displays the opacity value applied to the series.
+
+Inline formatting can be applied to the following tooltip tokens:
+
+- `point.x` – Specifies the x-value or category value of the accumulation chart point.
+- `point.y` – Specifies the numeric y-value of the accumulation chart point.
+- `point.percentage` – Specifies the percentage contribution of the point value in the accumulation chart.
+- `point.text` – Specifies the text value mapped to the point, when text mapping is configured.
+- `point.tooltip` – Specifies the tooltip value mapped from the data source, when tooltip mapping is configured.
+- `point.index` – Specifies the index position of the point in the accumulation chart.
+- `point.color` – Specifies the fill color applied to the point.
+- `point.visible` – Specifies the visibility state of the point.
+- `series.name` – Specifies the name assigned to the accumulation chart series.
+- `series.type` – Specifies the rendering type of the accumulation chart series, such as `Pie`, `Doughnut`, `Pyramid`, or `Funnel`.
+- `series.opacity` – Specifies the opacity value applied to the accumulation chart series. This value controls the visual transparency of the series and can be customized in the series configuration.
+
+**Important:** The availability of point-specific tokens depends on the values configured in the data source and the accumulation chart series type. For example, `point.percentage` is useful for pie and doughnut charts, while `point.text` and `point.tooltip` depend on the corresponding field mappings. The `series.name` and `series.type` tokens return string values, so DateTime or number formatting is not applied to these tokens.
+
+The following format types are supported:
+
+- DateTime formats such as `MMM yyyy`, `MM:yy`, and `dd MMM`
+- Number formats such as:
+ - `n2` – number with two decimal places
+ - `n0` – number without decimals
+ - `c2` – currency format
+ - `p1` – percentage format
+ - `e1` – exponential notation
+
+If the specified format does not match the resolved value type, the original value is displayed.
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/chart/code-path/user-interaction/tooltip-format/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/chart/code-path/user-interaction/tooltip-format/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/preview-sample/user-interaction/tooltip-format" %}
+
## Tooltip mapping name
By default, tooltip shows information of x and y value in points. You can show more information from datasource in tooltip by using the [`tooltipMappingName`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accumulationSeriesModel#tooltipmappingname) property of the tooltip. You can use the `${point.tooltip}` as place holders to display the specified tooltip content.
diff --git a/ej2-react/agentic-ui-builder.md b/ej2-react/agentic-ui-builder.md
new file mode 100644
index 0000000000..e18efc8714
--- /dev/null
+++ b/ej2-react/agentic-ui-builder.md
@@ -0,0 +1,198 @@
+---
+layout: post
+title: Syncfusion® React UI Builder Skill for AI Assistants | Syncfusion®
+description: Install Syncfusion® React UI Builder to generate production-ready React components from natural-language prompts.
+control: Skills
+platform: ej2-react
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Syncfusion® React UI Builder Skill for AI Assistants
+
+**Syncfusion® React UI Builder** is an AI-powered agent skill that accelerates React application development by transforming natural-language UI requirements into production-ready code using Syncfusion® React UI components.
+
+Integrated with your AI-powered IDE, it leverages deep knowledge of **Syncfusion® components** to deliver accurate and ready-to-use code.
+By combining intelligent code generation with best practices, accessibility standards, and design-system consistency, React UI Builder helps you rapidly build scalable dashboards and user interfaces without leaving your development workflow.
+
+## Prerequisites
+
+Before installing React UI Builder, ensure the following:
+
+- Install [APM (Agent Package Manager)](https://microsoft.github.io/apm/getting-started/installation/#quick-install-recommended)
+- Required [Node.js](https://nodejs.org/en) version ≥ 18
+- React application (existing or new); see [Quick Start](https://ej2.syncfusion.com/react/documentation/getting-started/quick-start)
+- A supported AI agent or IDE that integrates with the Skills (VS Code, Cursor, Syncfusion® Code Studio, etc.)
+- Active Syncfusion® license(any of the following):
+ - [Commercial](https://www.syncfusion.com/sales/unlimitedlicense)
+ - [Community License](https://www.syncfusion.com/products/communitylicense)
+ - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials)
+
+## Key Benefits
+
+**AI-Driven UI Generation**
+- Transforms prompts into fully developed React components rather than just partial code snippets.
+- Automatically selects appropriate Syncfusion® components and features
+- Produces structured, maintainable code
+
+**Component Usage & API Accuracy**
+- Uses correct Syncfusion® component APIs
+- Injects required feature modules (paging, sorting, filtering, etc.)
+- Avoids unsupported or deprecated patterns
+
+**Patterns & Best Practices**
+- Recommended component composition and state management
+- Event handling aligned with React standards
+- Secure and scalable coding patterns
+
+**Accessibility & Responsiveness**
+- WCAG 2.1 AA–aligned output
+- Semantic HTML with ARIA support
+- Mobile-first responsive layouts
+
+**Design-System Integration**
+- Supports Tailwind, Bootstrap, Material, or custom themes
+- Ensures consistent Syncfusion® styling and theme usage
+
+## Installation
+
+Before installing React UI Builder, ensure that APM (Agent Package Manager) is installed and available in your environment.
+
+**Verify APM Installation**
+
+Run the following command to confirm APM is installed:
+
+```bash
+apm --version
+```
+
+**Install the Syncfusion® React UI Builder package using APM**
+
+Use the APM CLI to install the React UI Builder skill for your preferred environment:
+
+{% tabs %}
+{% highlight bash tabtitle="Copilot" %}
+
+apm install syncfusion/react-ui-builder -t copilot
+
+{% endhighlight %}
+{% highlight bash tabtitle="Cursor" %}
+
+apm install syncfusion/react-ui-builder -t cursor
+
+{% endhighlight %}
+{% highlight bash tabtitle="Codex" %}
+
+apm install syncfusion/react-ui-builder -t codex
+
+{% endhighlight %}
+{% highlight bash tabtitle="Claude" %}
+
+apm install syncfusion/react-ui-builder -t claude
+
+{% endhighlight %}
+{% endtabs %}
+
+After installation, the following artifacts are added to your project for the GitHub Copilot target:
+
+- `.agent/skills/` – contains the skill files
+- `.github/agents/` – contains the agent configuration
+
+Refer to the [documentation](https://microsoft.github.io/apm/reference/cli/targets/#detection-signals) for details about supported deployment targets.
+
+> For Syncfusion® Code Studio, use the Copilot command above to install the React UI Builder.
+
+## How the Syncfusion® React UI Builder Skill Works
+
+1. **Intent Analysis:** Parse the user's prompt to identify component types and high-level layout intent.
+2. **Project Detection:** Automatically detects project framework, package manager, and existing themes.
+3. **Component Mapping:** Map intent to Syncfusion® components and required icons.
+4. **Theming & Design System**
+ Load required theming guidelines and confirm key design choices:
+ - CSS framework (Tailwind, Bootstrap, Material, or Greenfield(custom theme)). If no themes detected in the existing project, Greenfield and Syncfusion Tailwind3 theme are shown as the default option, which can be used as is or changed based on preference.
+ - Syncfusion theme (Tailwind3, Bootstrap5, Material3, fluent2)
+ - Light and Dark Mode
+ - Core design basics (colors, spacing, typography, responsiveness, accessibility)
+5. **Code Generation:** Produce TypeScript React components, props interfaces, and CSS/styling scaffolding.
+6. **Dependency Management:** Recommend or install required Syncfusion® packages and peer dependencies.
+7. **Validation:** Run accessibility and basic security checks, request confirmation for changes.
+8. **Code Insertion:** Create files or patch existing files following project structure and conventions.
+
+Key enforcement points:
+
+- Adds correct theme and CSS imports for chosen Syncfusion® themes
+- Injects only the feature modules required by generated components
+- Generates semantic HTML with ARIA attributes and keyboard support
+- Avoids unsupported or deprecated API usages for Syncfusion® components
+
+> The assistant handles most stages automatically and may request confirmation where required.
+
+## Using the AI Assistant
+
+After installing React UI Builder with APM, the relevant agent and skill files are added to your project under:
+
+- `.agent/skills/` (skill files)
+- `.github/agents/` (React UI builder agent configuration, based on the selected target)
+
+To start using the skill:
+
+1.Open your supported IDE.
+2.In the chat panel, select the `syncfusion-react-ui-builder` agent from the **Agent dropdown**.
+
+
+
+3.Start prompting the agent with a clear description of your UI requirements.
+
+> For Syncfusion® Code Studio, If the ui builder agent is not shown, ensure that the agent location is configured to use it in the chat, and refer to the [documentation](https://help.syncfusion.com/code-studio/reference/configure-properties/usersettings#agent-file-locations) for configure the agent location properly.
+
+**Examples Prompts:**
+
+{% promptcards %}
+{% promptcard Authentication %}
+Create a login page with the Tailwind 3 theme using a centered card layout containing email and password input fields with validation. Include a "Remember Me" checkbox, a forgot password link, and a primary login button. Add a secondary "Create Account" button below. Ensure the layout is responsive and works on mobile, tablet, and desktop.
+{% endpromptcard %}
+{% promptcard Admin Dashboard %}
+Design a full-viewport premium admin dashboard that feels fluid, spacious, and visually rich—avoid boxed or narrow layouts. Use a soft neutral background (#F8FAFC) with layered white surfaces, subtle shadows, soft borders, and light gradients to create depth. Include a floating glass-style header (logo, search, notifications, avatar dropdown) and a stylish collapsible sidebar with tinted background, smooth animations, and highlighted active states. Structure the main area with an asymmetrical, responsive grid layout using generous spacing (24–32px), featuring larger, visually dominant cards (with icons, gradients, trend indicators, and hover lift), charts (line/bar/pie in cards), and an enhanced data grid (sticky header, sorting, filtering, badges, hover states, pagination). Apply a modern design system (Inter font, 4/8px spacing, muted grays, indigo/blue accents, semantic colors) with smooth 150–250ms transitions, micro-interactions, tooltips, and high accessibility (WCAG AA, ≥44px targets).
+{% endpromptcard %}
+{% endpromptcards %}
+
+
+Generated code follows best practices with accessible, semantic HTML, responsive mobile-first layouts, strong TypeScript typing, and built-in security measures such as input validation and avoidance of embedded secrets.
+
+## Best Practices
+
+Follow these guidelines to get the most out of UI Builder and ensure high-quality production-ready result:
+
+- **Stay consistent:** Maintain consistent file organization, naming conventions, and coding standards throughout your project.
+- **Use advanced AI models:** For best results, use **Claude Sonnet 4.6 or higher** capability models to produce better code quality and more accurate implementations.
+- **Review all content and assets before production:** Replace any placeholder images or icons (e.g., from Unsplash or emoji sets) with your brand assets. Also validate the logic, security, and compatibility with your existing code before deployment.
+
+## Troubleshooting
+
+- **APM installation failure**: Refer to this [documentation](https://microsoft.github.io/apm/getting-started/installation/#troubleshooting)
+
+- **Skills not loading**: Ensure the **.agent/** and **.github/agents/** folders exist in your project and that the skill was installed successfully using APM. Verify that the correct agent is selected from the Agent dropdown in your IDE.
+
+- **Component not rendering**: Retry generation using the specific component skill to resolve the issue, and ensure required Syncfusion® packages and themes are properly configured.
+
+- **Syncfusion license banner appears**: Use the licensing skill to correctly register and validate your Syncfusion® license key in the application.
+
+
+## FAQ
+
+**Which agents/IDEs are supported?**
+Any Skills-compatible agent that reads local skill files (Code Studio, VS Code, Cursor, etc.).
+
+**Are skills loaded automatically?**
+Yes. Supported agents automatically load relevant skills based on your query.
+
+**Can I customize the generated styles?**
+Yes. The skill supports choosing Tailwind, Bootstrap, Material, or a custom theme; generated components include clear integration points for style adjustments.
+
+**Does it modify files automatically?**
+The skill proposes changes and requires confirmation for insertion; automatic dependency installation may be offered depending on agent permissions.
+
+## See also
+
+- [Agent Skills Standards](https://agentskills.io/home)
+- [Agent Package Manager](https://microsoft.github.io/apm/getting-started/quick-start/)
diff --git a/ej2-react/ai-assistview/chain-of-thoughts.md b/ej2-react/ai-assistview/chain-of-thoughts.md
new file mode 100644
index 0000000000..ef7289fa5a
--- /dev/null
+++ b/ej2-react/ai-assistview/chain-of-thoughts.md
@@ -0,0 +1,179 @@
+---
+layout: post
+title: Chain of Thoughts in React AI AssistView component | Syncfusion
+description: Checkout and learn about Chain of Thoughts with React AI AssistView component of Syncfusion Essential JS 2 and more.
+platform: ej2-react
+control: AI AssistView
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Chain of Thoughts in React AI AssistView component
+
+The AI AssistView supports rendering **Chain of Thoughts** (also called `Thinking`) blocks, allowing you to visualize the model's reasoning process step by step before the final response is generated. The injectable module is ideal for extended reasoning models (such as Claude 3.5, GPT‑o1, and similar), which expose intermediate reasoning stages.
+
+> The `AssistThinking` module should be injected into the AI Assistview using the `AIAssistView.Inject` method to utilize this support.
+
+## Types of response blocks
+
+A single response may contain `Thinking`, `Text`, and `tool` blocks in the `blocks` array. The component renders them in the order they appear. Below are the available types of the response blocks.
+
+| Property | Description |
+|---|---|
+| `TextBlock` | Unique identifier for the block, used for collapsing/expanding state. |
+| `ToolBlock` | Identifies this block as a thinking block. Required. |
+| `ThinkingBlock` | Heading text shown in the collapsible header. |
+
+## Configure the thinking block
+
+You can use the `Thinking` block type in the blocks array of the `addPromptResponse` method to dynamically push blocks including thinking blocks into the component at runtime. Pass an object containing a blocks array, and set the second argument `isFinalUpdate` to false during streaming and true for the final update.
+
+> When only `blocks` are provided (no `response` text), the component will render the blocks directly and skip the default text-response rendering path. When both `blocks` and `response` are provided, the blocks are rendered first followed by the response text.
+
+| Property | Type | Default | Description |
+|---|---|---|---|
+| `id` | `string` | auto-generated | Unique identifier for the block, used for collapsing/expanding state. |
+| `blockType` | `'thinking'` | — | Identifies this block as a thinking block. Required. |
+| `title` | `string` | `'Thinking...'` | Heading text shown in the collapsible header. |
+| `content` | `string` | — | Markdown text rendered as a description beneath the stages. |
+| `isActive` | `boolean` | `false` | When `true`, a Syncfusion spinner is shown inside the thinking header to indicate the reasoning is still in progress. |
+| `collapsed` | `boolean` | `true` | Initial collapsed state of the thinking block. |
+| `collapsible` | `boolean` | `true` | Whether the block can be expanded or collapsed by the user. |
+| `stages` | `ThinkingStage[]` | — | Array of reasoning stages rendered using the Timeline component. |
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/ai-assistview/chain-of-thoughts/basic/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/ai-assistview/chain-of-thoughts/basic/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/ai-assistview/chain-of-thoughts/basic" %}
+
+### Adding stages
+
+Each entry in the `stages` array represents a single reasoning step. Below are the list of available stages property.
+
+| Property | Type | Description |
+|---|---|---|
+| `id` | `string` | Unique identifier for the stage. |
+| `content` | `string` | Markdown content for this stage. Supports `{index}` placeholders for inline context items. |
+| `status` | `'completed'` \| `'inprogress'` \| `'failed'` | Controls the icon/spinner shown on the timeline dot. |
+| `iconCss` | `string` | Custom CSS class for the timeline dot icon, overrides the default status icon. |
+| `editableContext` | `ThinkingContextItem[]` | Inline context items injected into the stage content via `{index}` placeholders. |
+
+#### Adding stage status
+
+Each thinking stage will carry a `status` value that controls the visual indicator on its timeline dot:
+
+- **`completed`** — renders a check icon (`e-check`).
+- **`inprogress`** — renders an animated spinner.
+- **`failed`** — renders an error/cross icon (`e-error-treeview`).
+
+Use this to reflect real-time reasoning progress when streaming multi-step responses.
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/ai-assistview/chain-of-thoughts/stages-status/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/ai-assistview/chain-of-thoughts/stages-status/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/ai-assistview/chain-of-thoughts/stages-status" %}
+
+#### Adding context items
+
+You can use the inline context items which are optionally clickable badges, that appear inline within the stage content. They are defined in the `editableContext` array of a `ThinkingStage` and are injected into the `content` string using `{index}` placeholders, which is the zero-based position in the `editableContext` array.
+
+Each context item is described by the below available `ThinkingContextItem` properties:
+
+| Property | Type | Description |
+|---|---|---|
+| `name` | `string` | Display label of the context badge. |
+| `type` | `'file'` \| `'variable'` \| `'search'` \| `'tool'` \| `'result'` \| `'context'` | Determines the badge icon and CSS class. |
+| `tooltipText` | `string` | Tooltip shown on hover. |
+| `clickable` | `boolean` | When `true`, clicking the badge fires the `editableContextClicked` event. |
+| `badge` | `ThinkingContextBadge` | Status badge appended to the item: `'success'`, `'warning'`, `'failed'`, `'pending'`, `'info'`, or `'none'`. |
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/ai-assistview/chain-of-thoughts/editable-context/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/ai-assistview/chain-of-thoughts/editable-context/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/ai-assistview/chain-of-thoughts/editable-context" %}
+
+### Configure editableContextClicked
+
+The `editableContextClicked` event fires when a user clicks on an inline context item whose `clickable` property is `true`. Use this event to open a file preview, navigate to a source, or perform any custom action.
+
+| Event argument | Type | Description |
+|---|---|---|
+| `event` | `Event` | The underlying browser click event. |
+| `contextItem` | `ThinkingContextItem` | The context item that was clicked, including all its configured properties. |
+
+```ts
+const onEditableContextClicked = (args: EditableContextClickedEventArgs) => {
+ if (args.contextItem.type === 'file') {
+ openFilePreview(args.contextItem.name);
+ }
+};
+```
+
+## Configure thinking block template
+
+You can use the `blockTemplate` property to customize the thinking block rendering. The template receives a context object with the following properties:
+
+| Context property | Type | Description |
+|---|---|---|
+| `block` | `ThinkingBlock` | The full thinking block model. |
+| `blockIndex` | `number` | Zero-based index of this block in the `blocks` array. |
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/ai-assistview/chain-of-thoughts/block-template/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/ai-assistview/chain-of-thoughts/block-template/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/ai-assistview/chain-of-thoughts/block-template" %}
+
+> When `blockTemplate` is set, the default collapsible header, spinner, and Timeline rendering are completely replaced by your template. Collapse/expand behavior and spinner life cycle management must be handled within the template itself.
+
+## Configure item template
+
+You can use the `itemTemplate` property to add individual thinking stages inside the Timeline. This property applies to every stage item within all thinking blocks.
+
+The template context for each stage item exposes:
+
+| Property | Description |
+|---|---|
+| `item` | Contains `content`, `cssClass`, `disabled`, `dotCss`, and `oppositeContent` properties of the timeline stage item. |
+| `itemIndex` | Current item index in the timeline. |
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/ai-assistview/chain-of-thoughts/item-template/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/ai-assistview/chain-of-thoughts/item-template/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/ai-assistview/chain-of-thoughts/item-template" %}
+
+## See also
+
+- [Prompt and response collection](https://ej2.syncfusion.com/react/documentation/ai-assistview/assist-view#prompt-response-collection)
+- [Tool blocks](https://ej2.syncfusion.com/react/documentation/ai-assistview#tool-blocks)
+- [Streaming responses](https://ej2.syncfusion.com/react/documentation/ai-assistview/methods#streaming-response)
+- [addPromptResponse method](https://ej2.syncfusion.com/react/documentation/ai-assistview/methods#addpromptresponse)
diff --git a/ej2-react/ai-assistview/generative-ui.md b/ej2-react/ai-assistview/generative-ui.md
new file mode 100644
index 0000000000..a100bd7b97
--- /dev/null
+++ b/ej2-react/ai-assistview/generative-ui.md
@@ -0,0 +1,144 @@
+---
+layout: post
+title: Generative UI in React AI AssistView control | Syncfusion
+description: Checkout and learn about generative UI with React AI AssistView control of Syncfusion Essential JS 2 and more.
+platform: ej2-react
+control: AI AssistView
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Generative UI in React AI AssistView component
+
+The `Generative UI` in AI AssistView allows you to render dynamic tools and UI elements within the AI AssistView. This enables seamless integration of interactive components based on AI-generated responses.
+
+## Register tools
+
+You can register custom tools using the [registerToolUI](../api/ai-assistview#registertoolui) method. It accepts tool name as string values, template and optional handler function. Tools are invoked by their name within block responses added through `addPromptResponse` method.
+
+> **Note:** Use the blockType as `tool` and provide the tool name with the required properties through `props`. Tool should be registered before adding in responses and tool name should be unique.
+
+### Configure tool template and handler
+
+When registering a tool, you can configure how it appears by specifying a template and implement its behavior through a handler function. The template controls the UI layout, while the handler is provided with the container element and any additional actions needed to enable interactive functionality.
+
+## Add tools in prompt responses
+
+Use the [addPromptResponse](../api/ai-assistview#addpromptresponse) method to dynamically add tools to AI responses by passing the tool blocks in the response.
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/ai-assistview/register-tool/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/ai-assistview/register-tool/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/ai-assistview/generative-ui/register-tool" %}
+
+## Configure AI for generative UI responses
+
+You can configure the AI service to return structured JSON blocks through `system prompt`. This ensures that AI-generated content is properly formatted and rendered as interactive tools or text blocks.
+
+The following example demonstrates how to connect your AI service to generate and display dynamic UI components within the AI AssistView.
+
+```tsx
+import React, { useRef } from 'react';
+import { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat';
+
+export default function App() {
+ const aiAssistViewRef = useRef(null);
+
+ const systemPrompt = `
+ You are an AI assistant that generates Syncfusion AIAssistView blocks.
+
+ Return ONLY valid JSON.
+
+ Output format:
+ {
+ "blocks": [
+ {
+ "blockType": "text",
+ "content": "Description"
+ },
+ {
+ "blockType": "tool",
+ "toolName": "toolname",
+ "props": { ... }
+ }
+ ]
+ }
+ Rules:
+ 1. Always return a single "blocks" array.
+ 2. Return ONLY valid JSON.
+ 3. You may return ANY number of blocks.
+ 4. Whenever weather-related queries are requested, invoke the weather-tool block with blockType "tool" and toolName "weather-tool".
+`;
+
+ const weatherTemplate = (args) => {
+ return (
+
+
+
+
{args.location}
+
{args.temperature}
+
+
+
+ );
+ };
+
+ const onPromptRequest = async (args) => {
+ const apiKey = ''; // Your API key here
+ const url = ''; // Your AI response URL here
+ try {
+ const response = await fetch(url, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Authorization': 'Bearer ' + apiKey
+ },
+ body: JSON.stringify({
+ model: 'gpt-5',
+ messages: {
+ messages: [
+ { role: 'system', content: systemPrompt },
+ { role: 'user', content: args.prompt }
+ ]
+ },
+ max_output_tokens: 1000
+ })
+ });
+
+ const message = reply.output.find((item) => item.type === 'message');
+ const jsonText = (message && message.content && message.content[0] && message.content[0].text) || '{}';
+ const aiData = JSON.parse(jsonText);
+
+ if (aiAssistViewRef.current) {
+ aiAssistViewRef.current.addPromptResponse({ blocks: aiData.blocks });
+ }
+
+ } catch (error) {
+ if (aiAssistViewRef.current) {
+ aiAssistViewRef.current.addPromptResponse("We could not reach the AI service; please try again later.");
+ }
+ }
+ };
+
+ return (
+ {
+ if (aiAssistViewRef.current) {
+ aiAssistViewRef.current.registerToolUI({
+ toolName: 'weather-tool',
+ template: weatherTemplate
+ });
+ }
+ }}
+ />
+ );
+}
+```
diff --git a/ej2-react/ai-assistview/getting-started.md b/ej2-react/ai-assistview/getting-started.md
index 5367875aba..09c39593dd 100644
--- a/ej2-react/ai-assistview/getting-started.md
+++ b/ej2-react/ai-assistview/getting-started.md
@@ -15,53 +15,27 @@ This section explains how to create a simple **AI AssistView** component and con
To get started quickly with the React AI AssistView component, you can check out this video tutorial:
{% youtube "https://www.youtube.com/watch?v=rwXanLEHdFU" %}
-## Dependencies
+## Create a React Application
-The following list of dependencies is required to use the React `AI AssistView` component in your application. The component is distributed as part of the `@syncfusion/ej2-react-interactive-chat` package.
-
-```javascript
-|-- @syncfusion/ej2-react-interactive-chat
- |-- @syncfusion/ej2-react-base
- |-- @syncfusion/ej2-base
- |-- @syncfusion/ej2-navigations
- |-- @syncfusion/ej2-inputs
- |-- @syncfusion/ej2-buttons
-```
-
-## Setup for Local Development
-
-The recommended way to create a new React application is by using [create-react-app](https://github.com/facebook/create-react-app).This tool sets up a development environment with everything you need to build, test, and optimize your application for production. Refer to the [installation instructions](https://github.com/facebook/create-react-app#creating-an-app) of `create-react-app`.
+Run the following commands to set up a React application:
```bash
-npx create-react-app my-app
-cd my-app
-npm start
+npm create vite@latest my-app -- --template react-ts
```
-or
+This command will prompt you to install the required packages and start the application. Select the options as shown below.
-```bash
-yarn create react-app my-app
-cd my-app
-yarn start
-```
+
-To create a React application with `TypeScript` environment, run the following command.
+As Syncfusion packages are not installed yet, currently, the `No` option will be selected. Then, navigate to the project directory and install the dependencies using the following commands:
-```bash
-npx create-react-app my-app --template typescript
-cd my-app
-npm start
```
-
-Besides using the [npx](https://docs.npmjs.com/cli/v9/commands/npx?v=true) package runner tool, also create an application from the `npm init`. To begin with the `npm init`, upgrade the `npm` version to `npm 6+`.
-
-```bash
-npm init react-app my-app
cd my-app
-npm start
+npm install
```
+> **Note:** To set up a React application with Nextjs or Remix, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/quick-start) for more details.
+
## Adding Syncfusion® Packages
All Syncfusion Essential® JS 2 packages are available on the [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry. You can choose the component that you want to install.
@@ -72,12 +46,24 @@ To install the AI AssistView component package, run the following command:
npm install @syncfusion/ej2-react-interactive-chat --save
```
+## Adding CSS References
+
+To apply styling to the AI AssistView component, import the required CSS theme files into your `src/App.css` file. The following example uses the Tailwind3 theme, but other themes like Bootstrap 5, Tailwind CSS, or Fluent are also available.
+
+To install the [tailwind3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command:
+
+```bash
+npm install @syncfusion/ej2-tailwind3-theme --save
+```
+
+```css
+@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/ai-assistview/index.css";
+```
+
## Adding the AI AssistView Component
Now, you can start adding AI AssistView component in the application. For getting started, add the AI AssistView component by using `` tag directive in `src/App.tsx` file using following code. Now place the below AI AssistView code in the `src/App.tsx`.
-`[Functional-component]`
-
```ts
import { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
@@ -86,30 +72,13 @@ import * as ReactDOM from "react-dom";
function App() {
return (
// specifies the tag for render the AI AssistView component
-
+
);
}
ReactDOM.render(, document.getElementById('aiAssistView'));
```
-## Adding CSS References
-
-To apply styling to the AI AssistView component, import the required CSS theme files into your `src/App.css` file. The following example uses the Tailwind3 theme, but other themes like Bootstrap 5, Tailwind CSS, or Fluent are also available.
-
-```css
-
-/* import the AI AssistView dependency styles */
-
-@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
-@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";
-@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
-@import "../node_modules/@syncfusion/ej2-notifications/styles/tailwind3.css";
-@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
-@import "../node_modules/@syncfusion/ej2-react-interactive-chat/styles/tailwind3.css";
-
-```
-
## Run the Application
With the configuration complete, run the application to see the AI AssistView component rendered in your browser.
@@ -118,15 +87,13 @@ With the configuration complete, run the application to see the AI AssistView co
npm start
```
-`[Functional-componnet]`
-
{% tabs %}
-{% highlight js tabtitle="index.jsx" %}
-{% include code-snippet/ai-assistview/getting-started/app/index.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="index.tsx" %}
+{% highlight ts tabtitle="App.tsx" %}
{% include code-snippet/ai-assistview/getting-started/app/index.tsx %}
{% endhighlight %}
+{% highlight js tabtitle="App.jsx" %}
+{% include code-snippet/ai-assistview/getting-started/app/index.jsx %}
+{% endhighlight %}
{% endtabs %}
{% previewsample "page.domainurl/code-snippet/ai-assistview/getting-started" %}
@@ -143,12 +110,12 @@ The AI AssistView component can be configured to guide user interactions and pro
The following example demonstrates how to define prompt suggestions and handle the `promptRequest` event to simulate fetching a response from a backend.
{% tabs %}
-{% highlight js tabtitle="index.jsx" %}
-{% include code-snippet/ai-assistview/defaultPrompts/app/index.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="index.tsx" %}
+{% highlight ts tabtitle="App.tsx" %}
{% include code-snippet/ai-assistview/defaultPrompts/app/index.tsx %}
{% endhighlight %}
+{% highlight js tabtitle="App.jsx" %}
+{% include code-snippet/ai-assistview/defaultPrompts/app/index.jsx %}
+{% endhighlight %}
{% endtabs %}
{% previewsample "page.domainurl/code-snippet/ai-assistview/defaultprompts" %}
\ No newline at end of file
diff --git a/ej2-react/ai-assistview/images/initial_setup.png b/ej2-react/ai-assistview/images/initial_setup.png
new file mode 100644
index 0000000000..a8542ecb88
Binary files /dev/null and b/ej2-react/ai-assistview/images/initial_setup.png differ
diff --git a/ej2-react/ai-assistview/speech/text-to-speech.md b/ej2-react/ai-assistview/speech/text-to-speech.md
index 85c5d05582..454e566811 100644
--- a/ej2-react/ai-assistview/speech/text-to-speech.md
+++ b/ej2-react/ai-assistview/speech/text-to-speech.md
@@ -8,9 +8,9 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Text-to-Speech in React AI AssistView
+# Text to Speech in AI AssistView
-The Syncfusion React AI AssistView component integrates `Text-to-Speech` (TTS) functionality using the browser's Web Speech API, specifically the [SpeechSynthesisUtterance](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance) interface. This allows AI-generated responses to be converted into spoken audio, enhancing accessibility and user interaction.
+The Syncfusion React AI AssistView component provides built-in `Text-to-Speech` (TTS) support using the browser's Web Speech API, specifically the [SpeechSynthesisUtterance](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance) interface. This allows AI-generated responses into spoken audio, enhancing accessibility and user interaction.
## Prerequisites
@@ -22,9 +22,9 @@ Before integrating `Text-to-Speech`, ensure the following:
2. The AI AssistView component is integrated with [Azure OpenAI](https://azure.microsoft.com/en-us/products/ai-foundry/models/openai/).
- [Integration of Azure OpenAI With React AI AssistView component](../ai-integrations/openai-integration.md)
-## Configure Text-to-Speech
+## Configure text to speech
-To enable Text-to-Speech functionality, modify the `src/App.jsx` or `src/App.tsx` file to incorporate the Web Speech API. A custom `Read Aloud` button is added to the response toolbar using the [responseToolbarSettings](https://ej2.syncfusion.com/react/documentation/api/ai-assistview#responsetoolbarsettings) property. When clicked, the [itemClicked](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/responseToolbarSettings#itemclicked) event extracts plain text from the generated AI response and use the browser SpeechSynthesis API to read it aloud.
+To enable the built-in Text-to-Speech functionality, add the `e-assist-audio` response toolbar item to the `items` collection of the [responseToolbarSettings](https://ej2.syncfusion.com/react/documentation/api/ai-assistview#responsetoolbarsettings) property. When clicked, it fetches the text from the generated AI response and uses the browser's SpeechSynthesis API to read it aloud.
{% tabs %}
{% highlight js tabtitle="app.jsx" %}
@@ -37,6 +37,21 @@ To enable Text-to-Speech functionality, modify the `src/App.jsx` or `src/App.tsx
{% previewsample "page.domainurl/code-snippet/ai-assistview/speech/tts" %}
+## Configuring the speech settings
+
+You can use the [textToSpeechSettings](https://ej2.syncfusion.com/react/documentation/api/ai-assistview#texttospeechsettings) property to customize the speech synthesis behavior using the following available properties such as [language](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/textToSpeechSettingsModel#language), [speechPitch](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/textToSpeechSettingsModel#speechpitch), [speechRate](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/textToSpeechSettingsModel#speechrate), [volume](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/textToSpeechSettingsModel#volume) and [voice](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/textToSpeechSettingsModel#voice).
+
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/ai-assistview/speech/tts-settings/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/ai-assistview/speech/tts-settings/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/ai-assistview/speech/tts-settings" %}
+
## See Also
* [Speech-to-Text](./speech-to-text.md)
diff --git a/ej2-react/ai-assistview/toolbar-items.md b/ej2-react/ai-assistview/toolbar-items.md
index cea1598072..5306a53994 100644
--- a/ej2-react/ai-assistview/toolbar-items.md
+++ b/ej2-react/ai-assistview/toolbar-items.md
@@ -397,6 +397,50 @@ The [itemClicked](https://ej2.syncfusion.com/react/documentation/api/ai-assistvi
{% previewsample "page.domainurl/code-snippet/ai-assistview/toolbar-items/response-itemClick" %}
+### Regenerate responses
+
+The AI AssistView allows users to `regenerate` responses to request a new response for the same prompt. The navigation buttons with `previous` and `next` buttons are rendered along with a response (e.g., `1 / 3`) allowing users to navigate between all regenerated responses for the prompt.
+
+> The navigation UI appears automatically once more than one response is available for a prompt either re-generated or preloaded using the `regeneratedResponses` property in prompts collection.
+
+#### Adding regenerate item
+
+You can enable the regenerate button by adding the `e-assist-regenerate` icon to the `items` collection of the [responseToolbarSettings](https://ej2.syncfusion.com/react/documentation/api/ai-assistview#responsetoolbarsettings) property.
+
+#### Adding regenerated response
+
+When regenerated, it triggers the [promptRequest](https://ej2.syncfusion.com/react/documentation/api/ai-assistview#promptrequest) event with the existing prompt, enabling you to call your preferred AI service again and update the response using the [addPromptResponse](https://ej2.syncfusion.com/react/documentation/api/ai-assistview#addpromptresponse) method.
+
+In the following example, AI AssistView is rendered with the built-in `regenerate` toolbar item in the response toolbar.
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/ai-assistview/toolbar-items/regenerate-response/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/ai-assistview/toolbar-items/regenerate-response/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/ai-assistview/toolbar-items/regenerate-response" %}
+
+#### Pre-loading regenerated responses
+
+You can use the [regeneratedResponses](https://ej2.syncfusion.com/react/documentation/api/ai-assistview/promptModel#regeneratedresponses) property in the `prompts` property collection to pre-load multiple responses for a prompt at the initial render, without requiring the user to trigger the regenerate action. Users can navigate between the pre-loaded responses using the `previous` and `next` buttons in the response navigation UI.
+
+In the following example, the `regeneratedResponses` property is used to pre-load multiple responses for a prompt.
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/ai-assistview/toolbar-items/regenerate-preload/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/ai-assistview/toolbar-items/regenerate-preload/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/ai-assistview/toolbar-items/regenerate-preload" %}
+
## Adding custom toolbar items
You can also add custom toolbar items in the AI AssistView by using the [toolbarSettings](https://ej2.syncfusion.com/react/documentation/api/ai-assistview#toolbarsettings), [responseToolbarSettings](https://ej2.syncfusion.com/react/documentation/api/ai-assistview#responsetoolbarsettings) & [promptToolbarSettings](https://ej2.syncfusion.com/react/documentation/api/ai-assistview#prompttoolbarsettings) properties.
diff --git a/ej2-react/ai-tools/ai-powered-development.md b/ej2-react/ai-tools/ai-powered-development.md
new file mode 100644
index 0000000000..7478f6e1f5
--- /dev/null
+++ b/ej2-react/ai-tools/ai-powered-development.md
@@ -0,0 +1,246 @@
+---
+layout: post
+title: AI-Powered Development with Syncfusion React Components | Syncfusion
+description: Master AI-powered development with Syncfusion React components using MCP Server and skills. Learn which approach fits the workflow and get better results.
+platform: ej2-react
+control: AI AssistView
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# AI-Powered Development with Syncfusion React Components
+
+Many developers use AI assistants to accelerate their Syncfusion development workflows. However, without proper context, AI generates code that appears structurally sound but fails at runtime—often due to incorrect import paths, missing `Inject` services, or deprecated API calls.
+
+The solution is straightforward: give AI access to Syncfusion documentation and it significantly improves the accuracy of generated code, reducing common runtime errors and mismatched APIs.
+
+**In this guide, you'll learn:**
+- Three ways to use AI with Syncfusion (Browser, IDE, API)
+- How to get accurate code suggestions on the first try for each approach
+- Which tools (MCP Server or Component Skills) improve your results
+
+## Package Installation
+
+Before using AI to generate Syncfusion React code, make sure the relevant packages are installed in your project. For example, to use the Grid component:
+
+```bash
+npm install @syncfusion/ej2-react-grids
+```
+
+Each Syncfusion component family has its own package (e.g., `@syncfusion/ej2-react-charts`, `@syncfusion/ej2-react-schedule`). Always include the correct package name when prompting AI so it generates accurate import statements.
+
+## Three Ways to Use AI with Syncfusion
+
+### Browser-Based AI
+
+Browser-based AI platforms (ChatGPT, Claude, Gemini) are the simplest way to get started. Their built-in web search lets them read Syncfusion documentation in real-time.
+
+**Best for:**
+- Learning Syncfusion and exploring components
+- Quick samples and prototypes
+- Evaluating approaches before implementation
+
+**How to get the best results:**
+
+1. **Include documentation links in your prompts** — Paste the specific Syncfusion docs URL for the component you need
+2. **Be specific about requirements** — Component type, features needed, framework, TypeScript or JavaScript
+3. **Reference exact documentation pages** — Direct links improve accuracy significantly
+
+**Use this prompt template:**
+
+```
+I need a [component name] with the following specifications:
+- [specific requirements]
+- [feature list]
+
+Reference: https://ej2.syncfusion.com/react/documentation/[component]/getting-started
+```
+
+**What to expect:**
+
+This approach requires no initial setup and allows the AI to search and reference documentation in real-time. It provides immediate feedback and simplifies exploration of various Syncfusion components.
+
+**Development considerations:**
+
+* Hand-off of the generated code to your project must be performed manually.
+* Conversation context is not retained across different sessions.
+
+**Example prompt for Grid:**
+
+```
+I need a Syncfusion React Grid component with the following specifications:
+- Display employee data (ID, Name, Email, Department)
+- Enable sorting functionality on all columns
+- Include a filter bar for data filtering
+- Implement pagination (10 rows per page)
+- Implementation language: TypeScript
+
+Reference: https://ej2.syncfusion.com/react/documentation/grid/getting-started
+```
+
+### IDE-Based AI
+
+IDE-integrated AI tools (GitHub Copilot, Cursor, Syncfusion Code Studio) provide real-time suggestions while you code. Most production teams use this approach because it integrates directly into their workflow.
+
+**Best for:**
+- Production development
+- Writing code directly in your project
+- Teams needing consistent patterns
+
+**Development considerations:**
+
+Standard IDE AI tools often lack real-time access to Syncfusion-specific documentation. Integrating these tools with the proper context ensures that generated code adheres to current API standards and avoids common implementation errors.
+
+**How to get the best results:**
+
+Choose one of these two options:
+
+| Option | What it does | Best for |
+|--------|--------------|----------|
+| **MCP Server** (recommended) | Gives your IDE real-time access to Syncfusion documentation | Real-time suggestions, live updates |
+| **Component Skills** | Stores Syncfusion patterns in your project for any AI to read | Teams, offline work, consistent patterns |
+
+**Option 1: Install MCP Server**
+
+The [MCP Server installation](https://ej2.syncfusion.com/react/documentation/mcp-server/installation) establishes a direct connection between your IDE-integrated AI and Syncfusion documentation, enabling the AI to retrieve real-time information for unfamiliar components. Using Retrieval-Augmented Generation (RAG), it injects relevant documentation into the AI’s context to generate accurate and up-to-date code suggestions.
+
+
+**What you get:**
+- Complete documentation for all 145+ React components
+- Live API references (properties, methods, events)
+- Current implementation patterns and best practices
+
+**Option 2: Install Component Skills**
+
+The [Syncfusion Skills installation](https://ej2.syncfusion.com/react/documentation/skills) provides reference documents stored directly in your project. These files allow the AI to read specific patterns during code generation, ensuring consistent implementation and best practices across your development team.
+
+**What they include:**
+- Best practices for each component family
+- Common configuration patterns
+- Implementation guidance for specific features
+- Data binding examples and event handling
+
+Teams benefit most from Component Skills because everyone follows the same Syncfusion patterns, it works offline without internet, and reduces code review friction on pattern-related issues.
+
+### API-Based AI
+
+If you're building tools or applications that use AI APIs (Claude API, OpenAI, Gemini) to generate Syncfusion code programmatically:
+
+**How to get the best results:**
+
+1. **Enable web search** — Use API providers that support web search as a tool
+2. **Include Syncfusion skill files** — Add skill files to your system prompt for better accuracy
+3. **Specify React components** — Always mention "React components" to avoid vanilla JS confusion
+
+**Example system prompt:**
+
+```
+You are an expert in Syncfusion React components.
+- Always use @syncfusion/ej2-react-grids packages
+- Use the directive for services like Sort, Filter, Page
+- Import from @syncfusion/ej2-react-[package]
+- If unsure about API details, search the documentation at https://ej2.syncfusion.com/react/documentation/
+```
+
+## Choosing the Right Approach
+
+| Situation | Recommended Approach |
+|---|---|
+| Learning Syncfusion, exploring components | Browser AI |
+| Quick code samples needed | Browser AI |
+| Building production features in the IDE | IDE AI + MCP Server |
+| Large team using same patterns | IDE AI + Skills |
+| Offline development | IDE AI + Skills |
+| Building AI-powered tools | API + Web Search |
+
+## Practical Examples
+
+### Browser AI Example
+
+**Without documentation context:**
+A generic request like "Create a Syncfusion React Grid" generates code that fails at runtime—wrong imports, missing Inject configuration, unsupported properties.
+
+**With documentation links:**
+When you include the specific docs URL, the AI generates correct code: proper imports, `` structure, required ``, CSS, and all necessary details.
+
+### IDE AI Example
+
+**Without MCP Server:**
+
+When you autocomplete a GridComponent, the IDE AI suggests:
+
+```javascript
+
+```
+
+That's incorrect Syncfusion syntax — it uses a wrong component name and a non-existent `columns` prop.
+
+**With MCP Server installed:**
+
+The IDE AI correctly suggests typed, accurate code.
+
+```typescript
+import { GridComponent, ColumnsDirective, ColumnDirective, Inject, Sort, Filter, Page } from '@syncfusion/ej2-react-grids';
+
+interface Employee {
+ id: number;
+ name: string;
+ email: string;
+ department: string;
+}
+
+export const EmployeeGrid = () => {
+ return (
+
+
+
+
+
+
+
+
+ );
+};
+```
+
+## API Accuracy
+
+AI models are trained on historical data and may suggest APIs from older Syncfusion versions. To ensure accurate API usage, include the component's API reference link directly in your prompt:
+
+```
+Use Syncfusion EJ2 React latest APIs only.
+Target: React 18+ with @syncfusion/ej2-react-grids latest.
+
+Find any Syncfusion component's API reference at https://ej2.syncfusion.com/react/documentation/api/
+```
+
+Using MCP Server mitigates this automatically by grounding the AI against live documentation.
+
+## Troubleshooting
+
+If you encounter unexpected results, use this as a quick diagnostic reference:
+
+| Problem | Likely Cause | Fix |
+|---|---|---|
+| Component feature doesn't work (e.g. sorting, filtering) | Missing `Inject` for required service | Add `` inside the component |
+| Wrong or missing imports | AI confused by JavaScript vs React packages | Explicitly prompt: "Use `@syncfusion/ej2-react-[package]` imports only" |
+| Deprecated API usage (e.g. old property names) | AI trained on stale documentation | Enable MCP Server for live doc grounding |
+| Wrong component name (e.g. `` instead of ``) | AI using generic component name | Include docs URL or install Component Skills |
+| CSS not applied / unstyled component | Missing stylesheet import | Add `import '@syncfusion/ej2-base/styles/tailwind3.css'` and component theme CSS |
+| `` placed outside the component | Incorrect nesting | `` must be a direct child of the component it services |
+
+
+## Quick Reference
+
+| If you want... | Do this... |
+|---|---|
+| Quick learning and exploration | Use browser AI with documentation links |
+| Production code in your IDE | Install MCP Server |
+| Team consistency | Use Component Skills |
+| Offline development | Use Component Skills |
+| Programmatic AI tools | Use API with web search enabled |
\ No newline at end of file
diff --git a/ej2-react/ai-tools/images/UI-Builder-Agent.png b/ej2-react/ai-tools/images/UI-Builder-Agent.png
new file mode 100644
index 0000000000..05816e8d5f
Binary files /dev/null and b/ej2-react/ai-tools/images/UI-Builder-Agent.png differ
diff --git a/ej2-react/mcp-server/release-notes.md b/ej2-react/ai-tools/release-notes.md
similarity index 100%
rename from ej2-react/mcp-server/release-notes.md
rename to ej2-react/ai-tools/release-notes.md
diff --git a/ej2-react/appearance/icons.md b/ej2-react/appearance/icons.md
index 943c3a4299..87df1f608e 100644
--- a/ej2-react/appearance/icons.md
+++ b/ej2-react/appearance/icons.md
@@ -8,7 +8,7 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Predefined icons library in Syncfusion® React components
+# Predefined icons library in Syncfusion® React components
Syncfusion's icon library provides an extensive collection of pre-designed, font-based icons (embedded as base64 in themes) to enhance user interfaces in React applications. These icons ensure visual consistency across Syncfusion components and are available via npm or CDN with minimal setup.
@@ -21,29 +21,56 @@ Icons can be included in a React application using the following methods:
### The npm package
-Syncfusion theme icons are distributed in the [@syncfusion/ej2-icons](https://www.npmjs.com/package/@syncfusion/ej2-icons) package on npm. The package includes CSS/SCSS files for all supported themes.
+Syncfusion theme icons are distributed in the [@syncfusion/ej2-icons](https://www.npmjs.com/package/@syncfusion/ej2-icons) package and as well as through all theme packages such as [@syncfusion/ej2-tailwind3-theme](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) available on npm. These packages include CSS/SCSS files for all supported themes.
Install the package:
-```bash
-npm install @syncfusion/ej2-icons
-```
+{% tabs %}
+{% highlight bash tabtitle="Theme Package" %}
+
+npm install @syncfusion/ej2-tailwind3-theme --save
+
+{% endhighlight %}
+{% highlight bash tabtitle="Icon Package" %}
+
+npm install @syncfusion/ej2-icons --save
+
+{% endhighlight %}
+{% endtabs %}
Then import the desired theme’s icon stylesheet in your application:
`[src/App.css]`
-```css
+{% tabs %}
+{% highlight css tabtitle="Theme Package" %}
+
+@import "../node_modules/@syncfusion/ej2--theme/styles/icons/.css";
+
+{% endhighlight %}
+{% highlight css tabtitle="Icon Package" %}
+
@import "../node_modules/@syncfusion/ej2-icons/styles/.css";
-```
-> To apply these styles, ensure you import `App.css` in your `src/App.tsx` (or equivalent entry file).
+{% endhighlight %}
+{% endtabs %}
+
+> To apply these styles, ensure you import `App.css` in your `src/App.tsx` (or equivalent entry file).`
**Example:**
-```css
+{% tabs %}
+{% highlight css tabtitle="Theme Package" %}
+
+@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/icons/tailwind3.css";
+
+{% endhighlight %}
+{% highlight css tabtitle="Component Package" %}
+
@import "../node_modules/@syncfusion/ej2-icons/styles/tailwind3.css";
-```
+
+{% endhighlight %}
+{% endtabs %}
### CDN reference
diff --git a/ej2-react/appearance/migration-styles.md b/ej2-react/appearance/migration-styles.md
new file mode 100644
index 0000000000..b7307f415d
--- /dev/null
+++ b/ej2-react/appearance/migration-styles.md
@@ -0,0 +1,56 @@
+---
+layout: post
+title: Migrating Styles to Theme Packages in React Components | Syncfusion
+description: Migrate Syncfusion React components to theme packages for centralized styling, single file reference, and automatic dependency management.
+control: Theme
+platform: ej2-react
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Migrating Styles from Component Packages to Theme Packages
+
+Enhanced Syncfusion® EJ2 theme architecture now offers a more structured and scalable approach to managing styles. This update centralizes all theme-related styles, improves `SCSS` structure and usage, and provides greater flexibility for customization.
+
+[Theme packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages) now include built-in automatic dependency management, ensuring that all required styles are included and applied consistently without the need for manual imports. Each component provides dedicated `index.css` or `index.scss` files that automatically load all necessary style dependencies. This simplifies development, reduces configuration effort, and helps maintain a consistent visual experience across components.
+
+## Key improvements
+
+- **Centralized theme management** through theme packages
+- **Optimized style file size** by loading only the required dependent component styles rather than importing all component package styles
+- **Improved SCSS usage** and structure
+- **Automatic inclusion** of dependency styles
+- **Better support** for global and component-level customization
+
+## SCSS reference migration
+
+The following table shows `SCSS` examples migrating from component package imports, the EJ2 combined package, and multiple component style references to the new theme-package imports.
+
+| Type | Previous Styles Reference | Theme Package Styles Reference |
+|------|----------------------------|--------------------------------|
+| Components packages | @use '@syncfusion/ej2-base/styles/tailwind3.scss' as *; @use '@syncfusion/ej2-buttons/styles/tailwind3.scss' as *; @use '@syncfusion/ej2-calendars/styles/tailwind3.scss' as *; @use '@syncfusion/ej2-dropdowns/styles/tailwind3.scss' as *; @use '@syncfusion/ej2-inputs/styles/tailwind3.scss' as *; @use '@syncfusion/ej2-navigations/styles/tailwind3.scss' as *; @use '@syncfusion/ej2-popups/styles/tailwind3.scss' as *; @use '@syncfusion/ej2-splitbuttons/styles/tailwind3.scss' as *; @use '@syncfusion/ej2-react-grids/styles/tailwind3.scss' as *; | @use '@syncfusion/ej2-tailwind3-theme/styles/grid/index.scss' as *; |
+| EJ2 combined package | @use "@syncfusion/ej2/tailwind3.scss" as *; | @use "@syncfusion/ej2-tailwind3-theme/styles/tailwind3.scss" as *; |
+| Multiple components | @import '@syncfusion/ej2-base/styles/tailwind3.scss'; @import '@syncfusion/ej2-icons/styles/tailwind3.scss'; @import '@syncfusion/ej2-calendars/styles/tailwind3.scss'; @import '@syncfusion/ej2-dropdowns/styles/tailwind3.scss'; @import '@syncfusion/ej2-inputs/styles/tailwind3.scss'; @import '@syncfusion/ej2-navigations/styles/tailwind3.scss'; @import '@syncfusion/ej2-popups/styles/tailwind3.scss'; @import '@syncfusion/ej2-splitbuttons/styles/tailwind3.scss'; @import "@syncfusion/ej2-lists/styles/tailwind3.scss"; @import '@syncfusion/ej2-layouts/styles/tailwind3.scss'; @import "@syncfusion/ej2-react-grids/styles/tailwind3.scss"; @import "@syncfusion/ej2-react-schedule/styles/tailwind3.scss"; @import '@syncfusion/ej2-richtexteditor/styles/tailwind3.scss'; @import "@syncfusion/ej2-react-filemanager/styles/tailwind3.scss"; | @import "@syncfusion/ej2-tailwind3-theme/styles/grid/index.scss"; @import '@syncfusion/ej2-tailwind3-theme/styles/rich-text-editor/index.scss'; @import "@syncfusion/ej2-tailwind3-theme/styles/schedule/index.scss"; @import '@syncfusion/ej2-tailwind3-theme/styles/file-manager/index.scss'; |
+
+### CSS reference migration
+
+The following table shows `CSS` examples migrating from component package imports, the EJ2 combined package, and multiple component style references to the new theme-package imports.
+
+| Type | Previous Styles Reference | Theme Package Styles Reference |
+|------|----------------------------|--------------------------------|
+| Components packages | @import '@syncfusion/ej2-base/styles/tailwind3.css'; @import '@syncfusion/ej2-buttons/styles/tailwind3.css'; @import '@syncfusion/ej2-calendars/styles/tailwind3.css'; @import '@syncfusion/ej2-dropdowns/styles/tailwind3.css'; @import '@syncfusion/ej2-inputs/styles/tailwind3.css'; @import '@syncfusion/ej2-navigations/styles/tailwind3.css'; @import '@syncfusion/ej2-popups/styles/tailwind3.css'; @import '@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; @import "@syncfusion/ej2-react-grids/styles/tailwind3.css"; | @import "@syncfusion/ej2-tailwind3-theme/styles/grid/index.css"; |
+| EJ2 combined package | @import "@syncfusion/ej2/tailwind3.css"; | @import "@syncfusion/ej2-tailwind3-theme/styles/tailwind3.css"; |
+| Multiple components | @import '@syncfusion/ej2-base/styles/tailwind3.css'; @import '@syncfusion/ej2-icons/styles/tailwind3.css'; @import '@syncfusion/ej2-calendars/styles/tailwind3.css'; @import '@syncfusion/ej2-dropdowns/styles/tailwind3.css'; @import '@syncfusion/ej2-inputs/styles/tailwind3.css'; @import '@syncfusion/ej2-navigations/styles/tailwind3.css'; @import '@syncfusion/ej2-popups/styles/tailwind3.css'; @import '@syncfusion/ej2-splitbuttons/styles/tailwind3.css'; @import "@syncfusion/ej2-lists/styles/tailwind3.css"; @import '@syncfusion/ej2-layouts/styles/tailwind3.css'; @import "@syncfusion/ej2-react-grids/styles/tailwind3.css"; @import "@syncfusion/ej2-react-schedule/styles/tailwind3.css"; @import '@syncfusion/ej2-richtexteditor/styles/tailwind3.css'; @import "@syncfusion/ej2-react-filemanager/styles/tailwind3.css"; | @import "@syncfusion/ej2-tailwind3-theme/styles/grid/index.css"; @import '@syncfusion/ej2-tailwind3-theme/styles/rich-text-editor/index.css'; @import "@syncfusion/ej2-tailwind3-theme/styles/schedule/index.css"; @import '@syncfusion/ej2-tailwind3-theme/styles/file-manager/index.css'; |
+
+## SASS styles customizations
+
+This section explains how to customize `SCSS` styles in Syncfusion® components when migrating from component package–based styling to theme packages. Theme packages provide a flexible and scalable way to override default styling, either globally or at the component level.
+
+SASS customization enables you to override built-in theme variables before importing component styles. This approach ensures consistent and maintainable styling across your application.
+
+
+| Type | Previous Styles Reference | Theme Package Styles Reference |
+|------|---------------------------|--------------------------------|
+| Global customization | @use '@syncfusion/ej2-base/styles/base/definition/tailwind3.scss' with ( $primary-bg-color: rgb(240, 20, 20) ); @use '@syncfusion/ej2-base/styles/base/tailwind3.scss' as *; @use "@syncfusion/ej2-buttons/styles/tailwind3.scss" as *; | @use '@syncfusion/ej2-tailwind3-theme/styles/base/definition/tailwind3.scss' with ( $primary-bg-color: rgb(240, 20, 20) ); @use "@syncfusion/ej2-tailwind3-theme/styles/button/index.scss" as *; |
+| Component specific customization | @use '@syncfusion/ej2-base/styles/tailwind3.scss' as *; @use '@syncfusion/ej2-buttons/styles/button/tailwind3-definition' with ( $btn-primary-bgcolor: red ); @use '@syncfusion/ej2-buttons/styles/tailwind3.scss' as *; @use '@syncfusion/ej2-calendars/styles/tailwind3.scss' as *; @use '@syncfusion/ej2-dropdowns/styles/tailwind3.scss' as *; @use '@syncfusion/ej2-inputs/styles/tailwind3.scss' as *; @use '@syncfusion/ej2-navigations/styles/pager/tailwind3-definition' as pager with ( $pager-active-bg-color: red ); @use '@syncfusion/ej2-navigations/styles/tailwind3.scss' as *; @use '@syncfusion/ej2-popups/styles/tailwind3.scss' as *; @use '@syncfusion/ej2-splitbuttons/styles/tailwind3.scss' as *; @use '@syncfusion/ej2-react-grids/styles/tailwind3.scss' as *; | @use '@syncfusion/ej2-tailwind3-theme/styles/button/tailwind3-definition' with ( $btn-primary-bgcolor: red ); @use '@syncfusion/ej2-tailwind3-theme/styles/pager/tailwind3-definition' as pager with ( $pager-active-bg-color: red ); @use "@syncfusion/ej2-tailwind3-theme/styles/grid/index.scss" as *; |
+| CSS variable customization | @use '@syncfusion/ej2-base/styles/tailwind3.scss' as *; @use '@syncfusion/ej2-buttons/styles/tailwind3.scss' as *; @use '@syncfusion/ej2-calendars/styles/tailwind3.scss' as *; @use '@syncfusion/ej2-dropdowns/styles/tailwind3.scss' as *; @use '@syncfusion/ej2-inputs/styles/tailwind3.scss' as *; @use '@syncfusion/ej2-navigations/styles/tailwind3.scss' as *; @use '@syncfusion/ej2-popups/styles/tailwind3.scss' as *; @use '@syncfusion/ej2-splitbuttons/styles/tailwind3.scss' as *; @use '@syncfusion/ej2-react-grids/styles/tailwind3.scss' as *;
:root { --color-sf-primary: red; } | @use '@syncfusion/ej2-tailwind3-theme/styles/base/tailwind3.scss' as *; @use "@syncfusion/ej2-tailwind3-theme/styles/grid/index.scss" as *;
:root { --color-sf-primary: red; } |
diff --git a/ej2-react/appearance/theme.md b/ej2-react/appearance/theme.md
index 27d80f54af..a0a33c33b2 100644
--- a/ej2-react/appearance/theme.md
+++ b/ej2-react/appearance/theme.md
@@ -1,14 +1,14 @@
---
layout: post
title: Theme in React Appearance component | Syncfusion
-description: Learn all about built-in themes including Tailwind 3.4, Material 3, Fluent 2, Bootstrap 5.3 in Syncfusion React (Essential JS 2) components, optimized CSS, and customization options.
+description: Explore Syncfusion React built-in themes including Tailwind 3.4, Material 3, Fluent 2, and Bootstrap 5.3 with optimized CSS and customization options.
control: Theme
platform: ej2-react
documentation: ug
domainurl: ##DomainURL##
---
-# React Themes in Syncfusion® Components
+# React Themes in Syncfusion® Components
Syncfusion® React UI components provide a comprehensive set of built-in themes to deliver a consistent, modern, and visually appealing appearance across applications. The following table lists all currently supported themes in the Syncfusion® React components library:
@@ -39,13 +39,32 @@ Syncfusion® React UI components provide a c
> The Syncfusion® React Bootstrap theme is based on Bootstrap v3, while the Bootstrap 4, Bootstrap 5, and Bootstrap 5.3 themes are aligned with their respective Bootstrap framework versions. In addition to these built-in themes, the [ThemeStudio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio) supports the Fusion theme, which can be customized and downloaded exclusively from [Theme Studio](https://ej2.syncfusion.com/themestudio/?theme=fusion).
+## Theme packages
+
+Syncfusion built-in themes are distributed as theme packages available on npm. These packages include CSS/SCSS files for all components. The following table lists all available theme packages:
+
+| Theme | Light Package | Dark Package |
+|-------|---------------|---------------|
+| Tailwind 3 | [`@syncfusion/ej2-tailwind3-theme`](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) | [`@syncfusion/ej2-tailwind3-dark-theme`](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-dark-theme) |
+| Bootstrap 5.3 | [`@syncfusion/ej2-bootstrap5.3-theme`](https://www.npmjs.com/package/@syncfusion/ej2-bootstrap5.3-theme) | [`@syncfusion/ej2-bootstrap5.3-dark-theme`](https://www.npmjs.com/package/@syncfusion/ej2-bootstrap5.3-dark-theme) |
+| Fluent 2 | [`@syncfusion/ej2-fluent2-theme`](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) | [`@syncfusion/ej2-fluent2-dark-theme`](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-dark-theme) |
+| Material 3 | [`@syncfusion/ej2-material3-theme`](https://www.npmjs.com/package/@syncfusion/ej2-material3-theme) | [`@syncfusion/ej2-material3-dark-theme`](https://www.npmjs.com/package/@syncfusion/ej2-material3-dark-theme) |
+| Bootstrap 5 | [`@syncfusion/ej2-bootstrap5-theme`](https://www.npmjs.com/package/@syncfusion/ej2-bootstrap5-theme) | [`@syncfusion/ej2-bootstrap5-dark-theme`](https://www.npmjs.com/package/@syncfusion/ej2-bootstrap5-dark-theme) |
+| Bootstrap 4 | [`@syncfusion/ej2-bootstrap4-theme`](https://www.npmjs.com/package/@syncfusion/ej2-bootstrap4-theme) | - |
+| Bootstrap | [`@syncfusion/ej2-bootstrap-theme`](https://www.npmjs.com/package/@syncfusion/ej2-bootstrap-theme) | [`@syncfusion/ej2-bootstrap-dark-theme`](https://www.npmjs.com/package/@syncfusion/ej2-bootstrap-dark-theme) |
+| Material | [`@syncfusion/ej2-material-theme`](https://www.npmjs.com/package/@syncfusion/ej2-material-theme) | [`@syncfusion/ej2-material-dark-theme`](https://www.npmjs.com/package/@syncfusion/ej2-material-dark-theme) |
+| Tailwind | [`@syncfusion/ej2-tailwind-theme`](https://www.npmjs.com/package/@syncfusion/ej2-tailwind-theme) | [`@syncfusion/ej2-tailwind-dark-theme`](https://www.npmjs.com/package/@syncfusion/ej2-tailwind-dark-theme) |
+| Fluent | [`@syncfusion/ej2-fluent-theme`](https://www.npmjs.com/package/@syncfusion/ej2-fluent-theme) | [`@syncfusion/ej2-fluent-dark-theme`](https://www.npmjs.com/package/@syncfusion/ej2-fluent-dark-theme) |
+| Fabric | [`@syncfusion/ej2-fabric-theme`](https://www.npmjs.com/package/@syncfusion/ej2-fabric-theme) | [`@syncfusion/ej2-fabric-dark-theme`](https://www.npmjs.com/package/@syncfusion/ej2-fabric-dark-theme) |
+| High Contrast | [`@syncfusion/ej2-highcontrast-theme`](https://www.npmjs.com/package/@syncfusion/ej2-highcontrast-theme) | - |
+
## Optimized CSS files
Syncfusion® components support two size modes in each theme: **normal** (default) and **bigger**. The normal size mode provides the standard appearance suitable for most devices and scenarios. The bigger size mode increases the size of UI elements to enhance readability, touch interaction, and accessibility — particularly useful for high-resolution displays or touch-based applications.
Below is a comparison of the Button component in normal and bigger size modes:
-
+
Each complete theme stylesheet includes styles for both size modes, which increases the file size. To optimize performance in applications that do not need the bigger size mode, Syncfusion provides optimized (lite) theme variants that include only normal size styles. These lite files significantly reduce CSS size and improve application load times.
@@ -68,94 +87,86 @@ For better maintainability, customization, and bundle optimization, prefer the *
## Refer themes through npm packages
-Themes are shipped as both combined and individual CSS/SCSS files. Combined files are available in the `@syncfusion/ej2` package, while component-specific files are located in each component package’s `styles` folder. Both CSS and SCSS formats are provided.
+Themes are shipped as both combined and individual CSS/SCSS files. Each theme package includes Combined and component-specific styles in both CSS and SCSS formats. For a list of available theme packages, refer to the [available theme packages](#theme-packages) section.
-To use the combined CSS files, install the `ej2` package:
+To use the combined SCSS/CSS files, install the required theme package.
```bash
- npm install @syncfusion/ej2
+npm install @syncfusion/ej2-material3-theme
```
**Referring all components CSS**
```css
-@import "./node_modules/@syncfusion/ej2/.css";
+@import "@syncfusion/ej2--theme/styles/.css";
```
-**Referring all components SCSS**
+**Example:**
```css
-@import "./node_modules/@syncfusion/ej2/.scss";
+@import "@syncfusion/ej2-material3-theme/styles/material3.css";
```
-### Referring to individual component theme
-
-You can reference individual component themes either from dedicated component packages or from the unified `@syncfusion/ej2` package.
-
-**From individual package** (recommended for smallest possible bundle):
+**Referring all components SCSS**
-```css
-@import "/styles/.scss";
-@import "ej2-react-buttons/styles/button/.scss";
+```scss
+@use "@syncfusion/ej2--theme/styles/.scss" as *;
```
**Example:**
-```css
-@import "ej2-base/styles/tailwind3.scss";
-@import "ej2-react-buttons/styles/button/tailwind3.scss";
+```scss
+@use "@syncfusion/ej2-material3-theme/styles/material3.scss" as *;
```
-> The `ej2-base` package contains shared styles required by all Syncfusion® React components and must be imported first.
+### Referring to individual component theme
-**From `@syncfusion/ej2` package:**
+You can reference individual component themes from the unified theme package. In this package, each component includes an `index.css/index.scss` files that automatically loads all the required dependency styles.
```css
-@import "ej2//.scss";
-@import "ej2/button/.scss";
+@import "@syncfusion/ej2--theme/styles//index.css";
```
**Example:**
```css
-@import "ej2/base/tailwind3.scss";
-@import "ej2/button/tailwind3.scss";
+@import "@syncfusion/ej2-material3-theme/styles/grid/index.css";
```
### Referring all components optimized CSS file
-To reference optimized (lite) versions of all components from the `@syncfusion/ej2` package:
+To reference optimized (lite) versions of all component styles using theme packages.
```css
-@import "@syncfusion/ej2/-lite.css";
+@import "@syncfusion/ej2--theme/styles/-lite.css";
/* or */
-@import "@syncfusion/ej2/-lite.scss";
+@use "@syncfusion/ej2--theme/styles/-lite.scss" as *;
```
**Example:**
```css
-@import "@syncfusion/ej2/fluent2-lite.css";
+@import "@syncfusion/ej2-fluent2-theme/styles/fluent2-lite.css";
/* or */
-@import "@syncfusion/ej2/fluent2-lite.scss";
+@use "@syncfusion/ej2-fluent2-theme/styles/fluent2-lite.scss" as *;
```
### Referring individual component optimized CSS file
-From individual component packages:
+From individual component styles:
```css
-@import "/styles/-lite.css";
+@import "@syncfusion/ej2--theme/styles//index-lite.css";
/* or */
-@import "/styles/-lite.scss";
+@use "@syncfusion/ej2--theme/styles//index-lite.scss" as *;
```
**Example:**
```css
-@import "@syncfusion/ej2-buttons/styles/fluent2-lite.css";
+@import "@syncfusion/ej2-fluent2-theme/styles/grid/index-lite.css";
/* or */
-@import "@syncfusion/ej2-buttons/styles/fluent2-lite.scss";
+@use "@syncfusion/ej2-fluent2-theme/styles/grid/index-lite.scss" as *;
```
### Advantages of individual components theme
diff --git a/ej2-react/barcode/getting-started.md b/ej2-react/barcode/getting-started.md
index cc603adc04..1ea697ff19 100644
--- a/ej2-react/barcode/getting-started.md
+++ b/ej2-react/barcode/getting-started.md
@@ -63,7 +63,7 @@ All the available Essential® JS 2 packages
```bash
-npm install @syncfusion/ej2-react-barcodegenerator --save
+npm install @syncfusion/ej2-react-barcode-generator --save
```
## Adding Barcode Generator control
diff --git a/ej2-react/block-editor/collaborative-editing.md b/ej2-react/block-editor/collaborative-editing.md
new file mode 100644
index 0000000000..c241be0df8
--- /dev/null
+++ b/ej2-react/block-editor/collaborative-editing.md
@@ -0,0 +1,439 @@
+---
+layout: post
+title: Collaborative Editing in React Block Editor component | Syncfusion
+description: Enable real-time collaborative editing in the React Block Editor component of Syncfusion Essential JS 2 with user presence and version history.
+platform: ej2-react
+control: Block Editor
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Collaborative Editing in React Block Editor component
+
+The Block Editor supports real-time collaborative editing, enabling multiple users to work
+on the same document simultaneously. Collaboration is powered by **Yjs**, a Conflict-free
+Replicated Data Type (CRDT) framework that synchronizes document changes across all
+connected users and automatically resolves conflicts.
+
+With collaboration enabled, users can:
+
+* Edit the same document in real time.
+* View remote user cursors and selections.
+* Track active collaborators.
+* Perform collaboration-aware undo and redo operations.
+* Create, restore, compare, export, and import document versions.
+
+## Prerequisites
+
+Before enabling collaboration, install the `yjs` library and a Yjs provider. See
+[Yjs Providers](https://docs.yjs.dev/ecosystem/connection-provider) to choose the right provider for your use case.
+
+Inject the `Collaboration` module into the Block Editor before use.
+
+{% raw %}
+```typescript
+import { BlockEditorComponent, Collaboration } from '@syncfusion/ej2-react-blockeditor';
+
+BlockEditorComponent.Inject(Collaboration);
+```
+{% endraw %}
+
+## Yjs Providers
+
+A Yjs provider handles the transport of document updates between connected users. Choose a
+provider based on your deployment requirements.
+
+| Provider | Type | Use Case |
+| -------- | ---- | -------- |
+| `y-websocket` | Self-hosted | Production deployments with your own WebSocket server. |
+| `y-webrtc` | Peer-to-peer | Quick local testing and development; no server required. |
+| `y-indexeddb` | Local storage | Offline persistence within a single browser. |
+| [Hocuspocus](https://tiptap.dev/docs/hocuspocus/getting-started/overview) | Open-source server | Scalable Node.js server with pluggable storage and Redis support. |
+| [Liveblocks](https://liveblocks.io/) | Fully managed | Hosted WebSocket infrastructure with REST API and DevTools. |
+| [PartyKit](https://www.partykit.io/) | Serverless | Serverless provider on Cloudflare; ideal for prototyping. |
+
+> **Note:** For development and testing, `y-webrtc` or PartyKit allow you to get started without a server. For production, use `y-websocket` or a managed provider such as Liveblocks or Hocuspocus for reliable, persistent synchronization.
+
+## Configure collaboration settings
+
+Use the `collaborationSettings` property of type `CollaborationSettingsModel` to configure collaboration settings for your Block Editor. It provides the following properties that allow you to customize the collaboration behavior:
+
+| Property | Type | Description |
+| -------- | ---- | ----------- |
+| `provider` | `any` | Real-time transport used to synchronize document changes. |
+| `enableAwareness` | `boolean` | Enables user presence, remote cursors, and text selection overlays. |
+| `adapter` | `CollaborationAdapter` | Provides the Yjs runtime and shared XML fragment. |
+| `versionHistory` | `VersionHistorySettingsModel` | Configures document version history support. |
+
+## Getting Started
+
+The following steps will help you set up real-time collaboration in the Block Editor using `Yjs`.
+
+### Step 1: Create a Yjs document
+
+Create a shared Yjs document and XML fragment.
+
+{% raw %}
+```typescript
+import * as Y from 'yjs';
+
+const yDoc = new Y.Doc();
+const yFragment = yDoc.getXmlFragment('blockeditor');
+```
+{% endraw %}
+
+### Step 2: Create a Yjs adapter
+
+Create an adapter that provides the Yjs runtime and the shared fragment to the Block Editor.
+
+{% raw %}
+```typescript
+import * as Y from 'yjs';
+
+const adapter = new YjsAdapter({
+ yRuntime: Y,
+ yXmlFragment: yFragment
+});
+```
+{% endraw %}
+
+### Step 3: Configure a provider
+
+Create a provider that connects users to the same shared document. The following example
+uses `y-websocket` for production use. For local development, replace it with `y-webrtc`
+or a PartyKit provider — no server setup is required.
+
+**Production (y-websocket):**
+
+{% raw %}
+```typescript
+import { WebsocketProvider } from 'y-websocket';
+
+const provider = new WebsocketProvider(
+ 'wss://your-server-url',
+ 'document-room-id',
+ yDoc
+);
+```
+{% endraw %}
+
+**Development (y-webrtc):**
+
+{% raw %}
+```typescript
+import { WebrtcProvider } from 'y-webrtc';
+
+const provider = new WebrtcProvider('document-room-id', yDoc);
+```
+{% endraw %}
+
+### Step 4: Enable Collaboration
+
+Pass the adapter and provider to the Block Editor through the `collaborationSettings`
+property.
+
+{% raw %}
+```ts
+import { BlockEditorComponent } from '@syncfusion/ej2-react-blockeditor';
+
+
+
+```
+{% endraw %}
+
+## User presence and remote cursors
+
+The Block Editor can display remote cursors, text selection overlays, and user details on
+hover. To enable these user presence features, set `enableAwareness` to `true` in
+`collaborationSettings` property.
+
+{% raw %}
+```typescript
+
+```
+{% endraw %}
+
+## Configure the current user
+
+Set the current user's display name and cursor highlight color using the `users` and
+`currentUserId` properties. The `avatarBgColor` value is used for that user's remote cursor and
+text selection overlay.
+
+The following properties are available when configuring users via the `users` property.
+
+| Property | Type | Description |
+| -------- | ---- | ----------- |
+| `id` | `string` | Unique identifier for the user. |
+| `user` | `string` | Display name shown on remote cursors and presence indicators. |
+| `avatarBgColor` | `string` | Hex color used for this user's remote cursor and selection highlight. |
+
+{% raw %}
+```typescript
+
+```
+{% endraw %}
+
+### Get active users
+
+Retrieve all currently connected users using the `users` property in the block editor.
+
+{% raw %}
+```typescript
+const blockEditorRef = useRef(null);
+const users = blockEditorRef.current?.users;
+```
+{% endraw %}
+
+## Version history
+
+`Version History` allows you to capture document snapshots and restore earlier versions.
+This is a built-in capability of the Block Editor and does not require a third-party
+service.
+
+### Enable version history
+
+Inject the `VersionHistory` module and configure the `versionHistory` property under
+`collaborationSettings` property.
+
+{% raw %}
+```typescript
+import { BlockEditorComponent, VersionHistory } from '@syncfusion/ej2-react-blockeditor';
+
+BlockEditorComponent.Inject(VersionHistory);
+
+const myStorage = new CustomVersionStorage(`blockeditor-${uniqueId}`);
+
+
+```
+{% endraw %}
+
+### Access the version history instance
+
+After the Block Editor initializes, retrieve the version history instance and wait for
+snapshot data to load before calling any version history methods.
+
+{% raw %}
+```typescript
+const blockEditorRef = useRef(null);
+const versionHistory = blockEditorRef.current?.getVersionHistory();
+await versionHistory.whenReady();
+```
+{% endraw %}
+
+### Configure snapshot storage
+
+Version snapshots need to be persisted to enable version history across browser sessions.
+Implement the `IVersionStorage` interface to provide a custom storage backend for managing snapshots. You can use IndexedDB, a backend database, or any other storage solution suitable for your deployment.
+
+The `IVersionStorage` interface defines the following methods:
+
+| Method | Signature | Description |
+| -------- | -------- | ----------- |
+| `saveSnapshot` | `(snapshot: VersionSnapshot): Promise` | Persist a snapshot. |
+| `loadAllSnapshots` | `(): Promise` | Load all persisted snapshots, ordered by timestamp ascending. |
+| `loadSnapshot` | `(id: string): Promise` | Load a single snapshot by id. |
+| `deleteSnapshot` | `(id: string): Promise` | Permanently remove a snapshot by id. |
+| `clearAll` | `(): Promise` | Remove all snapshots from storage. |
+
+### Methods
+
+#### Create a snapshot
+
+Creates a new snapshot of the current document state with an optional label and metadata.
+
+{% raw %}
+```typescript
+const snapshot = await versionHistory.createSnapshot({
+ label: 'Before major update',
+ modifiedBy: currentUserId
+});
+```
+{% endraw %}
+
+#### List snapshots
+
+Retrieves all saved snapshots or a paginated subset. Snapshots are returned in chronological order.
+
+{% raw %}
+```typescript
+// Retrieve all snapshots
+const snapshots = versionHistory.getSnapshots();
+
+// Retrieve a paginated subset — getSnapshots(skip, take)
+const snapshots = versionHistory.getSnapshots(20, 40);
+```
+{% endraw %}
+
+#### Rename a snapshot
+
+Updates the label or metadata of an existing snapshot without modifying its content.
+
+{% raw %}
+```typescript
+await versionHistory.renameSnapshot(snapshotId, 'Release Candidate');
+```
+{% endraw %}
+
+#### Restore a snapshot
+
+Reverts the document to a previously saved snapshot state. The current document state is automatically backed up before restoration.
+
+{% raw %}
+```typescript
+await versionHistory.restoreSnapshot(snapshotId);
+```
+{% endraw %}
+
+> **Note:** When a snapshot is restored, the current document state is automatically
+> backed up before the restore operation is applied.
+
+#### Compare versions
+
+Compares two snapshots to identify differences such as added, removed, or modified content.
+
+{% raw %}
+```typescript
+const diff = versionHistory.compareVersions(snapshotIdA, snapshotIdB);
+```
+{% endraw %}
+
+The returned `VersionDiff` object provides a summary of the differences between the two
+selected versions.
+
+#### Export a snapshot
+
+Serializes a snapshot into a portable format that can be stored externally or transferred between systems.
+
+{% raw %}
+```typescript
+const exported = await versionHistory.exportSnapshot(snapshotId);
+```
+{% endraw %}
+
+Exported snapshots can be stored externally or transferred between systems.
+
+#### Import a snapshot
+
+Imports a previously exported snapshot back into the version history storage.
+
+{% raw %}
+```typescript
+const imported = await versionHistory.importSnapshot(exported);
+```
+{% endraw %}
+
+### Events
+
+Use the following event callbacks in `versionHistory` settings to respond to snapshot
+lifecycle events.
+
+#### snapshotCreated
+
+Triggered when a new snapshot is created.
+
+{% raw %}
+```typescript
+ {
+ console.log(snapshot.id);
+ }
+ }
+ }}
+/>
+```
+{% endraw %}
+
+#### snapshotRestored
+
+Triggered when a snapshot is restored.
+
+{% raw %}
+```typescript
+ {
+ console.log(snapshot.label);
+ }
+ }
+ }}
+/>
+```
+{% endraw %}
+
+## Best Practices
+
+* **Use WebRTC or PartyKit for development** — These providers require no server setup and
+ are ideal for local testing and prototyping before moving to a production provider.
+* **Use WebSocket-based providers in production** — `y-websocket`, Hocuspocus, or a managed
+ service like Liveblocks provides reliable, low-latency, persistent synchronization at scale.
+* **Use stable room identifiers** — Use a unique document ID as the collaboration room name
+ to prevent unintended document sharing between different documents.
+* **Persist snapshots externally** — Store snapshots in a database or cloud storage to
+ preserve version history across sessions.
+* **Enable awareness selectively** — Disable `enableAwareness` when user presence
+ information is not required to reduce network and processing overhead.
+
+## Troubleshooting
+
+### Changes Are Not Synchronizing
+
+Verify the following:
+
+* All users are connected to the same collaboration room.
+* The provider connection is active.
+* The shared Yjs document is correctly configured.
+
+### Remote Cursors Are Not Visible
+
+Verify the following:
+
+* `enableAwareness` is set to `true`.
+* The configured provider supports the Yjs awareness protocol.
+* User information is set via the `users` and `currentUserId` properties.
+* Each user has a unique `id` value.
+
+### Remote User Names Are Not Appearing on Cursors
+
+Verify the following:
+
+* The `user` field is populated for all entries in the `users` array.
+
+### Version History Is Not Available
+
+Verify the following:
+
+* The `VersionHistory` module is injected into the Block Editor.
+* A valid `IVersionStorage` implementation is provided.
+* `whenReady()` has been awaited before accessing snapshots.
diff --git a/ej2-react/block-editor/editor-menus.md b/ej2-react/block-editor/editor-menus.md
index 1dde4743d8..033f94581d 100644
--- a/ej2-react/block-editor/editor-menus.md
+++ b/ej2-react/block-editor/editor-menus.md
@@ -66,7 +66,8 @@ The Context menu offers the following built-in options:
- **Undo/Redo**: Reverses or re-applies the last action.
- **Cut/Copy/Paste**: Standard clipboard actions for selected content.
- **Indent**: Increases or decreases the indent level of the selected block.
-- **Link**: Adds or edits a hyperlink for the selected text.
+- **Link**: Allows you to add or edit a hyperlink for the selected text. When a link is present, the context menu provides options such as `Open Link`, `Edit Link`, `Copy Link`, and `Remove Link`.
+- **Table**: Provides built-in table actions such as `Insert` and `Delete`. These options appear in the context menu when the cursor is focused within a table cell and the context menu is opened
### Customize Context menu
diff --git a/ej2-react/block-editor/getting-started.md b/ej2-react/block-editor/getting-started.md
index b1c2c84752..10bf29f997 100644
--- a/ej2-react/block-editor/getting-started.md
+++ b/ej2-react/block-editor/getting-started.md
@@ -12,48 +12,26 @@ domainurl: ##DomainURL##
This section explains how to create a simple Block Editor and configure its available functionalities in the React environment.
-## Dependencies
-
-The following list of dependencies is required to use the Block Editor component in your application.
-
-```js
-|-- @syncfusion/ej2-react-blockeditor
- |-- @syncfusion/ej2-react-base
- |-- @syncfusion/ej2-base
- |-- @syncfusion/ej2-popups
- |-- @syncfusion/ej2-buttons
- |-- @syncfusion/ej2-splitbuttons
- |-- @syncfusion/ej2-navigations
- |-- @syncfusion/ej2-dropdowns
- |-- @syncfusion/ej2-inputs
-```
+## Create a React Application
-## Setup for Local Development
+Run the following commands to set up a React application:
-To easily set up a React application, use `create-Vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide/). Vite sets up your environment using JavaScript and optimizes your application for production.
+```bash
+npm create vite@latest my-app -- --template react-ts
+```
-> **Note:** If you prefer using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for guidance.
+This command will prompt you to install the required packages and start the application. Select the options as shown below.
-To create a new React application with Vite, follow these steps.
+
-```bash
-npm create vite@latest my-app
-```
-To set-up a React application in TypeScript environment, run the following command.
+As Syncfusion packages are not installed yet, currently, the `No` option will be selected. Then, navigate to the project directory and install the dependencies using the following commands:
-```bash
-npm create vite@latest my-app -- --template react-ts
-cd my-app
-npm run dev
```
-To set-up a React application in JavaScript environment, run the following command.
-
-```bash
-npm create vite@latest my-app -- --template react
cd my-app
-npm run dev
+npm install
```
+> **Note:** To set up a React application with Nextjs or Remix, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/quick-start) for more details.
## Adding Syncfusion® packages
@@ -64,34 +42,23 @@ To install the Block Editor component package, use the following command:
```bash
npm install @syncfusion/ej2-react-blockeditor --save
```
+## Adding CSS reference
-## Add the Block Editor Component
-
-Now, you can start adding Block Editor component in the application. For getting started, add the Block Editor component by using `` tag directive in `src/App.tsx` file using following code. Now place the below Block Editor code in the `src/App.tsx`.
-
-`[Class-component]`
-
-{% raw %}
-```ts
+To install the [tailwind3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command:
-import { BlockEditorComponent } from '@syncfusion/ej2-react-blockeditor';
-import * as React from 'react';
-import * as ReactDOM from "react-dom";
+```bash
+npm install @syncfusion/ej2-tailwind3-theme --save
+```
-export default class App extends React.Component<{}, {}> {
- public render() {
- return (
- // specifies the tag for render the blockeditor component
-
- );
- }
-}
+Import the required CSS theme files for the Block Editor and its dependencies in your `src/index.css` file.
-ReactDOM.render(, document.getElementById('blockeditor'));
+```css
+@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/blockeditor/index.css";
```
-{% endraw %}
-`[Functional-component]`
+## Add the Block Editor Component
+
+Now, you can start adding Block Editor component in the application. For getting started, add the Block Editor component by using `` tag directive in `src/App.tsx` file using following code. Now place the below Block Editor code in the `src/App.tsx`.
{% raw %}
```ts
@@ -110,20 +77,6 @@ ReactDOM.render(, document.getElementById('blockeditor'));
```
{% endraw %}
-## Import CSS Styles
-
-Import the required CSS theme files for the Block Editor and its dependencies in your `src/App.css` file.
-
-```css
-@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
-@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
-@import "../node_modules/@syncfusion/ej2-react-blockeditor/styles/tailwind3.css";
-```
## Run the application
@@ -134,26 +87,14 @@ npm run dev
```
The following example shows a basic Block Editor component.
-[Class-component]
+
{% tabs %}
-{% highlight js tabtitle="index.jsx" %}
-{% include code-snippet/block-editor/getting-started-class/app/index.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="index.tsx" %}
-{% include code-snippet/block-editor/getting-started-class/app/index.tsx %}
+{% highlight ts tabtitle="App.tsx" %}
+{% include code-snippet/block-editor/getting-started/app/index.tsx %}
{% endhighlight %}
-{% endtabs %}
-
- {% previewsample "page.domainurl/code-snippet/block-editor/getting-started-class" %}
-
- [Functional-component]
- {% tabs %}
-{% highlight js tabtitle="index.jsx" %}
+{% highlight js tabtitle="App.jsx" %}
{% include code-snippet/block-editor/getting-started/app/index.jsx %}
{% endhighlight %}
-{% highlight ts tabtitle="index.tsx" %}
-{% include code-snippet/block-editor/getting-started/app/index.tsx %}
-{% endhighlight %}
{% endtabs %}
{% previewsample "page.domainurl/code-snippet/block-editor/getting-started" %}
\ No newline at end of file
diff --git a/ej2-react/block-editor/images/initial_setup.png b/ej2-react/block-editor/images/initial_setup.png
new file mode 100644
index 0000000000..a8542ecb88
Binary files /dev/null and b/ej2-react/block-editor/images/initial_setup.png differ
diff --git a/ej2-react/button/repeat-button.md b/ej2-react/button/repeat-button.md
new file mode 100644
index 0000000000..3932e8f585
--- /dev/null
+++ b/ej2-react/button/repeat-button.md
@@ -0,0 +1,85 @@
+---
+layout: post
+title: Repeat button in React Button control | Syncfusion
+description: Learn here all about repeat button support in Syncfusion React Button component of Syncfusion Essential JS 2 and more.
+platform: ej2-react
+control: Repeat Button
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Repeat button in React Button control
+
+The Button component provides repeat-click functionality through the `enableRepeat` property. When enabled, the Button continuously triggers the `clicked` event while the user presses and holds the Button.
+
+Repeat-click behavior is useful in scenarios where an action needs to be performed repeatedly without requiring multiple manual clicks, such as:
+
+- Incrementing or decrementing numeric values
+- Volume adjustment controls
+- Zoom controls
+- Continuous scrolling
+- Carousel navigation
+- Gaming controls
+- Custom spinner components
+
+## Repeat-click behavior
+
+When the `enableRepeat` property is set to `true`, the Button raises an initial `clicked` event immediately when pressed. If the Button remains pressed, additional `clicked` events are generated automatically until the interaction ends.
+
+## Repeat Button properties
+
+The following properties are used to configure repeat-click behavior.
+
+| Property | Description | Default Value |
+|-----------|-------------|---------------|
+| `enableRepeat` | Enables continuous firing of the `clicked` event while the Button remains pressed. | `false` |
+| `repeatDelay` | Specifies the delay, in milliseconds, before repeat events begin after the initial click. | `400` |
+| `repeatInterval` | Specifies the time interval, in milliseconds, between successive repeat events. | `0` |
+
+### Enabling Repeat Clicks
+
+When `enableRepeat` is set to `true`, the Button raises an initial click event immediately and continues generating additional click events until the interaction ends.
+
+This property is useful for controls that require sustained user interaction.
+
+### Delay Before Repeating
+
+The `repeatDelay` property specifies the amount of time, in milliseconds, that the Button waits before initiating repeat-generated click events.
+
+The delay starts immediately after the first click event is raised. Once the duration specified by `repeatDelay` has elapsed, the repeat cycle begins automatically.
+
+A larger `repeatDelay` value provides additional time before repeating starts, while a smaller value causes repeat actions to begin sooner.
+
+### Interval Between Repeats
+
+After the repeat cycle starts, the Button continues raising click events at the interval configured through `repeatInterval` until the Button is released.
+
+Smaller `repeatInterval` values result in faster event generation, while larger values reduce the repeat frequency.
+
+### Clicked event
+
+The `clicked` event is triggered whenever the Button is activated, including both the initial click and repeat-generated clicks.
+
+The event arguments expose additional information that can be used to identify how the event was generated.
+
+Indicates whether the current `clicked` event was generated by the repeat mechanism.
+
+| Value | Description |
+|---------|-------------|
+| `false` | Indicates the initial click event. |
+| `true` | Indicates a repeat-generated click event. |
+
+The `isRepeat` property indicates whether the `clicked` event was triggered by the initial button press or by the repeat mechanism.
+
+The following example demonstrates repeat-click functionality with configurable delay and interval settings. The sample also tracks initial click events separately from repeat-generated events.
+
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/button/repeat-button-cs2/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/button/repeat-button-cs2/app/app.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/button/repeat-button-cs2" %}
diff --git a/ej2-react/chart/getting-started.md b/ej2-react/chart/getting-started.md
index af60de588a..cac9cfa7c9 100644
--- a/ej2-react/chart/getting-started.md
+++ b/ej2-react/chart/getting-started.md
@@ -8,9 +8,9 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Getting Started with React Charts of Syncfusion
+# Getting Started with the React Chart Component
-This section describes the steps to create a simple Chart and demonstrates the basic usage of the Chart component.
+This section describes the steps to create a simple Chart.
> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/ai-coding-assistant/overview)
@@ -18,162 +18,118 @@ A quick video overview of the React Charts setup is available:
{% youtube "https://www.youtube.com/watch?v=w1xHn0CceqE" %}
-## Dependencies
+## Prerequisites
-Below is the list of minimum dependencies required to use the Chart component.
+Before getting started, ensure that your development environment meets the [system requirements for Syncfusion® React UI components](https://ej2.syncfusion.com/react/documentation/system-requirement)
-```
-|-- @syncfusion/ej2-react-charts
- |-- @syncfusion/ej2-data
- |-- @syncfusion/ej2-react-base
- |-- @syncfusion/ej2-pdf-export
- |-- @syncfusion/ej2-file-utils
- |-- @syncfusion/ej2-compression
- |-- @syncfusion/ej2-svg-base
-```
+## Before You Begin
+
+This guide uses the React application structure generated by Vite with the TypeScript template.
+
+The main files used in this guide are:
-Once you install `@syncfusion/ej2-react-charts`, the other required dependencies will be installed automatically along with the main package.
+* `src/App.tsx` — Defines the root React component.
+* `src/main.tsx` — Application entry point.
+* `index.html` — Root HTML file.
+
+> **Note:** In a Vite React TypeScript application, the root component is commonly generated as `src/App.tsx`. If your application uses JavaScript, the equivalent file is typically `src/App.jsx`.
+
+> **Note:** This guide uses the TypeScript template for better type checking with Chart models.
## Installation and configuration
-### Create a React application
+> **Note:** As an alternative, you can create a React application using [`create-react-app`](https://github.com/facebook/create-react-app) For detailed instructions, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app).
+
+### Step 1: Set up the React environment
-To easily set up a React application, use the Vite CLI (`npm create vite`), which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like [`create-react-app`](https://github.com/facebook/create-react-app). For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide). Vite sets up your environment using JavaScript and optimizes your application for production.
+Use [Vite](https://vitejs.dev/) to create and manage React applications. Vite provides a fast development environment and optimized builds for modern React applications. Syncfusion® React documentation also recommends Vite for setting up React applications.
-> **Note:** To create a React application using [`create-react-app`](https://github.com/facebook/create-react-app) instead, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details.
+Start by opening a terminal on your system **(Command Prompt, PowerShell, or Terminal)**. You may work from the default C: drive location or create a new folder and open the terminal in it.
-To create a new React application, run the following command.
+### Step 2: Create a React application
+
+Create a new React application using the below command.
```bash
-npm create vite@latest my-app
+npm create vite@latest my-chart-app -- --template react-ts
```
-This command will prompt you for a few settings for the new project, such as selecting a framework and a variant.
-
-
+If Vite prompts you to install dependencies and start the project immediately, choose **No**. The Syncfusion package is installed in a later step.
-To set up a React application in TypeScript environment, run the following command.
+Navigate to the project folder:
```bash
-npm create vite@latest my-app -- --template react-ts
-cd my-app
-npm run dev
+cd my-chart-app
```
-To set up a React application in JavaScript environment, run the following command.
+Install the application dependencies:
```bash
-npm create vite@latest my-app -- --template react
-cd my-app
-npm run dev
+npm install
```
-### Install Syncfusion® Chart package
+> **Note:** If you prefer JavaScript instead of TypeScript, create the application using `npm create vite@latest my-chart-app -- --template react`.
-All the available Essential® JS 2 packages are published in the [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry.
+### Step 3: Install the Syncfusion® React Chart package
-To install the Syncfusion® Chart package, use the following command
+All Syncfusion Essential® JS 2 packages are available in the [npmjs.com](https://www.npmjs.com/~syncfusionorg) registry.
+
+Install the React Chart package using the following command:
```bash
npm install @syncfusion/ej2-react-charts --save
```
-> The –save will instruct NPM to include the Chart package inside of the **dependencies** section of the package.json.
+> Installing `@syncfusion/ej2-react-charts` automatically installs the required dependency packages. The –save will instruct NPM to include the Chart package inside of the **dependencies** section of the package.json.
+
+The steps up to this point can be completed using the initially opened terminal or command prompt. For adding Chart components, open the project in the IDE installed on your device.
-## Add Chart to the project
+### Step 4: Add Chart to the project
Add the Chart component to `src/App.tsx` using the following code.
{% tabs %}
-{% highlight js tabtitle="App.jsx" %}
-
+{% highlight ts tabtitle="~/src/App.tsx" %}
import { ChartComponent } from '@syncfusion/ej2-react-charts';
-import * as React from 'react';
function App() {
return ();
}
export default App;
-
-{% endhighlight %}
-{% highlight ts tabtitle="App.tsx" %}
-
-import { ChartComponent } from '@syncfusion/ej2-react-charts';
-import * as React from 'react';
-function App() {
- return ();
-}
-export default App;
-
{% endhighlight %}
{% endtabs %}
-Now run the `npm run dev` command in the console to start the development server. This command compiles your code and serves the application locally, opening it in the browser.
+> **Note:** This will render an empty chart area by running `npm run dev` in terminal ([Refer Step 7](#step-7-run-the-application)). Proceed to the next steps to add data, series, and necessary module injections to visualize your data.
-```
-npm run dev
-```
+### Step 5: Module injection
-The below example shows a basic Chart.
-
-{% tabs %}
-{% highlight js tabtitle="App.jsx" %}
-{% include code-snippet/chart/code-path/getting-started/initialize-cs1/app/index.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="App.tsx" %}
-{% include code-snippet/chart/code-path/getting-started/initialize-cs1/app/index.tsx %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/chart/preview-sample/getting-started/initialize-cs1" %}
-
-## Module injection
-
-Chart components are segregated into individual feature-wise modules. In order to use a particular feature, you need to inject its feature service in the Chart component. In the current application, we are going to modify the above basic Chart to visualize sales data for a particular year. For this application we are going to use line series, tooltip, data label, category axis and legend feature of the Chart. Please find the relevant feature service name and description as follows.
+Chart features are delivered as separate modules and must be explicitly injected. Here, the LineSeries and Category modules are used to render yearly sales data.
* `LineSeries` - Inject this module in to `services` to use line series.
-* `Legend` - Inject this module in to `services` to use legend feature.
-* `Tooltip` - Inject this module in to `services` to use tooltip feature.
-* `DataLabel` - Inject this module in to `services` to use datalabel feature.
* `Category` - Inject this module in to `services` to use category feature.
Import the above-mentioned modules from the Chart package and inject them into the `services` section of the Chart component as follows.
{% tabs %}
-{% highlight js tabtitle="App.jsx" %}
-
-import { ChartComponent, LineSeries, Legend, Tooltip, DataLabel, Category, Inject } from '@syncfusion/ej2-react-charts';
-import * as React from "react";
-
-function App() {
- return
-
- ;
-}
-export default App;
-
-{% endhighlight %}
-{% highlight ts tabtitle="App.tsx" %}
-
-import { ChartComponent, LineSeries, Legend, Tooltip, DataLabel, Category, Inject } from '@syncfusion/ej2-react-charts';
-import * as React from "react";
+{% highlight ts tabtitle="~/src/App.tsx" %}
+import { ChartComponent, LineSeries, Category, Inject } from '@syncfusion/ej2-react-charts';
function App() {
return
-
+ ;
}
export default App;
-
{% endhighlight %}
{% endtabs %}
-## Populate Chart with data
+**Note:** At this stage, no series are rendered because the Chart component has not yet been configured with a data source.
-This section explains how to plot the following JSON data to the Chart.
+### Step 6: Populate Chart with data
-{% tabs %}
-{% highlight js tabtitle="App.jsx" %}
+The chart data should be provided as a JSON array in the following format. You can define the data in the same `src/App.tsx` file or place it in a separate file (for example, `src/datasource.ts`) and import it into `App.tsx`.
-export let data = [
+{% tabs %}
+{% highlight ts tabtitle="~/src/datasource.ts" %}
+export const data: Object[] = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
@@ -181,11 +137,16 @@ export let data = [
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
-
{% endhighlight %}
-{% highlight ts tabtitle="App.tsx" %}
+{% endtabs %}
+
+After defining the required data set, bind the data to the Chart component in the `SeriesDirective` tag. The following code snippet demonstrates the complete configuration required to render a basic chart.
+
+{% tabs %}
+{% highlight ts tabtitle="~/src/App.tsx" %}
+import { ChartComponent, Inject, SeriesCollectionDirective, SeriesDirective, Category, LineSeries } from '@syncfusion/ej2-react-charts';
-export let data: Object[] = [
+const data: Object[] = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
@@ -193,132 +154,29 @@ export let data: Object[] = [
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
+const xAxisCategory = { valueType: 'Category' };
+function App() {
+ return
+
+
+
+
+
+}
+export default App;
{% endhighlight %}
{% endtabs %}
-Add [`series`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel) to the Chart using the `` and `` components. Map the JSON fields `month` and `sales` to the series [`xName`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#xname) and [`yName`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#yname) properties, and set the JSON array as the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#datasource) property.
-
-Since the JSON contains category data, set the [`valueType`](https://ej2.syncfusion.com/react/documentation/api/chart/axisModel#valuetype) for the horizontal axis (primaryXAxis) to `Category`. By default, the axis valueType is `Numeric`.
-
-{% tabs %}
-{% highlight js tabtitle="App.jsx" %}
-{% include code-snippet/chart/code-path/getting-started/datasource-cs3/app/index.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="App.tsx" %}
-{% include code-snippet/chart/code-path/getting-started/datasource-cs3/app/index.tsx %}
-{% endhighlight %}
-{% highlight js tabtitle="datasource.jsx" %}
-{% include code-snippet/chart/code-path/getting-started/datasource-cs3/app/datasource.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="datasource.tsx" %}
-{% include code-snippet/chart/code-path/getting-started/datasource-cs3/app/datasource.tsx %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/chart/preview-sample/getting-started/datasource-cs3" %}
-
-The sales data are in thousands, so format the vertical axis label by adding `$` as a prefix and `K` as a suffix to each label. This can be achieved by setting the `${value}K` to the [`labelFormat`](https://ej2.syncfusion.com/react/documentation/api/chart/axisModel#labelformat) property of axis. Here, `{value}` act as a placeholder for each axis label.
-
-{% tabs %}
-{% highlight js tabtitle="App.jsx" %}
-{% include code-snippet/chart/code-path/getting-started/datasource-cs4/app/index.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="App.tsx" %}
-{% include code-snippet/chart/code-path/getting-started/datasource-cs4/app/index.tsx %}
-{% endhighlight %}
-{% highlight js tabtitle="datasource.jsx" %}
-{% include code-snippet/chart/code-path/getting-started/datasource-cs4/app/datasource.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="datasource.tsx" %}
-{% include code-snippet/chart/code-path/getting-started/datasource-cs4/app/datasource.tsx %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/chart/preview-sample/getting-started/datasource-cs4" %}
-
-## Add Chart title
-
-You can add a title using the [`title`](https://ej2.syncfusion.com/react/documentation/api/chart/chartModel#title) property to the Chart to provide quick information to the user about the data plotted in the Chart.
-
-{% tabs %}
-{% highlight js tabtitle="App.jsx" %}
-{% include code-snippet/chart/code-path/getting-started/title-cs1/app/index.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="App.tsx" %}
-{% include code-snippet/chart/code-path/getting-started/title-cs1/app/index.tsx %}
-{% endhighlight %}
-{% highlight js tabtitle="datasource.jsx" %}
-{% include code-snippet/chart/code-path/getting-started/title-cs1/app/datasource.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="datasource.tsx" %}
-{% include code-snippet/chart/code-path/getting-started/title-cs1/app/datasource.tsx %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/chart/preview-sample/getting-started/title-cs1" %}
-
-## Enable legend
-
-You can use legend for the Chart by setting the [`visible`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettingsModel#visible) property to `true` in [`legendSettings`](https://ej2.syncfusion.com/react/documentation/api/chart/chartmodel#legendsettings) object and by injecting the `Legend` module into the `services`.
-
-{% tabs %}
-{% highlight js tabtitle="App.jsx" %}
-{% include code-snippet/chart/code-path/getting-started/legend-cs1/app/index.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="App.tsx" %}
-{% include code-snippet/chart/code-path/getting-started/legend-cs1/app/index.tsx %}
-{% endhighlight %}
-{% highlight js tabtitle="datasource.jsx" %}
-{% include code-snippet/chart/code-path/getting-started/legend-cs1/app/datasource.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="datasource.tsx" %}
-{% include code-snippet/chart/code-path/getting-started/legend-cs1/app/datasource.tsx %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/chart/preview-sample/getting-started/legend-cs1" %}
-
-## Add data label
-
-You can add data labels to improve the readability of the Chart. This can be achieved by setting the [`visible`](https://ej2.syncfusion.com/react/documentation/api/chart/datalabelsettingsmodel#visible) property to `true` in the [`dataLabel`](https://ej2.syncfusion.com/react/documentation/api/chart/markersettingsmodel#datalabel) object and by injecting `DataLabel` module into the `services`. Now, the data labels are arranged smartly based on series.
-
-{% tabs %}
-{% highlight js tabtitle="App.jsx" %}
-{% include code-snippet/chart/code-path/getting-started/datalabel-cs1/app/index.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="App.tsx" %}
-{% include code-snippet/chart/code-path/getting-started/datalabel-cs1/app/index.tsx %}
-{% endhighlight %}
-{% highlight js tabtitle="datasource.jsx" %}
-{% include code-snippet/chart/code-path/getting-started/datalabel-cs1/app/datasource.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="datasource.tsx" %}
-{% include code-snippet/chart/code-path/getting-started/datalabel-cs1/app/datasource.tsx %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/chart/preview-sample/getting-started/datalabel-cs1" %}
-
-## Enable tooltip
+### Step 7: Run the application
-The tooltip is useful when you cannot display information by using the data labels due to space constraints. You can enable tooltip by setting the [`enable`](https://ej2.syncfusion.com/react/documentation/api/chart/tooltipSettingsModel#enable) property as `true` in [`tooltip`](https://ej2.syncfusion.com/react/documentation/api/chart/chartmodel#tooltip) object and by injecting `Tooltip` module into the `services`.
+Run the application using the following command:
-{% tabs %}
-{% highlight js tabtitle="App.jsx" %}
-{% include code-snippet/chart/code-path/getting-started/tooltip-cs2/app/index.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="App.tsx" %}
-{% include code-snippet/chart/code-path/getting-started/tooltip-cs2/app/index.tsx %}
-{% endhighlight %}
-{% highlight js tabtitle="datasource.jsx" %}
-{% include code-snippet/chart/code-path/getting-started/tooltip-cs2/app/datasource.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="datasource.tsx" %}
-{% include code-snippet/chart/code-path/getting-started/tooltip-cs2/app/datasource.tsx %}
-{% endhighlight %}
-{% endtabs %}
+```bash
+npm run dev
+```
+Open the generated local URL (for example, `localhost:5173/`) from terminal in the browser. The application displays the chart as shown below:
-{% previewsample "page.domainurl/code-snippet/chart/preview-sample/getting-started/tooltip-cs2" %}
+
-> You can refer to our [React Charts](https://www.syncfusion.com/react-components/react-charts) feature tour page for its groundbreaking feature representations. You can also explore our [React Charts example](https://ej2.syncfusion.com/react/demos#/bootstrap5/chart/line) that shows various 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 [React Charts](https://www.syncfusion.com/react-components/react-charts) feature tour page for its groundbreaking feature representations. You can also explore our [React Charts example](https://ej2.syncfusion.com/demos/#/tailwind3/chart/overview.html) that shows various 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-react/chart/images/Getting-Started.png b/ej2-react/chart/images/Getting-Started.png
new file mode 100644
index 0000000000..574e3ec596
Binary files /dev/null and b/ej2-react/chart/images/Getting-Started.png differ
diff --git a/ej2-react/chart/images/next-js.png b/ej2-react/chart/images/next-js.png
new file mode 100644
index 0000000000..ee6e0b9946
Binary files /dev/null and b/ej2-react/chart/images/next-js.png differ
diff --git a/ej2-react/chart/nextjs-getting-started.md b/ej2-react/chart/nextjs-getting-started.md
index 66a0e35707..724485f70d 100644
--- a/ej2-react/chart/nextjs-getting-started.md
+++ b/ej2-react/chart/nextjs-getting-started.md
@@ -8,7 +8,7 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Creating a Next.js Application Using Syncfusion React Components
+# Creating a Next.js Application Using Syncfusion React Chart Component
This section provides a step-by-step guide for setting up a Next.js application and integrating the Syncfusion® React Chart component.
@@ -24,7 +24,7 @@ Before getting started with the Next.js application, ensure the following prereq
* The application is compatible with macOS, Windows, and Linux operating systems.
-## Create a Next.js application
+## Step 1: Create a Next.js application
To create a new `Next.js` application, use one of the commands that are specific to either NPM or Yarn.
@@ -58,18 +58,13 @@ Using one of the above commands will lead you to set up additional configuration
{% tabs %}
{% highlight bash tabtitle="CMD" %}
-√ What is your project named? ... ej2-nextjs-chart
-√ Would you like to use TypeScript? ... No / `Yes`
-√ Would you like to use ESLint? ... No / `Yes`
-√ Would you like to use Tailwind CSS? ... `No` / Yes
-√ Would you like to use `src/` directory? ... No / `Yes`
-√ Would you like to use App Router? (recommended) ... No / `Yes`
-√ Would you like to customize the default import alias? ... `No`/ Yes
-Creating a new Next.js app in D:\ej2-nextjs-chart.
+√ Would you like to use the recommended Next.js defaults? » Yes, use recommended defaults
{% endhighlight %}
{% endtabs %}
+By selecting default packages, all essential packages for Next.js will be installed.
+
3.Once complete the above mentioned steps to create `ej2-nextjs-chart`, navigate to the directory using the below command:
{% tabs %}
@@ -82,7 +77,7 @@ cd ej2-nextjs-chart
The application is ready to run with default settings. Now, let's add Syncfusion® components to the project.
-## Install Syncfusion® React packages
+## Step 2: Install Syncfusion® React packages
Syncfusion® React component packages are available at [npmjs.com](https://www.npmjs.com/search?q=ej2-react). To use Syncfusion® React components in the project, install the corresponding npm package.
@@ -101,7 +96,7 @@ yarn add @syncfusion/ej2-react-charts
{% endhighlight %}
{% endtabs %}
-## Add Syncfusion® React component
+## Step 3: Add Syncfusion® React component
Follow the below steps to add the React Chart component to the Next.js project:
@@ -123,11 +118,10 @@ import {
{% tabs %}
{% highlight ts tabtitle="page.tsx" %}
-
'use client'
import {
- AxisModel, Category, ChartComponent, ColumnSeries, DataLabel, Inject,
- Legend, LegendSeriesModel, LineSeries, SeriesCollectionDirective, SeriesDirective, Tooltip, TooltipSettingsModel, MarkerSettingsModel
+ Category, ChartComponent, ColumnSeries, Inject,
+ LineSeries, SeriesCollectionDirective, SeriesDirective
} from '@syncfusion/ej2-react-charts';
export default function Home() {
@@ -139,31 +133,21 @@ export default function Home() {
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
- const tooltip: TooltipSettingsModel = { enable: true, shared: false };
- const primaryYAxis: AxisModel = { labelFormat: '${value}K' };
- const primaryXAxis: AxisModel = { valueType: 'Category' };
- const legendSettings: LegendSeriesModel = { visible: true };
- const marker: MarkerSettingsModel = { dataLabel: { visible: true } };
+ const xAxisCategory = { valueType: 'Category' };
return (
- <>
-
Syncfusion React Chart Component
-
-
-
-
-
-
-
+
+
+
+
+
+
)
}
-
-
{% endhighlight %}
{% endtabs %}
-## Run the application
+## Step 4: Run the application
To run the application, use the following command:
@@ -180,6 +164,10 @@ yarn run dev
{% endhighlight %}
{% endtabs %}
+Open the generated local URL (for example, `/localhost:3000/`) from terminal in the browser. The application displays the chart as shown below:
+
+
+
To learn more about the functionality of the Chart component, refer to the [documentation](https://ej2.syncfusion.com/react/documentation/chart/getting-started#module-injection).
> [View the NEXT.js Chart sample in the GitHub repository](https://github.com/SyncfusionExamples/ej2-nextjs-chart).
diff --git a/ej2-react/chart/preact.md b/ej2-react/chart/preact.md
index f964416786..8669ed20a5 100644
--- a/ej2-react/chart/preact.md
+++ b/ej2-react/chart/preact.md
@@ -18,7 +18,7 @@ This article provides a step-by-step guide for setting up a [Preact](https://pre
[System requirements for Syncfusion® React UI components](../system-requirement)
-## Set up the Preact project
+## Step 1: Set up the Preact project
To create a new `Preact` project, use one of the commands that are specific to either NPM or Yarn.
@@ -81,7 +81,7 @@ cd my-project
Now that `my-project` is ready to run with default settings, let's add Syncfusion® components to the project.
-## Add the Syncfusion® React packages
+## Step 2: Add the Syncfusion® React packages
Syncfusion® React component packages are available at [npmjs.com](https://www.npmjs.com/search?q=ej2-react). To use Syncfusion® React components in the project, install the corresponding npm package.
@@ -97,7 +97,7 @@ or
yarn add @syncfusion/ej2-react-charts
```
-## Add the Syncfusion® React component
+## Step 3: Add the Syncfusion® React component
Follow the below steps to add the React Chart component to the Preact project:
@@ -106,7 +106,7 @@ Follow the below steps to add the React Chart component to the Preact project:
{% tabs %}
{% highlight js tabtitle="~/src/index.jsx" %}
-import { Category, ChartComponent, ColumnSeries, Inject, LineSeries, SeriesCollectionDirective, SeriesDirective, Tooltip } from '@syncfusion/ej2-react-charts';
+import { Category, ChartComponent, Inject, LineSeries, SeriesCollectionDirective, SeriesDirective } from '@syncfusion/ej2-react-charts';
{% endhighlight %}
{% endtabs %}
@@ -117,7 +117,7 @@ import { Category, ChartComponent, ColumnSeries, Inject, LineSeries, SeriesColle
{% highlight js tabtitle="~/src/index.jsx" %}
import { render } from 'preact';
-import { Category, ChartComponent, ColumnSeries, Inject, LineSeries, SeriesCollectionDirective, SeriesDirective, Tooltip } from '@syncfusion/ej2-react-charts';
+import { Category, ChartComponent , Inject, LineSeries, SeriesCollectionDirective, SeriesDirective } from '@syncfusion/ej2-react-charts';
export function App() {
@@ -130,11 +130,11 @@ export function App() {
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
- const primaryXAxis = { valueType: 'Category' };
+ const xAxisCategory = { valueType: 'Category' };
return (
-
-
+
+
@@ -147,7 +147,7 @@ render(, document.getElementById('app'));
{% endhighlight %}
{% endtabs %}
-## Run the project
+## Step 4: Run the project
To run the project, use the following command:
@@ -161,7 +161,7 @@ or
yarn run dev
```
-The output will appear as follows:
+Open the generated local URL (for example, `/localhost:5174/`) from terminal in the browser. The application displays the chart as shown below:
diff --git a/ej2-react/chart/tool-tip.md b/ej2-react/chart/tool-tip.md
index ccd3485353..1a1dcbf172 100644
--- a/ej2-react/chart/tool-tip.md
+++ b/ej2-react/chart/tool-tip.md
@@ -104,6 +104,72 @@ Each series tooltip can be formatted separately by using the series [`tooltipFor
+## Inline tooltip formatting
+
+The tooltip content can be formatted directly within the [`format`](https://ej2.syncfusion.com/react/documentation/api/chart/tooltipsettings#format) property by adding DateTime or number format specifiers to supported tooltip tokens. This allows you to control how point and series values are displayed without using additional events.
+
+A format specifier can be applied to a tooltip token by adding a colon (`:`) followed by the required format.
+
+For example:
+
+```typescript
+const tooltip = {
+ enable: true,
+ format: '${series.name} (${series.type}) ${point.x:MMM yyyy} : ${point.y:n2} Size: ${point.size} Opacity: ${series.opacity}'
+};
+```
+
+In the above example, `point.x` is displayed in month-year format, `point.y` is displayed with two decimal places, `point.size` displays the size value of the data point, and `series.opacity` displays the opacity value applied to the series.
+
+Inline formatting can be applied to the following tooltip tokens:
+
+- `point.x` – Specifies the x-value of the data point, such as DateTime or category values.
+- `point.y` – Specifies the numeric y-value of the data point.
+- `point.size` – Specifies the size value of the data point, commonly used in bubble series.
+- `point.high` and `point.low` – Specify the high and low values, commonly used in range and financial series.
+- `point.open` and `point.close` – Specify the open and close values, commonly used in financial series.
+- `point.volume` – Specifies the volume value, commonly used in financial series.
+- `point.minimum` – Specifies the minimum value, commonly used in box and whisker series.
+- `point.maximum` – Specifies the maximum value, commonly used in box and whisker series.
+- `point.median` – Specifies the median value, commonly used in box and whisker series.
+- `point.lowerQuartile` – Specifies the lower quartile value, commonly used in box and whisker series.
+- `point.upperQuartile` – Specifies the upper quartile value, commonly used in box and whisker series.
+- `point.outliers` – Specifies the outlier values, commonly used in box and whisker series.
+- `series.name` – Specifies the name assigned to the series.
+- `series.type` – Specifies the rendering type of the series, such as `Line`, `Spline`, or `Column`.
+- `series.opacity` – Specifies the opacity value applied to the series. This value controls the visual transparency of the series and can be customized in the series configuration.
+
+**Important:** The availability of point-specific tokens depends on the series type and the values configured in the data source. For example, `point.size` is applicable to bubble series, while `point.median`, `point.lowerQuartile`, and `point.upperQuartile` are applicable to box and whisker series. The `series.name` and `series.type` tokens return string values, so DateTime or number formatting is not applied to these tokens.
+
+The following format types are supported:
+
+- DateTime formats such as `MMM yyyy`, `MM:yy`, and `dd MMM`
+- Number formats such as:
+ - `n2` – number with two decimal places
+ - `n0` – number without decimals
+ - `c2` – currency format
+ - `p1` – percentage format
+ - `e1` – exponential notation
+
+If the specified format does not match the resolved value type, the original value is displayed.
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/chart/code-path/user-interaction/tooltip-cs14/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/chart/code-path/user-interaction/tooltip-cs14/app/index.tsx %}
+{% endhighlight %}
+{% highlight js tabtitle="datasource.jsx" %}
+{% include code-snippet/chart/code-path/user-interaction/tooltip-cs14/app/datasource.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="datasource.tsx" %}
+{% include code-snippet/chart/code-path/user-interaction/tooltip-cs14/app/datasource.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/preview-sample/user-interaction/tooltip-cs14" %}
+
## Tooltip template
Custom HTML content can be rendered in the tooltip by using the [`template`](https://ej2.syncfusion.com/react/documentation/api/chart/tooltipSettingsModel#template) property. The `${x}` and `${y}` placeholders can be used within the template to display the x- and y-values of the corresponding data point.
diff --git a/ej2-react/chat-ui/getting-started.md b/ej2-react/chat-ui/getting-started.md
index a5418161ea..ce66036d62 100644
--- a/ej2-react/chat-ui/getting-started.md
+++ b/ej2-react/chat-ui/getting-started.md
@@ -12,55 +12,27 @@ domainurl: ##DomainURL##
This section explains how to create a simple **Chat UI** component and configure its essential functionalities in React.
-## Dependencies
-
-The `Chat UI` component requires the following dependencies in your application:
-
-```javascript
-|-- @syncfusion/ej2-react-interactive-chat
- |-- @syncfusion/ej2-react-base
- |-- @syncfusion/ej2-base
- |-- @syncfusion/ej2-buttons
- |-- @syncfusion/ej2-popups
- |-- @syncfusion/ej2-navigations
- |-- @syncfusion/ej2-inputs
- |-- @syncfusion/ej2-dropdowns
-```
-
-## Setup for Local Development
+## Create a React Application
-To set up a React application, choose any of the following approaches. The recommended method is using [create-react-app](https://github.com/facebook/create-react-app), which configures your development environment and optimizes your application for production. Refer to the [installation instructions](https://github.com/facebook/create-react-app#creating-an-app) for detailed guidance.
+Run the following commands to set up a React application:
```bash
-npx create-react-app my-app
-cd my-app
-npm start
+npm create vite@latest my-app -- --template react-ts
```
-or
+This command will prompt you to install the required packages and start the application. Select the options as shown below.
-```bash
-yarn create react-app my-app
-cd my-app
-yarn start
-```
+
-To set-up a React application in `TypeScript` environment, run the following command.
+As Syncfusion packages are not installed yet, currently, the `No` option will be selected. Then, navigate to the project directory and install the dependencies using the following commands:
-```bash
-npx create-react-app my-app --template typescript
-cd my-app
-npm start
```
-
-Besides using the [npx](https://docs.npmjs.com/cli/v9/commands/npx?v=true) package runner tool, also create an application from the `npm init`. To begin with the `npm init`, upgrade the `npm` version to `npm 6+`.
-
-```bash
-npm init react-app my-app
cd my-app
-npm start
+npm install
```
+> **Note:** To set up a React application with Nextjs or Remix, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/quick-start) for more details.
+
## Adding Syncfusion® packages
All the available Essential® JS 2 packages are published in [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry. You can choose the component that you want to install.
@@ -71,12 +43,24 @@ To install Chat UI component, use the following command
npm install @syncfusion/ej2-react-interactive-chat --save
```
+## Adding CSS reference
+
+To apply styling to the Chat UI component, import the required CSS theme files into your `src/App.css` file. The following example uses the Tailwind3 theme, but other themes like Bootstrap 5, Tailwind CSS, or Fluent are also available.
+
+To install the [tailwind3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command:
+
+```bash
+npm install @syncfusion/ej2-tailwind3-theme --save
+```
+
+```css
+@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/chat-ui/index.css";
+```
+
## Adding Chat UI component
Now, you can start adding Chat UI component in the application. For getting started, add the Chat UI component by using `` tag directive in `src/App.tsx` file using following code. Now place the below Chat UI code in the `src/App.tsx`.
-`[Functional-component]`
-
```ts
import { ChatUIComponent } from '@syncfusion/ej2-react-interactive-chat';
import * as React from 'react';
@@ -85,30 +69,27 @@ import * as ReactDOM from "react-dom";
function App() {
return (
// specifies the tag for render the Chat UI component
-
+
);
}
ReactDOM.render(, document.getElementById('chat-ui'));
```
-## Adding CSS reference
-
-Import the Chat UI component required CSS references as follows in `src/App.css`.
-
-```css
+## Configure user
-/* import the Chat UI dependency styles */
+Enhance your Chat UI by configuring users. The [user](../api/chat-ui#user) property configures the current user for the chat interface.
-@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
-@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";
-@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
-@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
-@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
-@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
-@import "../node_modules/@syncfusion/ej2-react-interactive-chat/styles/tailwind3.css";
+{% tabs %}
+{% highlight ts tabtitle="App.tsx" %}
+{% include code-snippet/chat-ui/defaultMessage/app/index.tsx %}
+{% endhighlight %}
+{% highlight js tabtitle="App.jsx" %}
+{% include code-snippet/chat-ui/defaultMessage/app/index.jsx %}
+{% endhighlight %}
+{% endtabs %}
-```
+{% previewsample "page.domainurl/code-snippet/chat-ui/defaultMessage" %}
## Run the application
@@ -118,30 +99,13 @@ After completing the basic configuration, run the following command to display t
npm start
```
-`[Functional-component]`
-
{% tabs %}
-{% highlight js tabtitle="index.jsx" %}
-{% include code-snippet/chat-ui/getting-started/app/index.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="index.tsx" %}
+{% highlight ts tabtitle="App.tsx" %}
{% include code-snippet/chat-ui/getting-started/app/index.tsx %}
{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/chat-ui/getting-started" %}
-
-## Configure messages and user
-
-Enhance your Chat UI by configuring messages and users. Use the `MessagesDirective` to group all messages and `MessageDirective` to define individual messages. The [user](../api/chat-ui#user) property configures the current user for the chat interface.
-
-{% tabs %}
-{% highlight js tabtitle="index.jsx" %}
-{% include code-snippet/chat-ui/defaultMessage/app/index.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="index.tsx" %}
-{% include code-snippet/chat-ui/defaultMessage/app/index.tsx %}
+{% highlight js tabtitle="App.jsx" %}
+{% include code-snippet/chat-ui/getting-started/app/index.jsx %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/chat-ui/defaultMessage" %}
+{% previewsample "page.domainurl/code-snippet/chat-ui/getting-started" %}
diff --git a/ej2-react/chat-ui/images/initial_setup.png b/ej2-react/chat-ui/images/initial_setup.png
new file mode 100644
index 0000000000..a8542ecb88
Binary files /dev/null and b/ej2-react/chat-ui/images/initial_setup.png differ
diff --git a/ej2-react/circular-chart-3d/tooltip.md b/ej2-react/circular-chart-3d/tooltip.md
index 928f4c93d0..4342d17781 100644
--- a/ej2-react/circular-chart-3d/tooltip.md
+++ b/ej2-react/circular-chart-3d/tooltip.md
@@ -55,6 +55,61 @@ By default, the tooltip shows information about the x and y values in points. Ad
{% previewsample "page.domainurl/code-snippet/circular-chart/preview-sample/tooltip/tooltip-cs3" %}
+## Inline tooltip formatting
+
+The tooltip content can be formatted directly within the `format` property by adding DateTime or number format specifiers to supported tooltip tokens. This allows you to control how point and series values are displayed without using additional events.
+
+A format specifier is applied by adding a colon (`:`) followed by the required format.
+
+For example:
+
+```typescript
+const tooltip = {
+ enable: true,
+ format: '${series.name} ${point.x:MMM yyyy} : ${point.y:n2} Percentage: ${point.percentage:p1} Opacity: ${series.opacity}'
+};
+```
+
+In the above example, `point.x` is displayed in month-year format, `point.y` is displayed with two decimal places, `point.percentage` is displayed in percentage format, and `series.opacity` displays the opacity value applied to the series.
+
+Inline formatting can be applied to the following tooltip tokens:
+
+- `point.x` – Specifies the x-value or category value of the 3D circular chart point.
+- `point.y` – Specifies the numeric y-value of the 3D circular chart point.
+- `point.percentage` – Specifies the percentage contribution of the point value in the 3D circular chart.
+- `point.text` – Specifies the text value mapped to the point, when text mapping is configured.
+- `point.tooltip` – Specifies the tooltip value mapped from the data source, when tooltip mapping is configured.
+- `point.index` – Specifies the index position of the point in the 3D circular chart.
+- `point.color` – Specifies the fill color applied to the point.
+- `point.visible` – Specifies the visibility state of the point.
+- `series.name` – Specifies the name assigned to the 3D circular chart series.
+- `series.opacity` – Specifies the opacity value applied to the 3D circular chart series.
+
+**Important:** The availability of point-specific tokens depends on the values configured in the data source and the 3D circular chart series. For example, `point.percentage` is useful for pie and doughnut charts, while `point.text` and `point.tooltip` depend on the corresponding field mappings. String tokens such as `series.name`, `point.text`, `point.tooltip`, `point.color`, and `point.visible` return string values, so DateTime or number formatting is not applied to these tokens.
+
+The following format types are supported:
+
+- DateTime formats such as `MMM yyyy`, `MM:yy`, and `dd MMM`
+- Number formats such as:
+ - `n2` – number with two decimal places
+ - `n0` – number without decimals
+ - `c2` – currency format
+ - `p1` – percentage format
+ - `e1` – exponential notation
+
+If the specified format does not match the resolved value type, the original value is displayed.
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/circular-chart/code-path/tooltip/tooltip-cs8/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/circular-chart/code-path/tooltip/tooltip-cs8/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/circular-chart/preview-sample/tooltip/tooltip-cs8" %}
+
## Tooltip template
Any HTML elements can be displayed in the tooltip by using the `template` property in the tooltip.
diff --git a/ej2-react/code-snippet/3d-chart/tooltip/tooltip-cs6/app/index.jsx b/ej2-react/code-snippet/3d-chart/tooltip/tooltip-cs6/app/index.jsx
new file mode 100644
index 0000000000..92cffff4a9
--- /dev/null
+++ b/ej2-react/code-snippet/3d-chart/tooltip/tooltip-cs6/app/index.jsx
@@ -0,0 +1,41 @@
+import { Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective, DateTime3D, Inject, Legend3D, Tooltip3D, ColumnSeries3D, Highlight3D } from '@syncfusion/ej2-react-charts';
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+function App() {
+ const data = [
+ { month: new Date(2024, 0, 1), sales: 35 },
+ { month: new Date(2024, 1, 1), sales: 28 },
+ { month: new Date(2024, 2, 1), sales: 34 },
+ { month: new Date(2024, 3, 1), sales: 32 },
+ { month: new Date(2024, 4, 1), sales: 40 },
+ { month: new Date(2024, 5, 1), sales: 32 },
+ { month: new Date(2024, 6, 1), sales: 35 },
+ { month: new Date(2024, 7, 1), sales: 55 },
+ { month: new Date(2024, 8, 1), sales: 38 },
+ { month: new Date(2024, 9, 1), sales: 30 },
+ { month: new Date(2024, 10, 1), sales: 25 },
+ { month: new Date(2024, 11, 1), sales: 32 }
+ ];
+ const tooltip = {
+ enable: true,
+ header: 'Sales',
+ format: '${series.name} ${point.x:MMM yyyy} : ${point.y:n2}'
+ };
+ const primaryXAxis = {
+ valueType: "DateTime",
+ labelRotation: -45,
+ labelPlacement: 'BetweenTicks'
+ }
+ return
+
+
+
+
+
+ ;
+}
+;
+export default App;
+ReactDOM.render(, document.getElementById("charts"));
diff --git a/ej2-react/code-snippet/3d-chart/tooltip/tooltip-cs6/app/index.tsx b/ej2-react/code-snippet/3d-chart/tooltip/tooltip-cs6/app/index.tsx
new file mode 100644
index 0000000000..cf26a24b9d
--- /dev/null
+++ b/ej2-react/code-snippet/3d-chart/tooltip/tooltip-cs6/app/index.tsx
@@ -0,0 +1,40 @@
+import { Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective, DateTime3D, Inject, Legend3D, Tooltip3D, ColumnSeries3D, Highlight3D } from '@syncfusion/ej2-react-charts';
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+function App() {
+ const data = [
+ { month: new Date(2024, 0, 1), sales: 35 },
+ { month: new Date(2024, 1, 1), sales: 28 },
+ { month: new Date(2024, 2, 1), sales: 34 },
+ { month: new Date(2024, 3, 1), sales: 32 },
+ { month: new Date(2024, 4, 1), sales: 40 },
+ { month: new Date(2024, 5, 1), sales: 32 },
+ { month: new Date(2024, 6, 1), sales: 35 },
+ { month: new Date(2024, 7, 1), sales: 55 },
+ { month: new Date(2024, 8, 1), sales: 38 },
+ { month: new Date(2024, 9, 1), sales: 30 },
+ { month: new Date(2024, 10, 1), sales: 25 },
+ { month: new Date(2024, 11, 1), sales: 32 }
+ ];
+ const tooltip = {
+ enable: true,
+ header: 'Sales',
+ format: '${series.name} ${point.x:MMM yyyy} : ${point.y:n2}'
+ };
+ const primaryXAxis = {
+ valueType: "DateTime",
+ labelRotation: -45,
+ labelPlacement: 'BetweenTicks'
+ }
+ return
+
+
+
+
+
+ ;
+};
+export default App;
+ReactDOM.render(, document.getElementById("charts"));
diff --git a/ej2-react/code-snippet/3d-chart/tooltip/tooltip-cs6/index.html b/ej2-react/code-snippet/3d-chart/tooltip/tooltip-cs6/index.html
new file mode 100644
index 0000000000..6dcc5f2b30
--- /dev/null
+++ b/ej2-react/code-snippet/3d-chart/tooltip/tooltip-cs6/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+ Syncfusion React Chart
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default App;
\ No newline at end of file
diff --git a/ej2-react/code-snippet/data/getting-started/filter.tsx b/ej2-react/code-snippet/data/getting-started/filter.tsx
new file mode 100644
index 0000000000..97698446f2
--- /dev/null
+++ b/ej2-react/code-snippet/data/getting-started/filter.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { DataManager, JsonAdaptor, Query } from '@syncfusion/ej2-data';
+import { data } from './datasource';
+import { IOrders } from './orders';
+import { Row } from './rowTemplate';
+import './App.css'
+
+const App: React.FC = () => {
+ const result = new DataManager({
+ json: data,
+ adaptor: new JsonAdaptor(),
+ }).executeLocal(
+ new Query().where('EmployeeID', 'equal', 3)
+ ) as IOrders[];
+
+ const items = result.map((row: IOrders, index: number) => (
+
+ ));
+
+ return (
+
+
+
+
Order ID
+
Customer ID
+
Employee ID
+
+
+ {items}
+
+ );
+};
+
+export default App;
\ No newline at end of file
diff --git a/ej2-react/code-snippet/data/getting-started/json.jsx b/ej2-react/code-snippet/data/getting-started/json.jsx
new file mode 100644
index 0000000000..c79ce37edb
--- /dev/null
+++ b/ej2-react/code-snippet/data/getting-started/json.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { DataManager, JsonAdaptor, Query } from '@syncfusion/ej2-data';
+import { data } from './datasource';
+import { Row } from './rowTemplate';
+import './App.css';
+
+const App = () => {
+ const result = new DataManager({
+ json: data,
+ adaptor: new JsonAdaptor(),
+ }).executeLocal(new Query().take(8));
+
+ const items = result.map((row, index) => (
+
+ ));
+
+ return (
+
+
+
+
Order ID
+
Customer ID
+
Employee ID
+
+
+ {items}
+
+ );
+};
+
+export default App;
\ No newline at end of file
diff --git a/ej2-react/code-snippet/data/getting-started/json.tsx b/ej2-react/code-snippet/data/getting-started/json.tsx
new file mode 100644
index 0000000000..104713e18b
--- /dev/null
+++ b/ej2-react/code-snippet/data/getting-started/json.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { DataManager, JsonAdaptor, Query } from '@syncfusion/ej2-data';
+import { data } from './datasource';
+import { IOrders } from './orders';
+import { Row } from './rowTemplate';
+import './App.css';
+
+const App: React.FC = () => {
+ const result = new DataManager({
+ json: data,
+ adaptor: new JsonAdaptor(),
+ }).executeLocal(new Query().take(8)) as IOrders[];
+
+ const items = result.map((row: IOrders, index: number) => (
+
+ ));
+
+ return (
+
+
+
+
Order ID
+
Customer ID
+
Employee ID
+
+
+ {items}
+
+ );
+};
+
+export default App;
\ No newline at end of file
diff --git a/ej2-react/code-snippet/data/getting-started/localdata.jsx b/ej2-react/code-snippet/data/getting-started/localdata.jsx
new file mode 100644
index 0000000000..14d6e1ecf2
--- /dev/null
+++ b/ej2-react/code-snippet/data/getting-started/localdata.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { DataManager } from '@syncfusion/ej2-data';
+import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
+import { data } from './datasource';
+import './App.css'
+
+const App = () => {
+ const gridData = new DataManager(data);
+
+ return (
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default App;
\ No newline at end of file
diff --git a/ej2-react/code-snippet/data/getting-started/localdata.tsx b/ej2-react/code-snippet/data/getting-started/localdata.tsx
new file mode 100644
index 0000000000..80e5a8bdcc
--- /dev/null
+++ b/ej2-react/code-snippet/data/getting-started/localdata.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { DataManager } from '@syncfusion/ej2-data';
+import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
+import { data } from './datasource';
+import './App.css'
+
+const App: React.FC = () => {
+ const gridData: DataManager = new DataManager(data);
+
+ return (
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default App;
\ No newline at end of file
diff --git a/ej2-react/code-snippet/data/getting-started/odata.jsx b/ej2-react/code-snippet/data/getting-started/odata.jsx
new file mode 100644
index 0000000000..d507bde0ed
--- /dev/null
+++ b/ej2-react/code-snippet/data/getting-started/odata.jsx
@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from 'react';
+import { DataManager, Query, ODataV4Adaptor } from '@syncfusion/ej2-data';
+import { Row } from './rowTemplate';
+import './App.css'
+
+const SERVICE_URL = 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
+
+const App = () => {
+ const [items, setItems] = useState([]);
+
+ useEffect(() => {
+ new DataManager({
+ url: SERVICE_URL,
+ adaptor: new ODataV4Adaptor(),
+ })
+ .executeQuery(new Query().take(8))
+ .then((e) => {
+ const rows = e.result.map((row) => (
+
+ ));
+ setItems(rows);
+ });
+ }, []);
+
+ return (
+
+
+
+
Order ID
+
Customer ID
+
Employee ID
+
+
+ {items}
+
+ );
+};
+
+export default App;
\ No newline at end of file
diff --git a/ej2-react/code-snippet/data/getting-started/odata.tsx b/ej2-react/code-snippet/data/getting-started/odata.tsx
new file mode 100644
index 0000000000..761605a57b
--- /dev/null
+++ b/ej2-react/code-snippet/data/getting-started/odata.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { DataManager, Query, ReturnOption, ODataV4Adaptor } from '@syncfusion/ej2-data';
+import { IOrders } from './orders';
+import { Row } from './rowTemplate';
+import './App.css'
+
+const SERVICE_URL: string =
+ 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
+
+const App: React.FC = () => {
+ const [items, setItems] = useState([]);
+
+ useEffect(() => {
+ new DataManager({
+ url: SERVICE_URL,
+ adaptor: new ODataV4Adaptor(),
+ })
+ .executeQuery(new Query().take(8))
+ .then((e: ReturnOption) => {
+ const rows = (e.result as IOrders[]).map((row: IOrders) => (
+
+ ));
+ setItems(rows);
+ });
+ }, []);
+
+ return (
+
+
+
+
Order ID
+
Customer ID
+
Employee ID
+
+
+ {items}
+
+ );
+};
+
+export default App;
\ No newline at end of file
diff --git a/ej2-react/code-snippet/data/getting-started/page.jsx b/ej2-react/code-snippet/data/getting-started/page.jsx
new file mode 100644
index 0000000000..a420e128c8
--- /dev/null
+++ b/ej2-react/code-snippet/data/getting-started/page.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { DataManager, JsonAdaptor, Query } from '@syncfusion/ej2-data';
+import { data } from './datasource';
+import { Row } from './rowTemplate';
+import './App.css'
+
+const App = () => {
+ const result = new DataManager({
+ json: data,
+ adaptor: new JsonAdaptor(),
+ }).executeLocal(
+ new Query().page(1, 8)
+ );
+
+ const items = result.map((row, index) => (
+
+ ));
+
+ return (
+
+
+
+
Order ID
+
Customer ID
+
Employee ID
+
+
+ {items}
+
+ );
+};
+
+export default App;
\ No newline at end of file
diff --git a/ej2-react/code-snippet/data/getting-started/page.tsx b/ej2-react/code-snippet/data/getting-started/page.tsx
new file mode 100644
index 0000000000..fce41d69d8
--- /dev/null
+++ b/ej2-react/code-snippet/data/getting-started/page.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { DataManager, JsonAdaptor, Query } from '@syncfusion/ej2-data';
+import { data } from './datasource';
+import { IOrders } from './orders';
+import { Row } from './rowTemplate';
+import './App.css'
+
+const App: React.FC = () => {
+ const result = new DataManager({
+ json: data,
+ adaptor: new JsonAdaptor(),
+ }).executeLocal(
+ new Query().page(1, 8)
+ ) as IOrders[];
+
+ const items = result.map((row: IOrders, index: number) => (
+
+ ));
+
+ return (
+
+
+
+
Order ID
+
Customer ID
+
Employee ID
+
+
+ {items}
+
+ );
+};
+
+export default App;
\ No newline at end of file
diff --git a/ej2-react/code-snippet/data/getting-started/remotedata.jsx b/ej2-react/code-snippet/data/getting-started/remotedata.jsx
new file mode 100644
index 0000000000..0a7531213e
--- /dev/null
+++ b/ej2-react/code-snippet/data/getting-started/remotedata.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
+import { ColumnDirective, ColumnsDirective, GridComponent, } from '@syncfusion/ej2-react-grids';
+import './App.css'
+
+const SERVICE_URL = 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
+
+const App = () => {
+ const data = new DataManager({
+ url: SERVICE_URL,
+ adaptor: new ODataV4Adaptor(),
+ });
+
+ return (
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default App;
\ No newline at end of file
diff --git a/ej2-react/code-snippet/data/getting-started/remotedata.tsx b/ej2-react/code-snippet/data/getting-started/remotedata.tsx
new file mode 100644
index 0000000000..aa9332dafd
--- /dev/null
+++ b/ej2-react/code-snippet/data/getting-started/remotedata.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
+import { ColumnDirective, ColumnsDirective, GridComponent, } from '@syncfusion/ej2-react-grids';
+import './App.css'
+
+const SERVICE_URL: string = 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/';
+
+const App: React.FC = () => {
+ const data: DataManager = new DataManager({
+ url: SERVICE_URL,
+ adaptor: new ODataV4Adaptor(),
+ });
+
+ return (
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default App;
\ No newline at end of file
diff --git a/ej2-react/code-snippet/data/getting-started/sort.jsx b/ej2-react/code-snippet/data/getting-started/sort.jsx
new file mode 100644
index 0000000000..ee277481af
--- /dev/null
+++ b/ej2-react/code-snippet/data/getting-started/sort.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { DataManager, JsonAdaptor, Query } from '@syncfusion/ej2-data';
+import { data } from './datasource';
+import { Row } from './rowTemplate';
+import './App.css'
+
+const App = () => {
+ const result = new DataManager({
+ json: data,
+ adaptor: new JsonAdaptor(),
+ }).executeLocal(
+ new Query().sortBy('CustomerID').take(8)
+ );
+
+ const items = result.map((row, index) => (
+
+ ));
+
+ return (
+
+
+
+
Order ID
+
Customer ID
+
Employee ID
+
+
+ {items}
+
+ );
+};
+
+export default App;
\ No newline at end of file
diff --git a/ej2-react/code-snippet/data/getting-started/sort.tsx b/ej2-react/code-snippet/data/getting-started/sort.tsx
new file mode 100644
index 0000000000..512521e6c7
--- /dev/null
+++ b/ej2-react/code-snippet/data/getting-started/sort.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { DataManager, JsonAdaptor, Query } from '@syncfusion/ej2-data';
+import { data } from './datasource';
+import { IOrders } from './orders';
+import { Row } from './rowTemplate';
+import './App.css'
+
+const App: React.FC = () => {
+ const result = new DataManager({
+ json: data,
+ adaptor: new JsonAdaptor(),
+ }).executeLocal(
+ new Query().sortBy('CustomerID').take(8)
+ ) as IOrders[];
+
+ const items = result.map((row: IOrders, index: number) => (
+
+ ));
+
+ return (
+
+
+
+
Order ID
+
Customer ID
+
Employee ID
+
+
+ {items}
+
+ );
+};
+
+export default App;
\ No newline at end of file
diff --git a/ej2-react/code-snippet/datepicker/asterisk-cs1/index.html b/ej2-react/code-snippet/datepicker/asterisk-cs1/index.html
index 443f1accea..7a34c141f1 100644
--- a/ej2-react/code-snippet/datepicker/asterisk-cs1/index.html
+++ b/ej2-react/code-snippet/datepicker/asterisk-cs1/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/asterisk-cs2/index.html b/ej2-react/code-snippet/datepicker/asterisk-cs2/index.html
index 443f1accea..7a34c141f1 100644
--- a/ej2-react/code-snippet/datepicker/asterisk-cs2/index.html
+++ b/ej2-react/code-snippet/datepicker/asterisk-cs2/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/customization-cs1/index.html b/ej2-react/code-snippet/datepicker/customization-cs1/index.html
index 39760b667e..eb490b216e 100644
--- a/ej2-react/code-snippet/datepicker/customization-cs1/index.html
+++ b/ej2-react/code-snippet/datepicker/customization-cs1/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/customization-cs2/index.html b/ej2-react/code-snippet/datepicker/customization-cs2/index.html
index 39760b667e..eb490b216e 100644
--- a/ej2-react/code-snippet/datepicker/customization-cs2/index.html
+++ b/ej2-react/code-snippet/datepicker/customization-cs2/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/default-cs1/index.html b/ej2-react/code-snippet/datepicker/default-cs1/index.html
index 39760b667e..eb490b216e 100644
--- a/ej2-react/code-snippet/datepicker/default-cs1/index.html
+++ b/ej2-react/code-snippet/datepicker/default-cs1/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/default-cs10/index.html b/ej2-react/code-snippet/datepicker/default-cs10/index.html
index 39760b667e..eb490b216e 100644
--- a/ej2-react/code-snippet/datepicker/default-cs10/index.html
+++ b/ej2-react/code-snippet/datepicker/default-cs10/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/default-cs11/index.html b/ej2-react/code-snippet/datepicker/default-cs11/index.html
index 39760b667e..eb490b216e 100644
--- a/ej2-react/code-snippet/datepicker/default-cs11/index.html
+++ b/ej2-react/code-snippet/datepicker/default-cs11/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/default-cs12/index.html b/ej2-react/code-snippet/datepicker/default-cs12/index.html
index 39760b667e..eb490b216e 100644
--- a/ej2-react/code-snippet/datepicker/default-cs12/index.html
+++ b/ej2-react/code-snippet/datepicker/default-cs12/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/default-cs13/index.html b/ej2-react/code-snippet/datepicker/default-cs13/index.html
index 39760b667e..eb490b216e 100644
--- a/ej2-react/code-snippet/datepicker/default-cs13/index.html
+++ b/ej2-react/code-snippet/datepicker/default-cs13/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/default-cs14/index.html b/ej2-react/code-snippet/datepicker/default-cs14/index.html
index 39760b667e..eb490b216e 100644
--- a/ej2-react/code-snippet/datepicker/default-cs14/index.html
+++ b/ej2-react/code-snippet/datepicker/default-cs14/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/default-cs15/index.html b/ej2-react/code-snippet/datepicker/default-cs15/index.html
index 39760b667e..eb490b216e 100644
--- a/ej2-react/code-snippet/datepicker/default-cs15/index.html
+++ b/ej2-react/code-snippet/datepicker/default-cs15/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/default-cs16/index.html b/ej2-react/code-snippet/datepicker/default-cs16/index.html
index 39760b667e..eb490b216e 100644
--- a/ej2-react/code-snippet/datepicker/default-cs16/index.html
+++ b/ej2-react/code-snippet/datepicker/default-cs16/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/default-cs17/index.html b/ej2-react/code-snippet/datepicker/default-cs17/index.html
index 39760b667e..eb490b216e 100644
--- a/ej2-react/code-snippet/datepicker/default-cs17/index.html
+++ b/ej2-react/code-snippet/datepicker/default-cs17/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/default-cs18/index.html b/ej2-react/code-snippet/datepicker/default-cs18/index.html
index 39760b667e..eb490b216e 100644
--- a/ej2-react/code-snippet/datepicker/default-cs18/index.html
+++ b/ej2-react/code-snippet/datepicker/default-cs18/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/default-cs19/index.html b/ej2-react/code-snippet/datepicker/default-cs19/index.html
index 39760b667e..eb490b216e 100644
--- a/ej2-react/code-snippet/datepicker/default-cs19/index.html
+++ b/ej2-react/code-snippet/datepicker/default-cs19/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/default-cs2/index.html b/ej2-react/code-snippet/datepicker/default-cs2/index.html
index 39760b667e..eb490b216e 100644
--- a/ej2-react/code-snippet/datepicker/default-cs2/index.html
+++ b/ej2-react/code-snippet/datepicker/default-cs2/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/default-cs20/index.html b/ej2-react/code-snippet/datepicker/default-cs20/index.html
index 39760b667e..eb490b216e 100644
--- a/ej2-react/code-snippet/datepicker/default-cs20/index.html
+++ b/ej2-react/code-snippet/datepicker/default-cs20/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/default-cs21/index.html b/ej2-react/code-snippet/datepicker/default-cs21/index.html
index 39760b667e..eb490b216e 100644
--- a/ej2-react/code-snippet/datepicker/default-cs21/index.html
+++ b/ej2-react/code-snippet/datepicker/default-cs21/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/default-cs22/index.html b/ej2-react/code-snippet/datepicker/default-cs22/index.html
index 39760b667e..eb490b216e 100644
--- a/ej2-react/code-snippet/datepicker/default-cs22/index.html
+++ b/ej2-react/code-snippet/datepicker/default-cs22/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/default-cs23/index.html b/ej2-react/code-snippet/datepicker/default-cs23/index.html
index 39760b667e..eb490b216e 100644
--- a/ej2-react/code-snippet/datepicker/default-cs23/index.html
+++ b/ej2-react/code-snippet/datepicker/default-cs23/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/default-cs24/index.html b/ej2-react/code-snippet/datepicker/default-cs24/index.html
index 39760b667e..eb490b216e 100644
--- a/ej2-react/code-snippet/datepicker/default-cs24/index.html
+++ b/ej2-react/code-snippet/datepicker/default-cs24/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/default-cs3/index.html b/ej2-react/code-snippet/datepicker/default-cs3/index.html
index 39760b667e..eb490b216e 100644
--- a/ej2-react/code-snippet/datepicker/default-cs3/index.html
+++ b/ej2-react/code-snippet/datepicker/default-cs3/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/default-cs4/index.html b/ej2-react/code-snippet/datepicker/default-cs4/index.html
index 39760b667e..eb490b216e 100644
--- a/ej2-react/code-snippet/datepicker/default-cs4/index.html
+++ b/ej2-react/code-snippet/datepicker/default-cs4/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/default-cs5/index.html b/ej2-react/code-snippet/datepicker/default-cs5/index.html
index 39760b667e..eb490b216e 100644
--- a/ej2-react/code-snippet/datepicker/default-cs5/index.html
+++ b/ej2-react/code-snippet/datepicker/default-cs5/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/default-cs6/index.html b/ej2-react/code-snippet/datepicker/default-cs6/index.html
index 39760b667e..eb490b216e 100644
--- a/ej2-react/code-snippet/datepicker/default-cs6/index.html
+++ b/ej2-react/code-snippet/datepicker/default-cs6/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/default-cs7/index.html b/ej2-react/code-snippet/datepicker/default-cs7/index.html
index 39760b667e..eb490b216e 100644
--- a/ej2-react/code-snippet/datepicker/default-cs7/index.html
+++ b/ej2-react/code-snippet/datepicker/default-cs7/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/default-cs8/index.html b/ej2-react/code-snippet/datepicker/default-cs8/index.html
index 39760b667e..eb490b216e 100644
--- a/ej2-react/code-snippet/datepicker/default-cs8/index.html
+++ b/ej2-react/code-snippet/datepicker/default-cs8/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/default-cs9/index.html b/ej2-react/code-snippet/datepicker/default-cs9/index.html
index 39760b667e..eb490b216e 100644
--- a/ej2-react/code-snippet/datepicker/default-cs9/index.html
+++ b/ej2-react/code-snippet/datepicker/default-cs9/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/dynamic-form-validator-cs1/index.html b/ej2-react/code-snippet/datepicker/dynamic-form-validator-cs1/index.html
index 39760b667e..eb490b216e 100644
--- a/ej2-react/code-snippet/datepicker/dynamic-form-validator-cs1/index.html
+++ b/ej2-react/code-snippet/datepicker/dynamic-form-validator-cs1/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/globalization-cs1/index.html b/ej2-react/code-snippet/datepicker/globalization-cs1/index.html
index 39760b667e..eb490b216e 100644
--- a/ej2-react/code-snippet/datepicker/globalization-cs1/index.html
+++ b/ej2-react/code-snippet/datepicker/globalization-cs1/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/globalization-cs2/index.html b/ej2-react/code-snippet/datepicker/globalization-cs2/index.html
index 39760b667e..eb490b216e 100644
--- a/ej2-react/code-snippet/datepicker/globalization-cs2/index.html
+++ b/ej2-react/code-snippet/datepicker/globalization-cs2/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/header-format-cs1/index.html b/ej2-react/code-snippet/datepicker/header-format-cs1/index.html
index 1da38246d1..c135c1992a 100644
--- a/ej2-react/code-snippet/datepicker/header-format-cs1/index.html
+++ b/ej2-react/code-snippet/datepicker/header-format-cs1/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/mask-module-cs1/index.html b/ej2-react/code-snippet/datepicker/mask-module-cs1/index.html
index dd3c95d060..9aead50fdd 100644
--- a/ej2-react/code-snippet/datepicker/mask-module-cs1/index.html
+++ b/ej2-react/code-snippet/datepicker/mask-module-cs1/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/mask-module-cs2/index.html b/ej2-react/code-snippet/datepicker/mask-module-cs2/index.html
index dd3c95d060..9aead50fdd 100644
--- a/ej2-react/code-snippet/datepicker/mask-module-cs2/index.html
+++ b/ej2-react/code-snippet/datepicker/mask-module-cs2/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/mask-module-cs3/index.html b/ej2-react/code-snippet/datepicker/mask-module-cs3/index.html
index dd3c95d060..9aead50fdd 100644
--- a/ej2-react/code-snippet/datepicker/mask-module-cs3/index.html
+++ b/ej2-react/code-snippet/datepicker/mask-module-cs3/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/mask-module-cs4/index.html b/ej2-react/code-snippet/datepicker/mask-module-cs4/index.html
index dd3c95d060..9aead50fdd 100644
--- a/ej2-react/code-snippet/datepicker/mask-module-cs4/index.html
+++ b/ej2-react/code-snippet/datepicker/mask-module-cs4/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/mask-module-cs5/index.html b/ej2-react/code-snippet/datepicker/mask-module-cs5/index.html
index dd3c95d060..9aead50fdd 100644
--- a/ej2-react/code-snippet/datepicker/mask-module-cs5/index.html
+++ b/ej2-react/code-snippet/datepicker/mask-module-cs5/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/mask-module-cs6/index.html b/ej2-react/code-snippet/datepicker/mask-module-cs6/index.html
index dd3c95d060..9aead50fdd 100644
--- a/ej2-react/code-snippet/datepicker/mask-module-cs6/index.html
+++ b/ej2-react/code-snippet/datepicker/mask-module-cs6/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/open-popup-cs1/index.html b/ej2-react/code-snippet/datepicker/open-popup-cs1/index.html
index 39760b667e..eb490b216e 100644
--- a/ej2-react/code-snippet/datepicker/open-popup-cs1/index.html
+++ b/ej2-react/code-snippet/datepicker/open-popup-cs1/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/rtl-cs1/index.html b/ej2-react/code-snippet/datepicker/rtl-cs1/index.html
index 39760b667e..eb490b216e 100644
--- a/ej2-react/code-snippet/datepicker/rtl-cs1/index.html
+++ b/ej2-react/code-snippet/datepicker/rtl-cs1/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/rtl-cs2/index.html b/ej2-react/code-snippet/datepicker/rtl-cs2/index.html
index 39760b667e..eb490b216e 100644
--- a/ej2-react/code-snippet/datepicker/rtl-cs2/index.html
+++ b/ej2-react/code-snippet/datepicker/rtl-cs2/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/timezone-cs1/index.html b/ej2-react/code-snippet/datepicker/timezone-cs1/index.html
index 39760b667e..eb490b216e 100644
--- a/ej2-react/code-snippet/datepicker/timezone-cs1/index.html
+++ b/ej2-react/code-snippet/datepicker/timezone-cs1/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datepicker/timezone-cs2/index.html b/ej2-react/code-snippet/datepicker/timezone-cs2/index.html
index 39760b667e..eb490b216e 100644
--- a/ej2-react/code-snippet/datepicker/timezone-cs2/index.html
+++ b/ej2-react/code-snippet/datepicker/timezone-cs2/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/daterangepicker/customcss-cs1/index.html b/ej2-react/code-snippet/daterangepicker/customcss-cs1/index.html
index 598e5cac30..7cecc06a46 100644
--- a/ej2-react/code-snippet/daterangepicker/customcss-cs1/index.html
+++ b/ej2-react/code-snippet/daterangepicker/customcss-cs1/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/daterangepicker/default-cs1/index.html b/ej2-react/code-snippet/daterangepicker/default-cs1/index.html
index 598e5cac30..7cecc06a46 100644
--- a/ej2-react/code-snippet/daterangepicker/default-cs1/index.html
+++ b/ej2-react/code-snippet/daterangepicker/default-cs1/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/daterangepicker/default-cs10/index.html b/ej2-react/code-snippet/daterangepicker/default-cs10/index.html
index 598e5cac30..7cecc06a46 100644
--- a/ej2-react/code-snippet/daterangepicker/default-cs10/index.html
+++ b/ej2-react/code-snippet/daterangepicker/default-cs10/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/daterangepicker/default-cs11/index.html b/ej2-react/code-snippet/daterangepicker/default-cs11/index.html
index 598e5cac30..7cecc06a46 100644
--- a/ej2-react/code-snippet/daterangepicker/default-cs11/index.html
+++ b/ej2-react/code-snippet/daterangepicker/default-cs11/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/daterangepicker/default-cs12/index.html b/ej2-react/code-snippet/daterangepicker/default-cs12/index.html
index 598e5cac30..7cecc06a46 100644
--- a/ej2-react/code-snippet/daterangepicker/default-cs12/index.html
+++ b/ej2-react/code-snippet/daterangepicker/default-cs12/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/daterangepicker/default-cs13/index.html b/ej2-react/code-snippet/daterangepicker/default-cs13/index.html
index 598e5cac30..7cecc06a46 100644
--- a/ej2-react/code-snippet/daterangepicker/default-cs13/index.html
+++ b/ej2-react/code-snippet/daterangepicker/default-cs13/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/daterangepicker/default-cs14/index.html b/ej2-react/code-snippet/daterangepicker/default-cs14/index.html
index 598e5cac30..7cecc06a46 100644
--- a/ej2-react/code-snippet/daterangepicker/default-cs14/index.html
+++ b/ej2-react/code-snippet/daterangepicker/default-cs14/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/daterangepicker/default-cs15/index.html b/ej2-react/code-snippet/daterangepicker/default-cs15/index.html
index 598e5cac30..7cecc06a46 100644
--- a/ej2-react/code-snippet/daterangepicker/default-cs15/index.html
+++ b/ej2-react/code-snippet/daterangepicker/default-cs15/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/daterangepicker/default-cs16/index.html b/ej2-react/code-snippet/daterangepicker/default-cs16/index.html
index 598e5cac30..7cecc06a46 100644
--- a/ej2-react/code-snippet/daterangepicker/default-cs16/index.html
+++ b/ej2-react/code-snippet/daterangepicker/default-cs16/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/daterangepicker/default-cs17/index.html b/ej2-react/code-snippet/daterangepicker/default-cs17/index.html
index 598e5cac30..7cecc06a46 100644
--- a/ej2-react/code-snippet/daterangepicker/default-cs17/index.html
+++ b/ej2-react/code-snippet/daterangepicker/default-cs17/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/daterangepicker/default-cs18/index.html b/ej2-react/code-snippet/daterangepicker/default-cs18/index.html
index 598e5cac30..7cecc06a46 100644
--- a/ej2-react/code-snippet/daterangepicker/default-cs18/index.html
+++ b/ej2-react/code-snippet/daterangepicker/default-cs18/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/daterangepicker/default-cs19/index.html b/ej2-react/code-snippet/daterangepicker/default-cs19/index.html
index 598e5cac30..7cecc06a46 100644
--- a/ej2-react/code-snippet/daterangepicker/default-cs19/index.html
+++ b/ej2-react/code-snippet/daterangepicker/default-cs19/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/daterangepicker/default-cs2/index.html b/ej2-react/code-snippet/daterangepicker/default-cs2/index.html
index 598e5cac30..7cecc06a46 100644
--- a/ej2-react/code-snippet/daterangepicker/default-cs2/index.html
+++ b/ej2-react/code-snippet/daterangepicker/default-cs2/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/daterangepicker/default-cs20/index.html b/ej2-react/code-snippet/daterangepicker/default-cs20/index.html
index 598e5cac30..7cecc06a46 100644
--- a/ej2-react/code-snippet/daterangepicker/default-cs20/index.html
+++ b/ej2-react/code-snippet/daterangepicker/default-cs20/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/daterangepicker/default-cs21/index.html b/ej2-react/code-snippet/daterangepicker/default-cs21/index.html
index 598e5cac30..7cecc06a46 100644
--- a/ej2-react/code-snippet/daterangepicker/default-cs21/index.html
+++ b/ej2-react/code-snippet/daterangepicker/default-cs21/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/daterangepicker/default-cs22/index.html b/ej2-react/code-snippet/daterangepicker/default-cs22/index.html
index 598e5cac30..7cecc06a46 100644
--- a/ej2-react/code-snippet/daterangepicker/default-cs22/index.html
+++ b/ej2-react/code-snippet/daterangepicker/default-cs22/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/daterangepicker/default-cs23/index.html b/ej2-react/code-snippet/daterangepicker/default-cs23/index.html
index 73e4e74409..f997c86a8f 100644
--- a/ej2-react/code-snippet/daterangepicker/default-cs23/index.html
+++ b/ej2-react/code-snippet/daterangepicker/default-cs23/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/daterangepicker/default-cs24/index.html b/ej2-react/code-snippet/daterangepicker/default-cs24/index.html
index 73e4e74409..f997c86a8f 100644
--- a/ej2-react/code-snippet/daterangepicker/default-cs24/index.html
+++ b/ej2-react/code-snippet/daterangepicker/default-cs24/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/daterangepicker/default-cs25/index.html b/ej2-react/code-snippet/daterangepicker/default-cs25/index.html
index 73e4e74409..f997c86a8f 100644
--- a/ej2-react/code-snippet/daterangepicker/default-cs25/index.html
+++ b/ej2-react/code-snippet/daterangepicker/default-cs25/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/daterangepicker/default-cs26/index.html b/ej2-react/code-snippet/daterangepicker/default-cs26/index.html
index 39760b667e..eb490b216e 100644
--- a/ej2-react/code-snippet/daterangepicker/default-cs26/index.html
+++ b/ej2-react/code-snippet/daterangepicker/default-cs26/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/daterangepicker/default-cs3/index.html b/ej2-react/code-snippet/daterangepicker/default-cs3/index.html
index 598e5cac30..7cecc06a46 100644
--- a/ej2-react/code-snippet/daterangepicker/default-cs3/index.html
+++ b/ej2-react/code-snippet/daterangepicker/default-cs3/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/daterangepicker/default-cs4/index.html b/ej2-react/code-snippet/daterangepicker/default-cs4/index.html
index 598e5cac30..7cecc06a46 100644
--- a/ej2-react/code-snippet/daterangepicker/default-cs4/index.html
+++ b/ej2-react/code-snippet/daterangepicker/default-cs4/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/daterangepicker/default-cs5/index.html b/ej2-react/code-snippet/daterangepicker/default-cs5/index.html
index 598e5cac30..7cecc06a46 100644
--- a/ej2-react/code-snippet/daterangepicker/default-cs5/index.html
+++ b/ej2-react/code-snippet/daterangepicker/default-cs5/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/daterangepicker/default-cs6/index.html b/ej2-react/code-snippet/daterangepicker/default-cs6/index.html
index 598e5cac30..7cecc06a46 100644
--- a/ej2-react/code-snippet/daterangepicker/default-cs6/index.html
+++ b/ej2-react/code-snippet/daterangepicker/default-cs6/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/daterangepicker/default-cs7/index.html b/ej2-react/code-snippet/daterangepicker/default-cs7/index.html
index 598e5cac30..7cecc06a46 100644
--- a/ej2-react/code-snippet/daterangepicker/default-cs7/index.html
+++ b/ej2-react/code-snippet/daterangepicker/default-cs7/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/daterangepicker/default-cs8/index.html b/ej2-react/code-snippet/daterangepicker/default-cs8/index.html
index 598e5cac30..7cecc06a46 100644
--- a/ej2-react/code-snippet/daterangepicker/default-cs8/index.html
+++ b/ej2-react/code-snippet/daterangepicker/default-cs8/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/daterangepicker/default-cs9/index.html b/ej2-react/code-snippet/daterangepicker/default-cs9/index.html
index 598e5cac30..7cecc06a46 100644
--- a/ej2-react/code-snippet/daterangepicker/default-cs9/index.html
+++ b/ej2-react/code-snippet/daterangepicker/default-cs9/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/daterangepicker/globalization-cs1/index.html b/ej2-react/code-snippet/daterangepicker/globalization-cs1/index.html
index 598e5cac30..7cecc06a46 100644
--- a/ej2-react/code-snippet/daterangepicker/globalization-cs1/index.html
+++ b/ej2-react/code-snippet/daterangepicker/globalization-cs1/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/daterangepicker/globalization-cs2/index.html b/ej2-react/code-snippet/daterangepicker/globalization-cs2/index.html
index 598e5cac30..7cecc06a46 100644
--- a/ej2-react/code-snippet/daterangepicker/globalization-cs2/index.html
+++ b/ej2-react/code-snippet/daterangepicker/globalization-cs2/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/daterangepicker/header-format-cs1/index.html b/ej2-react/code-snippet/daterangepicker/header-format-cs1/index.html
index 1da38246d1..c135c1992a 100644
--- a/ej2-react/code-snippet/daterangepicker/header-format-cs1/index.html
+++ b/ej2-react/code-snippet/daterangepicker/header-format-cs1/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/daterangepicker/rtl-cs1/index.html b/ej2-react/code-snippet/daterangepicker/rtl-cs1/index.html
index 598e5cac30..7cecc06a46 100644
--- a/ej2-react/code-snippet/daterangepicker/rtl-cs1/index.html
+++ b/ej2-react/code-snippet/daterangepicker/rtl-cs1/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/daterangepicker/rtl-cs2/index.html b/ej2-react/code-snippet/daterangepicker/rtl-cs2/index.html
index 598e5cac30..7cecc06a46 100644
--- a/ej2-react/code-snippet/daterangepicker/rtl-cs2/index.html
+++ b/ej2-react/code-snippet/daterangepicker/rtl-cs2/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/asterisk-cs1/index.html b/ej2-react/code-snippet/datetimepicker/asterisk-cs1/index.html
index 33c934401c..9741842094 100644
--- a/ej2-react/code-snippet/datetimepicker/asterisk-cs1/index.html
+++ b/ej2-react/code-snippet/datetimepicker/asterisk-cs1/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/asterisk-cs2/index.html b/ej2-react/code-snippet/datetimepicker/asterisk-cs2/index.html
index 33c934401c..9741842094 100644
--- a/ej2-react/code-snippet/datetimepicker/asterisk-cs2/index.html
+++ b/ej2-react/code-snippet/datetimepicker/asterisk-cs2/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/default-cs1/index.html b/ej2-react/code-snippet/datetimepicker/default-cs1/index.html
index 2060c7aa4c..7d70148578 100644
--- a/ej2-react/code-snippet/datetimepicker/default-cs1/index.html
+++ b/ej2-react/code-snippet/datetimepicker/default-cs1/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/default-cs10/index.html b/ej2-react/code-snippet/datetimepicker/default-cs10/index.html
index 2060c7aa4c..7d70148578 100644
--- a/ej2-react/code-snippet/datetimepicker/default-cs10/index.html
+++ b/ej2-react/code-snippet/datetimepicker/default-cs10/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/default-cs11/index.html b/ej2-react/code-snippet/datetimepicker/default-cs11/index.html
index 2060c7aa4c..7d70148578 100644
--- a/ej2-react/code-snippet/datetimepicker/default-cs11/index.html
+++ b/ej2-react/code-snippet/datetimepicker/default-cs11/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/default-cs12/index.html b/ej2-react/code-snippet/datetimepicker/default-cs12/index.html
index 2060c7aa4c..7d70148578 100644
--- a/ej2-react/code-snippet/datetimepicker/default-cs12/index.html
+++ b/ej2-react/code-snippet/datetimepicker/default-cs12/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/default-cs13/index.html b/ej2-react/code-snippet/datetimepicker/default-cs13/index.html
index 2060c7aa4c..7d70148578 100644
--- a/ej2-react/code-snippet/datetimepicker/default-cs13/index.html
+++ b/ej2-react/code-snippet/datetimepicker/default-cs13/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/default-cs14/index.html b/ej2-react/code-snippet/datetimepicker/default-cs14/index.html
index 2060c7aa4c..7d70148578 100644
--- a/ej2-react/code-snippet/datetimepicker/default-cs14/index.html
+++ b/ej2-react/code-snippet/datetimepicker/default-cs14/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/default-cs15/index.html b/ej2-react/code-snippet/datetimepicker/default-cs15/index.html
index 2060c7aa4c..7d70148578 100644
--- a/ej2-react/code-snippet/datetimepicker/default-cs15/index.html
+++ b/ej2-react/code-snippet/datetimepicker/default-cs15/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/default-cs16/index.html b/ej2-react/code-snippet/datetimepicker/default-cs16/index.html
index 2060c7aa4c..7d70148578 100644
--- a/ej2-react/code-snippet/datetimepicker/default-cs16/index.html
+++ b/ej2-react/code-snippet/datetimepicker/default-cs16/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/default-cs17/index.html b/ej2-react/code-snippet/datetimepicker/default-cs17/index.html
index 2060c7aa4c..7d70148578 100644
--- a/ej2-react/code-snippet/datetimepicker/default-cs17/index.html
+++ b/ej2-react/code-snippet/datetimepicker/default-cs17/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/default-cs18/index.html b/ej2-react/code-snippet/datetimepicker/default-cs18/index.html
index 2060c7aa4c..7d70148578 100644
--- a/ej2-react/code-snippet/datetimepicker/default-cs18/index.html
+++ b/ej2-react/code-snippet/datetimepicker/default-cs18/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/default-cs19/index.html b/ej2-react/code-snippet/datetimepicker/default-cs19/index.html
index 2060c7aa4c..7d70148578 100644
--- a/ej2-react/code-snippet/datetimepicker/default-cs19/index.html
+++ b/ej2-react/code-snippet/datetimepicker/default-cs19/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/default-cs2/index.html b/ej2-react/code-snippet/datetimepicker/default-cs2/index.html
index 2060c7aa4c..7d70148578 100644
--- a/ej2-react/code-snippet/datetimepicker/default-cs2/index.html
+++ b/ej2-react/code-snippet/datetimepicker/default-cs2/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/default-cs20/index.html b/ej2-react/code-snippet/datetimepicker/default-cs20/index.html
index 2060c7aa4c..7d70148578 100644
--- a/ej2-react/code-snippet/datetimepicker/default-cs20/index.html
+++ b/ej2-react/code-snippet/datetimepicker/default-cs20/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/default-cs21/index.html b/ej2-react/code-snippet/datetimepicker/default-cs21/index.html
index 2060c7aa4c..7d70148578 100644
--- a/ej2-react/code-snippet/datetimepicker/default-cs21/index.html
+++ b/ej2-react/code-snippet/datetimepicker/default-cs21/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/default-cs22/index.html b/ej2-react/code-snippet/datetimepicker/default-cs22/index.html
index 2060c7aa4c..7d70148578 100644
--- a/ej2-react/code-snippet/datetimepicker/default-cs22/index.html
+++ b/ej2-react/code-snippet/datetimepicker/default-cs22/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/default-cs3/index.html b/ej2-react/code-snippet/datetimepicker/default-cs3/index.html
index 2060c7aa4c..7d70148578 100644
--- a/ej2-react/code-snippet/datetimepicker/default-cs3/index.html
+++ b/ej2-react/code-snippet/datetimepicker/default-cs3/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/default-cs4/index.html b/ej2-react/code-snippet/datetimepicker/default-cs4/index.html
index 2060c7aa4c..7d70148578 100644
--- a/ej2-react/code-snippet/datetimepicker/default-cs4/index.html
+++ b/ej2-react/code-snippet/datetimepicker/default-cs4/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/default-cs5/index.html b/ej2-react/code-snippet/datetimepicker/default-cs5/index.html
index 2060c7aa4c..7d70148578 100644
--- a/ej2-react/code-snippet/datetimepicker/default-cs5/index.html
+++ b/ej2-react/code-snippet/datetimepicker/default-cs5/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/default-cs6/index.html b/ej2-react/code-snippet/datetimepicker/default-cs6/index.html
index 2060c7aa4c..7d70148578 100644
--- a/ej2-react/code-snippet/datetimepicker/default-cs6/index.html
+++ b/ej2-react/code-snippet/datetimepicker/default-cs6/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/default-cs7/index.html b/ej2-react/code-snippet/datetimepicker/default-cs7/index.html
index 2060c7aa4c..7d70148578 100644
--- a/ej2-react/code-snippet/datetimepicker/default-cs7/index.html
+++ b/ej2-react/code-snippet/datetimepicker/default-cs7/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/default-cs8/index.html b/ej2-react/code-snippet/datetimepicker/default-cs8/index.html
index 2060c7aa4c..7d70148578 100644
--- a/ej2-react/code-snippet/datetimepicker/default-cs8/index.html
+++ b/ej2-react/code-snippet/datetimepicker/default-cs8/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/default-cs9/index.html b/ej2-react/code-snippet/datetimepicker/default-cs9/index.html
index 2060c7aa4c..7d70148578 100644
--- a/ej2-react/code-snippet/datetimepicker/default-cs9/index.html
+++ b/ej2-react/code-snippet/datetimepicker/default-cs9/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/header-format-cs1/index.html b/ej2-react/code-snippet/datetimepicker/header-format-cs1/index.html
index 1da38246d1..c135c1992a 100644
--- a/ej2-react/code-snippet/datetimepicker/header-format-cs1/index.html
+++ b/ej2-react/code-snippet/datetimepicker/header-format-cs1/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/localization-cs1/index.html b/ej2-react/code-snippet/datetimepicker/localization-cs1/index.html
index 2060c7aa4c..7d70148578 100644
--- a/ej2-react/code-snippet/datetimepicker/localization-cs1/index.html
+++ b/ej2-react/code-snippet/datetimepicker/localization-cs1/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/localization-cs2/index.html b/ej2-react/code-snippet/datetimepicker/localization-cs2/index.html
index 2060c7aa4c..7d70148578 100644
--- a/ej2-react/code-snippet/datetimepicker/localization-cs2/index.html
+++ b/ej2-react/code-snippet/datetimepicker/localization-cs2/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/mask-module-cs1/index.html b/ej2-react/code-snippet/datetimepicker/mask-module-cs1/index.html
index 06e8f5f08f..1d22b30c15 100644
--- a/ej2-react/code-snippet/datetimepicker/mask-module-cs1/index.html
+++ b/ej2-react/code-snippet/datetimepicker/mask-module-cs1/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/mask-module-cs2/index.html b/ej2-react/code-snippet/datetimepicker/mask-module-cs2/index.html
index 06e8f5f08f..1d22b30c15 100644
--- a/ej2-react/code-snippet/datetimepicker/mask-module-cs2/index.html
+++ b/ej2-react/code-snippet/datetimepicker/mask-module-cs2/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/mask-module-cs3/index.html b/ej2-react/code-snippet/datetimepicker/mask-module-cs3/index.html
index 06e8f5f08f..1d22b30c15 100644
--- a/ej2-react/code-snippet/datetimepicker/mask-module-cs3/index.html
+++ b/ej2-react/code-snippet/datetimepicker/mask-module-cs3/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/mask-module-cs4/index.html b/ej2-react/code-snippet/datetimepicker/mask-module-cs4/index.html
index 06e8f5f08f..1d22b30c15 100644
--- a/ej2-react/code-snippet/datetimepicker/mask-module-cs4/index.html
+++ b/ej2-react/code-snippet/datetimepicker/mask-module-cs4/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/mask-module-cs5/index.html b/ej2-react/code-snippet/datetimepicker/mask-module-cs5/index.html
index 06e8f5f08f..1d22b30c15 100644
--- a/ej2-react/code-snippet/datetimepicker/mask-module-cs5/index.html
+++ b/ej2-react/code-snippet/datetimepicker/mask-module-cs5/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/mask-module-cs6/index.html b/ej2-react/code-snippet/datetimepicker/mask-module-cs6/index.html
index 06e8f5f08f..1d22b30c15 100644
--- a/ej2-react/code-snippet/datetimepicker/mask-module-cs6/index.html
+++ b/ej2-react/code-snippet/datetimepicker/mask-module-cs6/index.html
@@ -7,11 +7,11 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/rtl-cs1/index.html b/ej2-react/code-snippet/datetimepicker/rtl-cs1/index.html
index 2060c7aa4c..7d70148578 100644
--- a/ej2-react/code-snippet/datetimepicker/rtl-cs1/index.html
+++ b/ej2-react/code-snippet/datetimepicker/rtl-cs1/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/rtl-cs2/index.html b/ej2-react/code-snippet/datetimepicker/rtl-cs2/index.html
index 2060c7aa4c..7d70148578 100644
--- a/ej2-react/code-snippet/datetimepicker/rtl-cs2/index.html
+++ b/ej2-react/code-snippet/datetimepicker/rtl-cs2/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/timezone-cs1/index.html b/ej2-react/code-snippet/datetimepicker/timezone-cs1/index.html
index 2060c7aa4c..7d70148578 100644
--- a/ej2-react/code-snippet/datetimepicker/timezone-cs1/index.html
+++ b/ej2-react/code-snippet/datetimepicker/timezone-cs1/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/datetimepicker/timezone-cs2/index.html b/ej2-react/code-snippet/datetimepicker/timezone-cs2/index.html
index 2060c7aa4c..7d70148578 100644
--- a/ej2-react/code-snippet/datetimepicker/timezone-cs2/index.html
+++ b/ej2-react/code-snippet/datetimepicker/timezone-cs2/index.html
@@ -7,12 +7,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs1/app/index.jsx
index cf1c767ce8..b2de3336cc 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs1/app/index.jsx
@@ -1,5 +1,3 @@
-{% raw %}
-
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, Inject, DataBinding, ComplexHierarchicalTree } from "@syncfusion/ej2-react-diagrams";
@@ -67,5 +65,3 @@ export default function App() {
// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs1/app/index.tsx
index adc24887e6..31f8bf43b8 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs1/app/index.tsx
@@ -1,5 +1,3 @@
-{% raw %}
-
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, Inject, NodeModel, ConnectorModel, DataBinding,
@@ -68,5 +66,3 @@ export default function App() {
// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render();
-
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs2/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs2/app/index.jsx
index 27e1ba17bb..a96bacc80d 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs2/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs2/app/index.jsx
@@ -1,5 +1,3 @@
-{% raw %}
-
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, Inject, DataBinding, ComplexHierarchicalTree } from "@syncfusion/ej2-react-diagrams";
@@ -82,5 +80,3 @@ export default function App() {
// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs2/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs2/app/index.tsx
index 83d1369ef6..c7598c33e9 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs2/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs2/app/index.tsx
@@ -1,5 +1,3 @@
-{% raw %}
-
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, Inject, NodeModel, ConnectorModel, DataBinding,
@@ -83,5 +81,3 @@ export default function App() {
// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render();
-
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs3/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs3/app/index.jsx
index 8540b4fe52..a224377c9a 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs3/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs3/app/index.jsx
@@ -1,5 +1,3 @@
-{% raw %}
-
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, Inject, DataBinding, ComplexHierarchicalTree,
@@ -77,5 +75,3 @@ export default function App() {
// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs3/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs3/app/index.tsx
index e7944bcec6..ce67ec3221 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs3/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs3/app/index.tsx
@@ -1,5 +1,3 @@
-{% raw %}
-
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, Inject, NodeModel, ConnectorModel, DataBinding,
@@ -77,5 +75,3 @@ export default function App() {
// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render();
-
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs4/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs4/app/index.jsx
index d7f0b9d74c..95d362ead5 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs4/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs4/app/index.jsx
@@ -1,5 +1,3 @@
-{% raw %}
-
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, Inject, DataBinding, ComplexHierarchicalTree, LineDistribution,
@@ -77,5 +75,3 @@ export default function App() {
// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs4/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs4/app/index.tsx
index 41281330bc..6faee28265 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs4/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs4/app/index.tsx
@@ -1,5 +1,3 @@
-{% raw %}
-
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, Inject, NodeModel, ConnectorModel, DataBinding, ComplexHierarchicalTree,
@@ -77,5 +75,3 @@ export default function App() {
// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render();
-
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs5/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs5/app/index.jsx
index b668a56281..5460d61546 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs5/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs5/app/index.jsx
@@ -1,5 +1,3 @@
-{% raw %}
-
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, Inject, DataBinding, ComplexHierarchicalTree, LineDistribution } from "@syncfusion/ej2-react-diagrams";
@@ -73,5 +71,3 @@ export default function App() {
// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs5/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs5/app/index.tsx
index d76010ee93..c37b653b6e 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs5/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/complexhiertree-cs5/app/index.tsx
@@ -1,5 +1,3 @@
-{% raw %}
-
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, Inject, NodeModel, ConnectorModel, DataBinding, ComplexHierarchicalTree, LineDistribution } from "@syncfusion/ej2-react-diagrams";
@@ -73,5 +71,3 @@ export default function App() {
// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render();
-
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5Assistant-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/es5Assistant-cs1/app/index.jsx
index 0f6cb4f036..03fd3b9eb8 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5Assistant-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5Assistant-cs1/app/index.jsx
@@ -1,4 +1,3 @@
-{% raw %}
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, DataBinding, HierarchicalTree, } from "@syncfusion/ej2-react-diagrams";
@@ -94,4 +93,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5Assistant-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/es5Assistant-cs1/app/index.tsx
index dc334f7600..b7fb083c3e 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5Assistant-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5Assistant-cs1/app/index.tsx
@@ -1,6 +1,3 @@
-{% raw %}
-
-
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
@@ -114,6 +111,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-
-
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5GetLayoutInfo-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/es5GetLayoutInfo-cs1/app/index.jsx
index 411054bbfa..c1a40419d5 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5GetLayoutInfo-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5GetLayoutInfo-cs1/app/index.jsx
@@ -1,4 +1,3 @@
-{% raw %}
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, DataBinding, HierarchicalTree, SnapConstraints, } from "@syncfusion/ej2-react-diagrams";
@@ -88,4 +87,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5GetLayoutInfo-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/es5GetLayoutInfo-cs1/app/index.tsx
index 6f6179f2bb..e5de2d4b87 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5GetLayoutInfo-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5GetLayoutInfo-cs1/app/index.tsx
@@ -1,6 +1,3 @@
-{% raw %}
-
-
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
@@ -110,6 +107,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-
-
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5LayoutMargin-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/es5LayoutMargin-cs1/app/index.jsx
index 87eba39a09..a9668d4e23 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5LayoutMargin-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5LayoutMargin-cs1/app/index.jsx
@@ -1,4 +1,3 @@
-{% raw %}
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, HierarchicalTree, DataBinding, Rect, } from "@syncfusion/ej2-react-diagrams";
@@ -84,4 +83,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5LayoutMargin-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/es5LayoutMargin-cs1/app/index.tsx
index 4fd45acb1c..e9b3f20165 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5LayoutMargin-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5LayoutMargin-cs1/app/index.tsx
@@ -1,6 +1,3 @@
-{% raw %}
-
-
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
@@ -109,6 +106,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-
-
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5LayoutOrientation-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/es5LayoutOrientation-cs1/app/index.jsx
index ff811e1ceb..5ec010b1b2 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5LayoutOrientation-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5LayoutOrientation-cs1/app/index.jsx
@@ -1,4 +1,3 @@
-{% raw %}
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, HierarchicalTree, DataBinding, Rect, } from "@syncfusion/ej2-react-diagrams";
@@ -91,4 +90,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5LayoutOrientation-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/es5LayoutOrientation-cs1/app/index.tsx
index 1416d949ac..7025ded7f0 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5LayoutOrientation-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5LayoutOrientation-cs1/app/index.tsx
@@ -1,6 +1,3 @@
-{% raw %}
-
-
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
@@ -116,6 +113,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-
-
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5LineDistribution-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/es5LineDistribution-cs1/app/index.jsx
index 31165d850e..6b9674b914 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5LineDistribution-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5LineDistribution-cs1/app/index.jsx
@@ -1,4 +1,3 @@
-{% raw %}
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, ComplexHierarchicalTree, ConnectionPointOrigin, LineDistribution, DataBinding, } from "@syncfusion/ej2-react-diagrams";
@@ -67,4 +66,3 @@ function App() {
// Initializes the diagram
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5LineDistribution-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/es5LineDistribution-cs1/app/index.tsx
index 3c3ccefbcf..ef2d5d963a 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5LineDistribution-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5LineDistribution-cs1/app/index.tsx
@@ -1,6 +1,3 @@
-{% raw %}
-
-
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
@@ -99,6 +96,3 @@ function App() {
// Initializes the diagram
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-
-
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs1/app/index.jsx
index 22e5d7c718..e75dab55bd 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs1/app/index.jsx
@@ -1,4 +1,3 @@
-{% raw %}
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, DataBinding, MindMap, } from "@syncfusion/ej2-react-diagrams";
@@ -102,4 +101,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs1/app/index.tsx
index 00535015f3..cf30f51185 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs1/app/index.tsx
@@ -1,6 +1,3 @@
-{% raw %}
-
-
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
@@ -131,6 +128,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-
-
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs2/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs2/app/index.jsx
index f319ff9fae..c51e2f7f18 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs2/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs2/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, DataBinding, ComplexHierarchicalTree, } from "@syncfusion/ej2-react-diagrams";
@@ -140,4 +140,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs2/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs2/app/index.tsx
index d82870dee6..c108fafd8b 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs2/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs2/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
@@ -165,4 +165,3 @@ const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs3/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs3/app/index.jsx
index 5eb4c6484a..aace8fa793 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs3/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs3/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, HierarchicalTree, DataBinding, Rect, } from "@syncfusion/ej2-react-diagrams";
@@ -75,4 +75,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs3/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs3/app/index.tsx
index 4b59982ad7..0348e5b22b 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs3/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs3/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
@@ -105,4 +105,3 @@ const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs4/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs4/app/index.jsx
index 1c1dd2c6c5..6935ec72a9 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs4/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs4/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, HierarchicalTree, DataBinding, Rect, } from "@syncfusion/ej2-react-diagrams";
@@ -94,4 +94,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs4/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs4/app/index.tsx
index 0b4a3a8220..e2a109d08d 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs4/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs4/app/index.tsx
@@ -1,4 +1,3 @@
-{% raw %}
import * as React from "react";
@@ -122,4 +121,3 @@ const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs5/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs5/app/index.jsx
index abb78e5ba5..50295e3c17 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs5/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs5/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, HierarchicalTree, } from "@syncfusion/ej2-react-diagrams";
@@ -116,4 +116,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs5/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs5/app/index.tsx
index b9686224e2..e64144a332 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs5/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5Node-cs5/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
@@ -144,4 +144,3 @@ const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5OrganizationalChart-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/es5OrganizationalChart-cs1/app/index.jsx
index 9111a51691..8543a702de 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5OrganizationalChart-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5OrganizationalChart-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, DataBinding, HierarchicalTree, } from "@syncfusion/ej2-react-diagrams";
@@ -185,4 +185,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5OrganizationalChart-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/es5OrganizationalChart-cs1/app/index.tsx
index b784f98bfb..e467705d0c 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5OrganizationalChart-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5OrganizationalChart-cs1/app/index.tsx
@@ -1,4 +1,3 @@
-{% raw %}
import * as React from "react";
@@ -217,4 +216,3 @@ const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5RadialTreeLayout-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/es5RadialTreeLayout-cs1/app/index.jsx
index 42d6af8866..3cebffe116 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5RadialTreeLayout-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5RadialTreeLayout-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, DataBinding, RadialTree, } from "@syncfusion/ej2-react-diagrams";
@@ -126,4 +126,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5RadialTreeLayout-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/es5RadialTreeLayout-cs1/app/index.tsx
index 69ebc597a2..77bfda332f 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5RadialTreeLayout-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5RadialTreeLayout-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
@@ -155,4 +155,3 @@ const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5SymmetricLayout-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/es5SymmetricLayout-cs1/app/index.jsx
index 01fe58e462..53b3385c90 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5SymmetricLayout-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5SymmetricLayout-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, SymmetricLayout, } from "@syncfusion/ej2-react-diagrams";
@@ -87,4 +87,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/es5SymmetricLayout-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/es5SymmetricLayout-cs1/app/index.tsx
index d688dc6f16..b330942bf4 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/es5SymmetricLayout-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/es5SymmetricLayout-cs1/app/index.tsx
@@ -1,5 +1,3 @@
-{% raw %}
-
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -122,4 +120,3 @@ const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/esNodeTemplate-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/esNodeTemplate-cs1/app/index.jsx
index f88596dea6..eb5a3b5603 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/esNodeTemplate-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/esNodeTemplate-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, HierarchicalTree, DataBinding, Rect, } from "@syncfusion/ej2-react-diagrams";
@@ -94,4 +94,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/esNodeTemplate-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/esNodeTemplate-cs1/app/index.tsx
index 335f8909f8..9c336ab0ad 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/esNodeTemplate-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/esNodeTemplate-cs1/app/index.tsx
@@ -1,5 +1,3 @@
-{% raw %}
-
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -130,4 +128,3 @@ const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs1/app/index.jsx
index 2362279d83..3a25b43088 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs1/app/index.jsx
@@ -1,4 +1,3 @@
-{% raw %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -118,4 +117,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs1/app/index.tsx
index 9139584249..9bb56870ee 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs1/app/index.tsx
@@ -1,4 +1,3 @@
-{% raw %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -118,4 +117,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs2/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs2/app/index.jsx
index e5c31eeffd..ca08808641 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs2/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs2/app/index.jsx
@@ -1,4 +1,3 @@
-{% raw %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -73,4 +72,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs2/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs2/app/index.tsx
index e670213a3a..acfdb83b72 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs2/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs2/app/index.tsx
@@ -1,4 +1,3 @@
-{% raw %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -73,4 +72,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs3/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs3/app/index.jsx
index b54a276808..f921451234 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs3/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs3/app/index.jsx
@@ -1,4 +1,3 @@
-{% raw %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -29,6 +28,19 @@ let connectors = [
{ id: 'connector8', sourceID: '7', targetID: '8' }
];
+const layout = {
+ //Sets layout type
+ type: 'Flowchart',
+
+ //Customizes the flowchart layout
+ flowchartLayoutSettings: {
+ //Sets the yes branch direction
+ yesBranchDirection: 'SameAsFlow',
+ //Sets the no branch direction
+ noBranchDirection: 'LeftInFlow',
+ }
+};
+
export default function App() {
return (
@@ -41,18 +53,7 @@ export default function App() {
connectors={connectors}
//Uses layout to auto-arrange nodes on the diagram page
- layout={{
- //Sets layout type
- type: 'Flowchart',
-
- //Customizes the flowchart layout
- flowchartLayoutSettings: {
- //Sets the yes branch direction
- yesBranchDirection: 'SameAsFlow',
- //Sets the no branch direction
- noBranchDirection: 'LeftInFlow',
- }
- }}
+ layout={layout}
//Sets the default properties for nodes
getNodeDefaults={(node) => {
@@ -81,4 +82,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs3/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs3/app/index.tsx
index d4b1813286..be03e7eed1 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs3/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs3/app/index.tsx
@@ -1,4 +1,3 @@
-{% raw %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -28,7 +27,17 @@ let connectors: ConnectorModel[] = [
{ id: 'connector7', sourceID: '6', targetID: '8' },
{ id: 'connector8', sourceID: '7', targetID: '8' }
];
-
+const layout = {
+ //Sets layout type
+ type: 'Flowchart',
+ //Customizes the flowchart layout
+ flowchartLayoutSettings: {
+ //Sets the yes branch direction
+ yesBranchDirection: 'SameAsFlow',
+ //Sets the no branch direction
+ noBranchDirection: 'LeftInFlow',
+ }
+};
export default function App() {
return (
@@ -41,18 +50,7 @@ export default function App() {
connectors={connectors}
//Uses layout to auto-arrange nodes on the diagram page
- layout={{
- //Sets layout type
- type: 'Flowchart',
-
- //Customizes the flowchart layout
- flowchartLayoutSettings: {
- //Sets the yes branch direction
- yesBranchDirection: 'SameAsFlow',
- //Sets the no branch direction
- noBranchDirection: 'LeftInFlow',
- }
- }}
+ layout={layout}
//Sets the default properties for nodes
getNodeDefaults={(node: NodeModel) => {
@@ -81,4 +79,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs4/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs4/app/index.jsx
index 5fe37f51fd..1997d19718 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs4/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs4/app/index.jsx
@@ -1,4 +1,3 @@
-{% raw %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -22,6 +21,19 @@ let connectors = [
{ id: 'connector4', sourceID: '4', targetID: '5', },
];
+const layout = {
+ //Sets layout type
+ type: 'Flowchart',
+
+ //Customizes the flowchart layout
+ flowchartLayoutSettings: {
+ //Sets the yes branch values
+ yesBranchValues: ["Yes", "Accept"],
+ //Sets the no branch values
+ noBranchValues: ["No", "Reject"]
+ }
+};
+
export default function App() {
return (
@@ -34,18 +46,7 @@ export default function App() {
connectors={connectors}
//Uses layout to auto-arrange nodes on the diagram page
- layout={{
- //Sets layout type
- type: 'Flowchart',
-
- //Customizes the flowchart layout
- flowchartLayoutSettings: {
- //Sets the yes branch values
- yesBranchValues: ["Yes", "Accept"],
- //Sets the no branch values
- noBranchValues: ["No", "Reject"]
- }
- }}
+ layout={layout}
//Sets the default properties for nodes
getNodeDefaults={(node) => {
@@ -74,4 +75,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs4/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs4/app/index.tsx
index 6a647a67ce..ebc1e79ef9 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs4/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/flowchart-cs4/app/index.tsx
@@ -1,4 +1,3 @@
-{% raw %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -22,6 +21,18 @@ let connectors: ConnectorModel[] = [
{ id: 'connector4', sourceID: '4', targetID: '5', },
];
+const layout = {
+ //Sets layout type
+ type: 'Flowchart',
+
+ //Customizes the flowchart layout
+ flowchartLayoutSettings: {
+ //Sets the yes branch values
+ yesBranchValues: ["Yes", "Accept"],
+ //Sets the no branch values
+ noBranchValues: ["No", "Reject"]
+ }
+};
export default function App() {
return (
@@ -34,18 +45,7 @@ export default function App() {
connectors={connectors}
//Uses layout to auto-arrange nodes on the diagram page
- layout={{
- //Sets layout type
- type: 'Flowchart',
-
- //Customizes the flowchart layout
- flowchartLayoutSettings: {
- //Sets the yes branch values
- yesBranchValues: ["Yes", "Accept"],
- //Sets the no branch values
- noBranchValues: ["No", "Reject"]
- }
- }}
+ layout={layout}
//Sets the default properties for nodes
getNodeDefaults={(node: NodeModel) => {
@@ -74,4 +74,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs1/app/index.jsx
index a9f8714311..687faebae4 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs1/app/index.jsx
@@ -1,4 +1,3 @@
-{% raw %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -104,4 +103,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs1/app/index.tsx
index 7290b15e38..cfe42bcf74 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs1/app/index.tsx
@@ -1,4 +1,3 @@
-{% raw %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -106,4 +105,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs2/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs2/app/index.jsx
index dc56dcf40e..2073591584 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs2/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs2/app/index.jsx
@@ -1,4 +1,3 @@
-{% raw %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -66,4 +65,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs2/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs2/app/index.tsx
index c4baa8727d..d7c7aa1df0 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs2/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/hierarchicallayout-cs2/app/index.tsx
@@ -1,4 +1,3 @@
-{% raw %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -66,4 +65,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-alignment-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-alignment-cs1/app/index.jsx
index 7f2413e107..7f8101abb0 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-alignment-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-alignment-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -101,4 +101,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-alignment-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-alignment-cs1/app/index.tsx
index e141bfcde6..6a93a0df38 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-alignment-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-alignment-cs1/app/index.tsx
@@ -1,4 +1,3 @@
-{% raw %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -102,4 +101,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram') as HTMLElement);
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-animation-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-animation-cs1/app/index.jsx
index 047ccab026..c85cc28a46 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-animation-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-animation-cs1/app/index.jsx
@@ -1,4 +1,3 @@
-{% raw %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -72,4 +71,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-animation-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-animation-cs1/app/index.tsx
index a7aca5b322..ddba862deb 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-animation-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-animation-cs1/app/index.tsx
@@ -1,4 +1,3 @@
-{% raw %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -73,4 +72,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram') as HTMLElement);
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-bounds-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-bounds-cs1/app/index.jsx
index 61f842e746..456d35a2de 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-bounds-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-bounds-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from 'react-dom';
@@ -73,4 +73,4 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-bounds-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-bounds-cs1/app/index.tsx
index 8118c08d7e..2ba06f0efa 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-bounds-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-bounds-cs1/app/index.tsx
@@ -1,4 +1,3 @@
-{% raw %}
import * as React from "react";
import * as ReactDOM from 'react-dom';
@@ -74,4 +73,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-exclude-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-exclude-cs1/app/index.jsx
index d25e21896c..dda81a751a 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-exclude-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-exclude-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -73,4 +73,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-exclude-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-exclude-cs1/app/index.tsx
index e57b0fd0f3..2e49c8ba66 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-exclude-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-exclude-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -74,4 +74,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram') as HTMLElement);
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-expandandcollapse-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-expandandcollapse-cs1/app/index.jsx
index 6a63e9bb2d..83efc3c8f1 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-expandandcollapse-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-expandandcollapse-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -45,6 +45,25 @@ let data = [
let items = new DataManager(data, new Query().take(7));
+const layout = {
+ //Sets layout type
+ type: 'OrganizationalChart',
+
+ // define the getLayoutInfo
+ getLayoutInfo: (tree) => {
+ if (!tree.hasSubTree) {
+ tree.orientation = 'vertical';
+ tree.type = 'alternate';
+ }
+ }
+};
+
+const dataSourceSettings = {
+ id: 'Id',
+ parentId: 'ReportingPerson',
+ dataManager: items,
+};
+
export default function App() {
let diagramInstance;
@@ -59,25 +78,10 @@ export default function App() {
snapSettings={{ constraints: 0 }}
//Uses layout to auto-arrange nodes on the diagram page
- layout={{
- //Sets layout type
- type: 'OrganizationalChart',
-
- // define the getLayoutInfo
- getLayoutInfo: (tree) => {
- if (!tree.hasSubTree) {
- tree.orientation = 'vertical';
- tree.type = 'alternate';
- }
- }
- }}
+ layout={layout}
//Configures data source for diagram
- dataSourceSettings={{
- id: 'Id',
- parentId: 'ReportingPerson',
- dataManager: items,
- }}
+ dataSourceSettings={dataSourceSettings}
//Sets the default properties for nodes
getNodeDefaults={(node) => {
@@ -118,4 +122,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-expandandcollapse-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-expandandcollapse-cs1/app/index.tsx
index b415ca4a97..ce2ea8ffb2 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-expandandcollapse-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-expandandcollapse-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -46,6 +46,25 @@ let data: object[] = [
let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
+const layout = {
+ //Sets layout type
+ type: 'OrganizationalChart',
+
+ // define the getLayoutInfo
+ getLayoutInfo: (tree: TreeInfo | any) => {
+ if (!tree.hasSubTree) {
+ tree.orientation = 'vertical';
+ tree.type = 'alternate';
+ }
+ }
+};
+
+const dataSourceSettings = {
+ id: 'Id',
+ parentId: 'ReportingPerson',
+ dataManager: items,
+};
+
export default function App() {
return (
@@ -59,25 +78,10 @@ export default function App() {
snapSettings={{ constraints: 0 }}
//Uses layout to auto-arrange nodes on the diagram page
- layout={{
- //Sets layout type
- type: 'OrganizationalChart',
-
- // define the getLayoutInfo
- getLayoutInfo: (tree: TreeInfo | any) => {
- if (!tree.hasSubTree) {
- tree.orientation = 'vertical';
- tree.type = 'alternate';
- }
- }
- }}
+ layout={layout}
//Configures data source for diagram
- dataSourceSettings={{
- id: 'Id',
- parentId: 'ReportingPerson',
- dataManager: items,
- }}
+ dataSourceSettings={dataSourceSettings}
//Sets the default properties for nodes
getNodeDefaults={(node: NodeModel): NodeModel => {
@@ -118,4 +122,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram') as HTMLElement);
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-fixed-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-fixed-cs1/app/index.jsx
index e8852b1e41..3d7080897a 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-fixed-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-fixed-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -68,4 +68,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-fixed-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-fixed-cs1/app/index.tsx
index 2b41f53dcb..fa129ee782 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-fixed-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-fixed-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -69,4 +69,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram') as HTMLElement);
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-margin-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-margin-cs1/app/index.jsx
index 52a3b86c2f..81226739ad 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-margin-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-margin-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -15,6 +15,19 @@ let data = [
];
let items = new DataManager(data, new Query().take(7));
+const layout = {
+ //Sets layout type
+ type: 'HierarchicalTree',
+ //set layout margin
+ margin: { left: 100, top: 100 },
+};
+
+const dataSourceSettings = {
+ id: 'Name',
+ parentId: 'ReportingPerson',
+ dataManager: items,
+};
+
export default function App() {
return (
@@ -25,19 +38,10 @@ export default function App() {
height={'550px'}
//Uses layout to auto-arrange nodes on the diagram page
- layout={{
- //Sets layout type
- type: 'HierarchicalTree',
- //set layout margin
- margin: { left: 100, top: 100 },
- }}
+ layout={layout}
//Configures data source for diagram
- dataSourceSettings={{
- id: 'Name',
- parentId: 'ReportingPerson',
- dataManager: items,
- }}
+ dataSourceSettings={dataSourceSettings}
//Sets the default properties for nodes
getNodeDefaults={(node) => {
@@ -66,4 +70,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-margin-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-margin-cs1/app/index.tsx
index 7ce98eba63..27d88b3596 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-margin-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-margin-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -15,7 +15,17 @@ let data: object[] = [
{ Name: 'Mary-CSE ', ReportingPerson: 'Peter-Manager' },
];
let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
-
+const layout = {
+ //Sets layout type
+ type: 'HierarchicalTree',
+ //set layout margin
+ margin: { left: 100, top: 100 },
+};
+const dataSourceSettings = {
+ id: 'Name',
+ parentId: 'ReportingPerson',
+ dataManager: items,
+};
export default function App() {
return (
@@ -26,19 +36,10 @@ export default function App() {
height={'550px'}
//Uses layout to auto-arrange nodes on the diagram page
- layout={{
- //Sets layout type
- type: 'HierarchicalTree',
- //set layout margin
- margin: { left: 100, top: 100 },
- }}
+ layout={layout}
//Configures data source for diagram
- dataSourceSettings={{
- id: 'Name',
- parentId: 'ReportingPerson',
- dataManager: items,
- }}
+ dataSourceSettings={dataSourceSettings}
//Sets the default properties for nodes
getNodeDefaults={(node: NodeModel): NodeModel => {
@@ -67,4 +68,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram') as HTMLElement);
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-orientation-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-orientation-cs1/app/index.jsx
index 81ade8d4de..c3f7a1bc7e 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-orientation-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-orientation-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -66,4 +66,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-orientation-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-orientation-cs1/app/index.tsx
index d8f7f4b2e1..1527cfe7c8 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-orientation-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-orientation-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -67,4 +67,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram') as HTMLElement);
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-parentChildren-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-parentChildren-cs1/app/index.jsx
index 80b29f1254..51686c82f6 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-parentChildren-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-parentChildren-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -125,4 +125,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-parentChildren-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-parentChildren-cs1/app/index.tsx
index 310ef902bd..910a948ddf 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-parentChildren-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-parentChildren-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -125,4 +125,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram') as HTMLElement);
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-setNodeTemplete-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-setNodeTemplete-cs1/app/index.jsx
index dbdfcdb0ba..2aec333f90 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-setNodeTemplete-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-setNodeTemplete-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -107,4 +107,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-setNodeTemplete-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-setNodeTemplete-cs1/app/index.tsx
index bfa1bf9538..ccfd093144 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-setNodeTemplete-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-setNodeTemplete-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -107,4 +107,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram') as HTMLElement);
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-spacing-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-spacing-cs1/app/index.jsx
index daa58e3a07..9471cbd203 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-spacing-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-spacing-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -105,4 +105,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-spacing-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-spacing-cs1/app/index.tsx
index fe7e45ad40..78dce7a9f7 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/layout-spacing-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layout-spacing-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -104,4 +104,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram') as HTMLElement);
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs1/app/index.jsx
index c2c92137b0..d1691ce9fd 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -81,4 +81,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs1/app/index.tsx
index 6a4613186a..ff210c920d 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -81,4 +81,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram') as HTMLElement);
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs2/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs2/app/index.jsx
index 0ef5bba239..e90c988113 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs2/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs2/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -119,4 +119,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs2/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs2/app/index.tsx
index 5cb476ca7b..7212fe2dac 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs2/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/layoutEvent-cs2/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -119,4 +119,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram') as HTMLElement);
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs1/app/index.jsx
index 81c869cbe9..8f941fc571 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -18,7 +18,17 @@ let data = [
{ id: 9, Label: "Text Block", parentId: 5 },
];
let items = new DataManager(data, new Query().take(7));
-
+const layout = {
+ //Sets layout type
+ type: "MindMap",
+ orientation: "Horizontal"
+};
+const dataSourceSettings = {
+ id: "id",
+ parentId: "parentId",
+ dataManager: items,
+ root: String(1),
+};
export default function App() {
return (
{
@@ -65,4 +66,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs1/app/index.tsx
index 9b9a46d2d4..6d4b9ab00b 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -18,7 +18,17 @@ let data: object[] = [
{ id: 9, Label: "Text Block", parentId: 5 },
];
let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
-
+const layout = {
+ //Sets layout type
+ type: "MindMap",
+ orientation: "Horizontal"
+};
+const dataSourceSettings = {
+ id: "id",
+ parentId: "parentId",
+ dataManager: items,
+ root: String(1),
+};
export default function App() {
return (
{
@@ -65,4 +66,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs2/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs2/app/index.jsx
index 5d4d463157..de2980b6fc 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs2/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs2/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -19,6 +19,25 @@ let data = [
];
let items = new DataManager(data, new Query().take(7));
+const layout = {
+ //Sets layout type
+ type: "MindMap",
+ orientation: "Horizontal",
+ getBranch: (node) => {
+ if (node.data.id === 1) {
+ return 'Root';
+ }
+ return 'Right';
+ }
+};
+
+const dataSourceSettings = {
+ id: "id",
+ parentId: "parentId",
+ dataManager: items,
+ root: String(1),
+};
+
export default function App() {
return (
{
- if (node.data.id === 1) {
- return 'Root';
- }
- return 'Right';
- }
- }}
+ layout={layout}
//Configures data source for diagram
- dataSourceSettings={{
- id: "id",
- parentId: "parentId",
- dataManager: items,
- root: String(1),
- }}
+ dataSourceSettings={dataSourceSettings}
//Sets the default properties for nodes
getNodeDefaults={(node) => {
@@ -71,4 +75,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs2/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs2/app/index.tsx
index 9727d83519..c5451dcb22 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs2/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/mindMap-cs2/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -18,7 +18,23 @@ let data: object[] = [
{ id: 9, Label: "Text Block", parentId: 5 },
];
let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
-
+const layout = {
+ //Sets layout type
+ type: "MindMap",
+ orientation: "Horizontal",
+ getBranch: (node: NodeModel) => {
+ if ((node.data as any).id === 1) {
+ return 'Root';
+ }
+ return 'Right';
+ }
+};
+const dataSourceSettings = {
+ id: "id",
+ parentId: "parentId",
+ dataManager: items,
+ root: String(1),
+};
export default function App() {
return (
{
- if ((node.data as any).id === 1) {
- return 'Root';
- }
- return 'Right';
- }
- }}
+ layout={layout}
//Configures data source for diagram
- dataSourceSettings={{
- id: "id",
- parentId: "parentId",
- dataManager: items,
- root: String(1),
- }}
+ dataSourceSettings={dataSourceSettings}
//Sets the default properties for nodes
getNodeDefaults={(node: NodeModel) => {
@@ -71,4 +72,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/node.style-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/node.style-cs1/app/index.jsx
index ac99207014..54a074282e 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/node.style-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/node.style-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, HierarchicalTree, DataBinding, } from "@syncfusion/ej2-react-diagrams";
@@ -95,4 +95,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/node.style-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/node.style-cs1/app/index.tsx
index e843d1f4a9..7eb2143d53 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/node.style-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/node.style-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
@@ -116,4 +116,3 @@ const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs1/app/index.jsx
index 7edcef586d..d605f93708 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs1/app/index.jsx
@@ -1,5 +1,3 @@
-{% raw %}
-
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, Inject, DataBinding, HierarchicalTree } from "@syncfusion/ej2-react-diagrams";
@@ -156,5 +154,3 @@ export default function App() {
// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs1/app/index.tsx
index b3a233845e..43347aaf51 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs1/app/index.tsx
@@ -1,5 +1,3 @@
-{% raw %}
-
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, Inject, ConnectorModel, DataBinding, NodeModel, HierarchicalTree } from "@syncfusion/ej2-react-diagrams";
@@ -156,5 +154,3 @@ export default function App() {
// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render();
-
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs2/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs2/app/index.jsx
index 7251fee0a7..4d47b18ad4 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs2/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs2/app/index.jsx
@@ -1,5 +1,3 @@
-{% raw %}
-
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, Inject, DataBinding, HierarchicalTree } from "@syncfusion/ej2-react-diagrams";
@@ -167,5 +165,3 @@ export default function App() {
// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs2/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs2/app/index.tsx
index 8f712ef363..cf122c6155 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs2/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs2/app/index.tsx
@@ -1,5 +1,3 @@
-{% raw %}
-
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, Inject, ConnectorModel, DataBinding, NodeModel, HierarchicalTree } from "@syncfusion/ej2-react-diagrams";
@@ -168,5 +166,3 @@ export default function App() {
// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render();
-
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs3/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs3/app/index.jsx
index 884729c885..e2970c5e7a 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs3/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs3/app/index.jsx
@@ -1,5 +1,3 @@
-{% raw %}
-
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, Inject, DataBinding, HierarchicalTree } from "@syncfusion/ej2-react-diagrams";
@@ -16,6 +14,24 @@ let data = [
];
let items = new DataManager(data, new Query().take(7));
+const layout = {
+ //Sets layout type
+ type: 'OrganizationalChart',
+ // define the getLayoutInfo
+ getLayoutInfo: (node, options) => {
+ if (!options.hasSubTree) {
+ options.type = 'Center';
+ options.orientation = 'Horizontal';
+ }
+ }
+};
+
+const dataSourceSettings = {
+ id: 'Id',
+ parentId: 'Team',
+ dataSource: items
+};
+
export default function App() {
let diagramInstance;
let alignmentInstance;
@@ -50,24 +66,10 @@ export default function App() {
snapSettings={{ constraints: 0 }}
//Uses layout to auto-arrange nodes on the diagram page
- layout={{
- //Sets layout type
- type: 'OrganizationalChart',
- // define the getLayoutInfo
- getLayoutInfo: (node, options) => {
- if (!options.hasSubTree) {
- options.type = 'Center';
- options.orientation = 'Horizontal';
- }
- }
- }}
+ layout={layout}
//Configures data source for diagram
- dataSourceSettings={{
- id: 'Id',
- parentId: 'Team',
- dataSource: items
- }}
+ dataSourceSettings={dataSourceSettings}
//Sets the default properties for nodes
getNodeDefaults={(node) => {
@@ -96,5 +98,3 @@ export default function App() {
// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs3/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs3/app/index.tsx
index 3e0e67cf5c..9f79ae9b31 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs3/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs3/app/index.tsx
@@ -1,5 +1,3 @@
-{% raw %}
-
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, Inject, ConnectorModel, DataBinding, NodeModel, HierarchicalTree, SubTreeAlignments, TreeInfo, DecoratorModel } from "@syncfusion/ej2-react-diagrams";
@@ -16,6 +14,24 @@ let data: object[] = [
];
let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
+const layout = {
+ //Sets layout type
+ type: 'OrganizationalChart',
+ // define the getLayoutInfo
+ getLayoutInfo: (node: Node, options: TreeInfo) => {
+ if (!options.hasSubTree) {
+ options.type = 'Center';
+ options.orientation = 'Horizontal';
+ }
+ }
+};
+
+const dataSourceSettings = {
+ id: 'Id',
+ parentId: 'Team',
+ dataSource: items
+};
+
export default function App() {
let diagramInstance: DiagramComponent;
let alignmentInstance: HTMLSelectElement;
@@ -50,24 +66,10 @@ export default function App() {
snapSettings={{ constraints: 0 }}
//Uses layout to auto-arrange nodes on the diagram page
- layout={{
- //Sets layout type
- type: 'OrganizationalChart',
- // define the getLayoutInfo
- getLayoutInfo: (node: Node, options: TreeInfo) => {
- if (!options.hasSubTree) {
- options.type = 'Center';
- options.orientation = 'Horizontal';
- }
- }
- }}
+ layout={layout}
//Configures data source for diagram
- dataSourceSettings={{
- id: 'Id',
- parentId: 'Team',
- dataSource: items
- }}
+ dataSourceSettings={dataSourceSettings}
//Sets the default properties for nodes
getNodeDefaults={(node: NodeModel) => {
@@ -96,5 +98,3 @@ export default function App() {
// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render();
-
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs4/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs4/app/index.jsx
index 1913decb7c..fc243948cc 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs4/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs4/app/index.jsx
@@ -1,5 +1,3 @@
-{% raw %}
-
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, Inject, DataBinding, HierarchicalTree } from "@syncfusion/ej2-react-diagrams";
@@ -15,7 +13,22 @@ let data = [
{ Id: 6, Role: 'Marketing Manager', Team: 1 },
];
let items = new DataManager(data, new Query().take(7));
-
+const layout = {
+ //Sets layout type
+ type: 'OrganizationalChart',
+ // define the getLayoutInfo
+ getLayoutInfo: (node, options) => {
+ if (!options.hasSubTree) {
+ options.type = 'Left';
+ options.orientation = 'Vertical';
+ }
+ }
+};
+const dataSourceSettings = {
+ id: 'Id',
+ parentId: 'Team',
+ dataSource: items
+};
export default function App() {
let diagramInstance;
let alignmentInstance;
@@ -49,24 +62,10 @@ export default function App() {
snapSettings={{ constraints: 0 }}
//Uses layout to auto-arrange nodes on the diagram page
- layout={{
- //Sets layout type
- type: 'OrganizationalChart',
- // define the getLayoutInfo
- getLayoutInfo: (node, options) => {
- if (!options.hasSubTree) {
- options.type = 'Left';
- options.orientation = 'Vertical';
- }
- }
- }}
+ layout={layout}
//Configures data source for diagram
- dataSourceSettings={{
- id: 'Id',
- parentId: 'Team',
- dataSource: items
- }}
+ dataSourceSettings={dataSourceSettings}
//Sets the default properties for nodes
getNodeDefaults={(node) => {
@@ -95,5 +94,3 @@ export default function App() {
// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs4/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs4/app/index.tsx
index 2625df9c97..de56eb558f 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs4/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs4/app/index.tsx
@@ -1,4 +1,3 @@
-{% raw %}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -16,6 +15,23 @@ let data: object[] = [
];
let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
+const layout = {
+ //Sets layout type
+ type: 'OrganizationalChart',
+ // define the getLayoutInfo
+ getLayoutInfo: (node: Node, options: TreeInfo) => {
+ if (!options.hasSubTree) {
+ options.type = 'Left';
+ options.orientation = 'Vertical';
+ }
+ }
+};
+const dataSourceSettings = {
+ id: 'Id',
+ parentId: 'Team',
+ dataSource: items
+};
+
export default function App() {
let diagramInstance: DiagramComponent;
let alignmentInstance: HTMLSelectElement;
@@ -49,24 +65,10 @@ export default function App() {
snapSettings={{ constraints: 0 }}
//Uses layout to auto-arrange nodes on the diagram page
- layout={{
- //Sets layout type
- type: 'OrganizationalChart',
- // define the getLayoutInfo
- getLayoutInfo: (node: Node, options: TreeInfo) => {
- if (!options.hasSubTree) {
- options.type = 'Left';
- options.orientation = 'Vertical';
- }
- }
- }}
+ layout={layout}
//Configures data source for diagram
- dataSourceSettings={{
- id: 'Id',
- parentId: 'Team',
- dataSource: items
- }}
+ dataSourceSettings={dataSourceSettings}
//Sets the default properties for nodes
getNodeDefaults={(node: NodeModel) => {
@@ -95,5 +97,3 @@ export default function App() {
// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render();
-
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs5/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs5/app/index.jsx
index e8cad9fbe5..eec0f8a999 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs5/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs5/app/index.jsx
@@ -1,5 +1,3 @@
-{% raw %}
-
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, Inject, DataBinding, HierarchicalTree } from "@syncfusion/ej2-react-diagrams";
@@ -16,6 +14,28 @@ let data = [
];
let items = new DataManager(data, new Query().take(7));
+const layout = {
+ //Sets layout type
+ type: 'OrganizationalChart',
+ // define the getLayoutInfo
+ getLayoutInfo: (node, options) => {
+ if (node.data['Role'] === 'General Manager') {
+ options.assistants.push(options.children[0]);
+ options.children.splice(0, 1);
+ }
+ if (!options.hasSubTree) {
+ options.type = 'Center';
+ options.orientation = 'Horizontal';
+ }
+ }
+};
+
+const dataSourceSettings = {
+ id: 'Id',
+ parentId: 'Team',
+ dataSource: items
+};
+
export default function App() {
return (
@@ -27,28 +47,10 @@ export default function App() {
snapSettings={{ constraints: 0 }}
//Uses layout to auto-arrange nodes on the diagram page
- layout={{
- //Sets layout type
- type: 'OrganizationalChart',
- // define the getLayoutInfo
- getLayoutInfo: (node, options) => {
- if (node.data['Role'] === 'General Manager') {
- options.assistants.push(options.children[0]);
- options.children.splice(0, 1);
- }
- if (!options.hasSubTree) {
- options.type = 'Center';
- options.orientation = 'Horizontal';
- }
- }
- }}
+ layout={layout}
//Configures data source for diagram
- dataSourceSettings={{
- id: 'Id',
- parentId: 'Team',
- dataSource: items
- }}
+ dataSourceSettings={dataSourceSettings}
//Sets the default properties for nodes
getNodeDefaults={(node) => {
@@ -77,5 +79,3 @@ export default function App() {
// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs5/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs5/app/index.tsx
index cc4f9c0a06..11a0fa5891 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs5/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/organizationalchart-cs5/app/index.tsx
@@ -1,5 +1,3 @@
-{% raw %}
-
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, Inject, ConnectorModel, DataBinding, NodeModel, HierarchicalTree, TreeInfo, DecoratorModel } from "@syncfusion/ej2-react-diagrams";
@@ -16,6 +14,28 @@ let data: object[] = [
];
let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
+const layout = {
+ //Sets layout type
+ type: 'OrganizationalChart',
+ // define the getLayoutInfo
+ getLayoutInfo: (node: Node | any, options: TreeInfo) => {
+ if (node.data['Role'] === 'General Manager') {
+ (options.assistants as string[]).push((options.children as string[])[0]);
+ (options.children as string[]).splice(0, 1);
+ }
+ if (!options.hasSubTree) {
+ options.type = 'Center';
+ options.orientation = 'Horizontal';
+ }
+ }
+};
+
+const dataSourceSettings = {
+ id: 'Id',
+ parentId: 'Team',
+ dataSource: items
+};
+
export default function App() {
return (
@@ -27,28 +47,10 @@ export default function App() {
snapSettings={{ constraints: 0 }}
//Uses layout to auto-arrange nodes on the diagram page
- layout={{
- //Sets layout type
- type: 'OrganizationalChart',
- // define the getLayoutInfo
- getLayoutInfo: (node: Node | any, options: TreeInfo) => {
- if (node.data['Role'] === 'General Manager') {
- (options.assistants as string[]).push((options.children as string[])[0]);
- (options.children as string[]).splice(0, 1);
- }
- if (!options.hasSubTree) {
- options.type = 'Center';
- options.orientation = 'Horizontal';
- }
- }
- }}
+ layout={layout}
//Configures data source for diagram
- dataSourceSettings={{
- id: 'Id',
- parentId: 'Team',
- dataSource: items
- }}
+ dataSourceSettings={dataSourceSettings}
//Sets the default properties for nodes
getNodeDefaults={(node: NodeModel) => {
@@ -77,5 +79,3 @@ export default function App() {
// Render the App component into the 'diagram' element in the DOM
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render();
-
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs1/app/index.jsx
index eef9c62d3f..720ed6d2e9 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -170,4 +170,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs1/app/index.tsx
index d59eb78106..1bbee41368 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -170,4 +170,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs2/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs2/app/index.jsx
index 465f8974a2..7ecf918fcf 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs2/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs2/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -164,4 +164,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs2/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs2/app/index.tsx
index b09945ce81..9ef05f5f68 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs2/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/radiallayout-cs2/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -164,4 +164,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/symmetric-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/AutomaticLayout/symmetric-cs1/app/index.jsx
index 55717d24ed..504a192258 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/symmetric-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/symmetric-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -60,6 +60,15 @@ function populateNodes() {
//sets the layout child elements
populateNodes();
+const layout = {
+ //Sets layout type
+ type: 'SymmetricalLayout',
+ springLength: 80,
+ springFactor: 0.8,
+ maxIteration: 500,
+ margin: { left: 20, top: 20 },
+};
+
export default function App() {
return (
@@ -72,14 +81,7 @@ export default function App() {
connectors={connectors}
//Uses layout to auto-arrange nodes on the diagram page
- layout={{
- //Sets layout type
- type: 'SymmetricalLayout',
- springLength: 80,
- springFactor: 0.8,
- maxIteration: 500,
- margin: { left: 20, top: 20 },
- }}
+ layout={layout}
>
{/* Inject necessary services for the diagram */}
@@ -94,4 +96,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/AutomaticLayout/symmetric-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/AutomaticLayout/symmetric-cs1/app/index.tsx
index 6b79e27087..2494f253f1 100644
--- a/ej2-react/code-snippet/diagram/AutomaticLayout/symmetric-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/AutomaticLayout/symmetric-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -63,6 +63,15 @@ function populateNodes() {
//sets the layout child elements
populateNodes();
+const layout = {
+ //Sets layout type
+ type: 'SymmetricalLayout',
+ springLength: 80,
+ springFactor: 0.8,
+ maxIteration: 500,
+ margin: { left: 20, top: 20 },
+};
+
export default function App() {
return (
@@ -75,14 +84,7 @@ export default function App() {
connectors={connectors}
//Uses layout to auto-arrange nodes on the diagram page
- layout={{
- //Sets layout type
- type: 'SymmetricalLayout',
- springLength: 80,
- springFactor: 0.8,
- maxIteration: 500,
- margin: { left: 20, top: 20 },
- }}
+ layout={layout}
>
{/* Inject necessary services for the diagram */}
@@ -97,4 +99,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram') as HTMLElement);
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/Tools/polygon-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/Tools/polygon-cs1/app/index.jsx
index 9a528f4c12..54e20ec26c 100644
--- a/ej2-react/code-snippet/diagram/Tools/polygon-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/Tools/polygon-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -18,4 +18,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/Tools/polygon-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/Tools/polygon-cs1/app/index.tsx
index 74e7b6f80d..2d3f0237a5 100644
--- a/ej2-react/code-snippet/diagram/Tools/polygon-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/Tools/polygon-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -29,4 +29,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/Tools/polygon-cs2/app/index.jsx b/ej2-react/code-snippet/diagram/Tools/polygon-cs2/app/index.jsx
index 1dbfc721af..86cfeaf6a3 100644
--- a/ej2-react/code-snippet/diagram/Tools/polygon-cs2/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/Tools/polygon-cs2/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -23,4 +23,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/Tools/polygon-cs2/app/index.tsx b/ej2-react/code-snippet/diagram/Tools/polygon-cs2/app/index.tsx
index b8435e2327..bf7cbfc7c0 100644
--- a/ej2-react/code-snippet/diagram/Tools/polygon-cs2/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/Tools/polygon-cs2/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -35,5 +35,5 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/Tools/polygon-cs3/app/index.jsx b/ej2-react/code-snippet/diagram/Tools/polygon-cs3/app/index.jsx
index d863cea724..38ce326333 100644
--- a/ej2-react/code-snippet/diagram/Tools/polygon-cs3/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/Tools/polygon-cs3/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -42,4 +42,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/Tools/polygon-cs3/app/index.tsx b/ej2-react/code-snippet/diagram/Tools/polygon-cs3/app/index.tsx
index f9330dfc5b..bd8f61a46c 100644
--- a/ej2-react/code-snippet/diagram/Tools/polygon-cs3/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/Tools/polygon-cs3/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
@@ -61,4 +61,3 @@ root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/Tools/zoomOptions-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/Tools/zoomOptions-cs1/app/index.jsx
index bc32501211..55dbb438d2 100644
--- a/ej2-react/code-snippet/diagram/Tools/zoomOptions-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/Tools/zoomOptions-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -37,4 +37,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/Tools/zoomOptions-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/Tools/zoomOptions-cs1/app/index.tsx
index 73d3a4f8c7..b1b8f22af9 100644
--- a/ej2-react/code-snippet/diagram/Tools/zoomOptions-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/Tools/zoomOptions-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -50,5 +50,5 @@ const zoomOut = () => {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/annotations/es5AnnotationFunctionaltemplate-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/annotations/es5AnnotationFunctionaltemplate-cs1/app/index.jsx
index b92cc19255..9742ed0f06 100644
--- a/ej2-react/code-snippet/diagram/annotations/es5AnnotationFunctionaltemplate-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/annotations/es5AnnotationFunctionaltemplate-cs1/app/index.jsx
@@ -1,4 +1,3 @@
-{% raw %}
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -48,4 +47,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/annotations/es5AnnotationFunctionaltemplate-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/annotations/es5AnnotationFunctionaltemplate-cs1/app/index.tsx
index 0dfe61e4af..cf1293740c 100644
--- a/ej2-react/code-snippet/diagram/annotations/es5AnnotationFunctionaltemplate-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/annotations/es5AnnotationFunctionaltemplate-cs1/app/index.tsx
@@ -1,5 +1,3 @@
-{% raw %}
-
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -52,5 +50,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-
-{% endraw %}
diff --git a/ej2-react/code-snippet/diagram/annotations/es5Annotationtemplate-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/annotations/es5Annotationtemplate-cs1/app/index.jsx
index a442de9e6f..9a02237f4c 100644
--- a/ej2-react/code-snippet/diagram/annotations/es5Annotationtemplate-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/annotations/es5Annotationtemplate-cs1/app/index.jsx
@@ -1,4 +1,3 @@
-{% raw %}
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -48,5 +47,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/annotations/es5Annotationtemplate-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/annotations/es5Annotationtemplate-cs1/app/index.tsx
index e17e41ffd9..23952da6bc 100644
--- a/ej2-react/code-snippet/diagram/annotations/es5Annotationtemplate-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/annotations/es5Annotationtemplate-cs1/app/index.tsx
@@ -1,5 +1,3 @@
-{% raw %}
-
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -55,4 +53,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
diff --git a/ej2-react/code-snippet/diagram/annotations/es5Functionaltemplate-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/annotations/es5Functionaltemplate-cs1/app/index.jsx
index 7f9b50244e..2cc22a7314 100644
--- a/ej2-react/code-snippet/diagram/annotations/es5Functionaltemplate-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/annotations/es5Functionaltemplate-cs1/app/index.jsx
@@ -1,4 +1,3 @@
-{% raw %}
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -49,5 +48,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/annotations/es5Functionaltemplate-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/annotations/es5Functionaltemplate-cs1/app/index.tsx
index e17e41ffd9..71e22d0668 100644
--- a/ej2-react/code-snippet/diagram/annotations/es5Functionaltemplate-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/annotations/es5Functionaltemplate-cs1/app/index.tsx
@@ -1,5 +1,3 @@
-{% raw %}
-
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -54,5 +52,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-
-{% endraw %}
diff --git a/ej2-react/code-snippet/diagram/bpmnShapes/es5Text1-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/bpmnShapes/es5Text1-cs1/app/index.jsx
index 2dd0cf6d92..791e60cf98 100644
--- a/ej2-react/code-snippet/diagram/bpmnShapes/es5Text1-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/bpmnShapes/es5Text1-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -92,7 +92,7 @@ function App() {
@@ -103,4 +103,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/bpmnShapes/es5Text1-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/bpmnShapes/es5Text1-cs1/app/index.tsx
index 666ef5c4c5..c46e645da3 100644
--- a/ej2-react/code-snippet/diagram/bpmnShapes/es5Text1-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/bpmnShapes/es5Text1-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from 'react-dom';
@@ -92,7 +92,7 @@ function App() {
@@ -103,4 +103,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/commands/bringIntoView-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/commands/bringIntoView-cs1/app/index.jsx
index 0722b18c0f..eeb6dbdf75 100644
--- a/ej2-react/code-snippet/diagram/commands/bringIntoView-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/commands/bringIntoView-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -46,4 +46,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/commands/bringIntoView-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/commands/bringIntoView-cs1/app/index.tsx
index 225d352254..9c1530329b 100644
--- a/ej2-react/code-snippet/diagram/commands/bringIntoView-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/commands/bringIntoView-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -46,4 +46,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/commands/bringToCenter-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/commands/bringToCenter-cs1/app/index.jsx
index 7e6cbdc106..72354160fa 100644
--- a/ej2-react/code-snippet/diagram/commands/bringToCenter-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/commands/bringToCenter-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -43,4 +43,4 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/commands/bringToCenter-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/commands/bringToCenter-cs1/app/index.tsx
index 316bb10b77..2f34f400e8 100644
--- a/ej2-react/code-snippet/diagram/commands/bringToCenter-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/commands/bringToCenter-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -43,4 +43,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/commands/customCommand-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/commands/customCommand-cs1/app/index.jsx
index 89f2d7c0c8..b25a378cc3 100644
--- a/ej2-react/code-snippet/diagram/commands/customCommand-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/commands/customCommand-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -16,6 +16,42 @@ let node = [
},
];
+const commandManager = {
+ commands: [
+ {
+ name: 'clone',
+ canExecute: function () {
+ return diagramInstance.selectedItems.nodes.length > 0;
+ },
+ execute: function () {
+ diagramInstance.copy();
+ diagramInstance.paste();
+ },
+ gesture: {
+ // Press G to clone node
+ key: Keys.G,
+ keyModifiers: null,
+ },
+ },
+ {
+ name: 'color',
+ canExecute: function () {
+ return diagramInstance.selectedItems.nodes.length > 0;
+ },
+ execute: function () {
+ const node = diagramInstance.selectedItems.nodes[0];
+ node.style.fill = node.style.fill === '#64abbb' ? 'yellow' : '#64abbb';
+ diagramInstance.dataBind();
+ },
+ gesture: {
+ // Press Shift+G or Alt+G to change node color
+ key: Keys.G,
+ keyModifiers: KeyModifiers.Shift | KeyModifiers.Alt,
+ },
+ },
+ ],
+};
+
// Initializes the Diagram component
function App() {
return (
@@ -26,41 +62,7 @@ function App() {
width={'650px'}
height={'350px'}
nodes={node}
- commandManager={{
- commands: [
- {
- name: 'clone',
- canExecute: function () {
- return diagramInstance.selectedItems.nodes.length > 0;
- },
- execute: function () {
- diagramInstance.copy();
- diagramInstance.paste();
- },
- gesture: {
- // Press G to clone node
- key: Keys.G,
- keyModifiers: null,
- },
- },
- {
- name: 'color',
- canExecute: function () {
- return diagramInstance.selectedItems.nodes.length > 0;
- },
- execute: function () {
- const node = diagramInstance.selectedItems.nodes[0];
- node.style.fill = node.style.fill === '#64abbb' ? 'yellow' : '#64abbb';
- diagramInstance.dataBind();
- },
- gesture: {
- // Press Shift+G or Alt+G to change node color
- key: Keys.G,
- keyModifiers: KeyModifiers.Shift | KeyModifiers.Alt,
- },
- },
- ],
- }}
+ commandManager={commandManager}
/>
);
}
@@ -68,4 +70,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/commands/customCommand-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/commands/customCommand-cs1/app/index.tsx
index f495a7c66c..f88e3119bc 100644
--- a/ej2-react/code-snippet/diagram/commands/customCommand-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/commands/customCommand-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -16,6 +16,42 @@ let node:NodeModel[] = [
},
];
+const commandManager = {
+ commands: [
+ {
+ name: 'clone',
+ canExecute: function () {
+ return diagramInstance.selectedItems.nodes.length > 0;
+ },
+ execute: function () {
+ diagramInstance.copy();
+ diagramInstance.paste();
+ },
+ gesture: {
+ // Press G to clone node
+ key: Keys.G,
+ keyModifiers: null,
+ },
+ },
+ {
+ name: 'color',
+ canExecute: function () {
+ return diagramInstance.selectedItems.nodes.length > 0;
+ },
+ execute: function () {
+ const node = diagramInstance.selectedItems.nodes[0];
+ node.style.fill = node.style.fill === '#64abbb' ? 'yellow' : '#64abbb';
+ diagramInstance.dataBind();
+ },
+ gesture: {
+ // Press Shift+G or Alt+G to change node color
+ key: Keys.G,
+ keyModifiers: KeyModifiers.Shift | KeyModifiers.Alt,
+ },
+ },
+ ],
+};
+
// Initializes the Diagram component
function App() {
return (
@@ -26,41 +62,7 @@ function App() {
width={'650px'}
height={'350px'}
nodes={node}
- commandManager={{
- commands: [
- {
- name: 'clone',
- canExecute: function () {
- return diagramInstance.selectedItems.nodes.length > 0;
- },
- execute: function () {
- diagramInstance.copy();
- diagramInstance.paste();
- },
- gesture: {
- // Press G to clone node
- key: Keys.G,
- keyModifiers: null,
- },
- },
- {
- name: 'color',
- canExecute: function () {
- return diagramInstance.selectedItems.nodes.length > 0;
- },
- execute: function () {
- const node = diagramInstance.selectedItems.nodes[0];
- node.style.fill = node.style.fill === '#64abbb' ? 'yellow' : '#64abbb';
- diagramInstance.dataBind();
- },
- gesture: {
- // Press Shift+G or Alt+G to change node color
- key: Keys.G,
- keyModifiers: KeyModifiers.Shift | KeyModifiers.Alt,
- },
- },
- ],
- }}
+ commandManager={commandManager}
/>
);
}
@@ -68,4 +70,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/commands/fitToPage-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/commands/fitToPage-cs1/app/index.jsx
index f796a7ddb1..747b5beeb2 100644
--- a/ej2-react/code-snippet/diagram/commands/fitToPage-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/commands/fitToPage-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -975,6 +975,24 @@ const fitToHeight = function () {
});
}
+
+const layout = {
+ type: 'OrganizationalChart',
+ margin: { top: 20 },
+ getLayoutInfo: (node, tree) => {
+ if (!tree.hasSubTree) {
+ tree.orientation = 'Vertical';
+ tree.type = 'Alternate';
+ }
+ },
+};
+
+const dataSourceSettings = {
+ id: 'Id',
+ parentId: 'ReportingPerson',
+ dataSource: items,
+};
+
//Initializes the Diagram component
function App() {
return (
@@ -983,22 +1001,8 @@ function App() {
(diagramInstance = diagram)} width={'1250px'} height={'590px'}
- layout={{
- type: 'OrganizationalChart',
- margin: { top: 20 },
- getLayoutInfo: (node, tree) => {
- if (!tree.hasSubTree) {
- tree.orientation = 'Vertical';
- tree.type = 'Alternate';
- }
- },
- }}
- dataSourceSettings={{
- id: 'Id',
- parentId: 'ReportingPerson',
- dataSource: items,
- }
- }
+ layout={layout}
+ dataSourceSettings={dataSourceSettings}
getNodeDefaults={(obj) => {
obj.height = 50;
obj.backgroundColor = 'lightgrey';
@@ -1018,4 +1022,4 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/commands/fitToPage-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/commands/fitToPage-cs1/app/index.tsx
index dd5aebc258..71ecd551f1 100644
--- a/ej2-react/code-snippet/diagram/commands/fitToPage-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/commands/fitToPage-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -975,6 +975,21 @@ const fitToHeight = function () {
});
}
+const layout = {
+ type: 'OrganizationalChart',
+ margin: { top: 20 },
+ getLayoutInfo: (node:Node, tree:TreeInfo) => {
+ if (!tree.hasSubTree) {
+ tree.orientation = 'Vertical';
+ tree.type = 'Alternate';
+ }
+ },
+};
+const dataSourceSettings = {
+ id: 'Id',
+ parentId: 'ReportingPerson',
+ dataSource: items,
+};
//Initializes the Diagram component
function App() {
return (
@@ -983,22 +998,8 @@ function App() {
(diagramInstance = diagram)} width={'1250px'} height={'590px'}
- layout={{
- type: 'OrganizationalChart',
- margin: { top: 20 },
- getLayoutInfo: (node:Node, tree:TreeInfo) => {
- if (!tree.hasSubTree) {
- tree.orientation = 'Vertical';
- tree.type = 'Alternate';
- }
- },
- }}
- dataSourceSettings={{
- id: 'Id',
- parentId: 'ReportingPerson',
- dataSource: items,
- }
- }
+ layout={layout}
+ dataSourceSettings={dataSourceSettings}
getNodeDefaults={(obj: NodeModel) => {
obj.height = 50;
obj.backgroundColor = 'lightgrey';
@@ -1018,4 +1019,4 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/commands/modifyCommand-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/commands/modifyCommand-cs1/app/index.jsx
index 061d3f5a54..1d380fddf2 100644
--- a/ej2-react/code-snippet/diagram/commands/modifyCommand-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/commands/modifyCommand-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -16,6 +16,51 @@ let node = [
},
];
+const commandManager = {
+ commands: [
+ {
+ //Preventing default cut command
+ name: 'cut',
+ canExecute: function () {
+ return false;
+ },
+ execute: null,
+ gesture: {
+ key: Keys.X,
+ keyModifiers: KeyModifiers.Control,
+ },
+ },
+ {
+ //Preventing default delete command
+ name: 'delete',
+ canExecute: function () {
+ return false;
+ },
+ execute: null,
+ gesture: {
+ key: Keys.Delete,
+ },
+ },
+ {
+ //Modifying copy command to clone node
+ name: 'clone',
+ canExecute: function () {
+ let execute = diagramInstance.selectedItems.nodes.length > 0;
+ return execute;
+ },
+ execute: function () {
+ diagramInstance.copy();
+ diagramInstance.paste();
+ },
+ gesture: {
+ //Press CTRL+C to clone node
+ key: Keys.C,
+ keyModifiers: KeyModifiers.Control,
+ },
+ },
+ ],
+};
+
// Initializes the Diagram component
function App() {
return (
@@ -26,50 +71,7 @@ function App() {
width={'650px'}
height={'350px'}
nodes={node}
- commandManager={{
- commands: [
- {
- //Preventing default cut command
- name: 'cut',
- canExecute: function () {
- return false;
- },
- execute: null,
- gesture: {
- key: Keys.X,
- keyModifiers: KeyModifiers.Control,
- },
- },
- {
- //Preventing default delete command
- name: 'delete',
- canExecute: function () {
- return false;
- },
- execute: null,
- gesture: {
- key: Keys.Delete,
- },
- },
- {
- //Modifying copy command to clone node
- name: 'clone',
- canExecute: function () {
- let execute = diagramInstance.selectedItems.nodes.length > 0;
- return execute;
- },
- execute: function () {
- diagramInstance.copy();
- diagramInstance.paste();
- },
- gesture: {
- //Press CTRL+C to clone node
- key: Keys.C,
- keyModifiers: KeyModifiers.Control,
- },
- },
- ],
- }}
+ commandManager={commandManager}
/>
);
}
@@ -77,4 +79,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/commands/modifyCommand-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/commands/modifyCommand-cs1/app/index.tsx
index f2df71631b..cada1a1642 100644
--- a/ej2-react/code-snippet/diagram/commands/modifyCommand-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/commands/modifyCommand-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -16,6 +16,51 @@ let node:NodeModel[] = [
},
];
+const commandManager = {
+ commands: [
+ {
+ //Preventing default cut command
+ name: 'cut',
+ canExecute: function () {
+ return false;
+ },
+ execute: null,
+ gesture: {
+ key: Keys.X,
+ keyModifiers: KeyModifiers.Control,
+ },
+ },
+ {
+ //Preventing default delete command
+ name: 'delete',
+ canExecute: function () {
+ return false;
+ },
+ execute: null,
+ gesture: {
+ key: Keys.Delete,
+ },
+ },
+ {
+ //Modifying copy command to clone node
+ name: 'clone',
+ canExecute: function () {
+ let execute = diagramInstance.selectedItems.nodes.length > 0;
+ return execute;
+ },
+ execute: function () {
+ diagramInstance.copy();
+ diagramInstance.paste();
+ },
+ gesture: {
+ //Press CTRL+C to clone node
+ key: Keys.C,
+ keyModifiers: KeyModifiers.Control,
+ },
+ },
+ ],
+};
+
// Initializes the Diagram component
function App() {
return (
@@ -26,50 +71,7 @@ function App() {
width={'650px'}
height={'350px'}
nodes={node}
- commandManager={{
- commands: [
- {
- //Preventing default cut command
- name: 'cut',
- canExecute: function () {
- return false;
- },
- execute: null,
- gesture: {
- key: Keys.X,
- keyModifiers: KeyModifiers.Control,
- },
- },
- {
- //Preventing default delete command
- name: 'delete',
- canExecute: function () {
- return false;
- },
- execute: null,
- gesture: {
- key: Keys.Delete,
- },
- },
- {
- //Modifying copy command to clone node
- name: 'clone',
- canExecute: function () {
- let execute = diagramInstance.selectedItems.nodes.length > 0;
- return execute;
- },
- execute: function () {
- diagramInstance.copy();
- diagramInstance.paste();
- },
- gesture: {
- //Press CTRL+C to clone node
- key: Keys.C,
- keyModifiers: KeyModifiers.Control,
- },
- },
- ],
- }}
+ commandManager={commandManager}
/>
);
}
@@ -77,4 +79,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/connectors/es5Connectorfrompalette-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/connectors/es5Connectorfrompalette-cs1/app/index.jsx
index 8253986e39..8cc54e3031 100644
--- a/ej2-react/code-snippet/diagram/connectors/es5Connectorfrompalette-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/connectors/es5Connectorfrompalette-cs1/app/index.jsx
@@ -49,7 +49,7 @@ let App = () => {
]}
/>
diff --git a/ej2-react/code-snippet/diagram/connectors/es5Connectorfrompalette-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/connectors/es5Connectorfrompalette-cs1/app/index.tsx
index 9ba3aae66d..7c36ea46ba 100644
--- a/ej2-react/code-snippet/diagram/connectors/es5Connectorfrompalette-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/connectors/es5Connectorfrompalette-cs1/app/index.tsx
@@ -49,7 +49,7 @@ let App = () => {
]}
/>
diff --git a/ej2-react/code-snippet/diagram/connectors/es5Connectorsport-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/connectors/es5Connectorsport-cs1/app/index.tsx
index 8b949c3c09..eced2f9c43 100644
--- a/ej2-react/code-snippet/diagram/connectors/es5Connectorsport-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/connectors/es5Connectorsport-cs1/app/index.tsx
@@ -63,6 +63,7 @@ let nodes: NodeModel[] = [{
];
let connectors: ConnectorModel[] = [{
id: "connector1",
+ type:'Orthogonal',
sourceID: 'node',
targetID: 'node1',
sourcePortID: 'port1',
diff --git a/ej2-react/code-snippet/diagram/connectors/es5MaxSegThump-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/connectors/es5MaxSegThump-cs1/app/index.jsx
index 91ce63d7a0..e1f0c45e98 100644
--- a/ej2-react/code-snippet/diagram/connectors/es5MaxSegThump-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/connectors/es5MaxSegThump-cs1/app/index.jsx
@@ -1,6 +1,7 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
-import { DiagramComponent ,ConnectorConstraints} from "@syncfusion/ej2-react-diagrams";
+import { DiagramComponent, Diagram, ConnectorEditing, ConnectorConstraints } from "@syncfusion/ej2-react-diagrams";
+Diagram.Inject(ConnectorEditing);
let connectors = [{
id: "connector1",
@@ -19,7 +20,8 @@ let connectors = [{
targetPoint: {
x: 200,
y: 200
- }
+ },
+ constraints:ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
},
{
id: "connector2",
diff --git a/ej2-react/code-snippet/diagram/connectors/es5MaxSegThump-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/connectors/es5MaxSegThump-cs1/app/index.tsx
index 79ef63ece3..cdefbec3be 100644
--- a/ej2-react/code-snippet/diagram/connectors/es5MaxSegThump-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/connectors/es5MaxSegThump-cs1/app/index.tsx
@@ -1,6 +1,7 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
-import { DiagramComponent ,ConnectorConstraints, ConnectorModel} from "@syncfusion/ej2-react-diagrams";
+import { DiagramComponent, Diagram, ConnectorEditing, ConnectorConstraints, ConnectorModel } from "@syncfusion/ej2-react-diagrams";
+Diagram.Inject(ConnectorEditing);
let connectors:ConnectorModel [] = [{
id: "connector1",
@@ -19,7 +20,8 @@ let connectors:ConnectorModel [] = [{
targetPoint: {
x: 200,
y: 200
- }
+ },
+ constraints:ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb,
},
{
id: "connector2",
diff --git a/ej2-react/code-snippet/diagram/constraints/constraints-cs5/app/index.jsx b/ej2-react/code-snippet/diagram/constraints/constraints-cs5/app/index.jsx
index c96b0a41d0..4cbb76075e 100644
--- a/ej2-react/code-snippet/diagram/constraints/constraints-cs5/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/constraints/constraints-cs5/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from "react-dom";
@@ -41,4 +41,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/constraints/constraints-cs5/app/index.tsx b/ej2-react/code-snippet/diagram/constraints/constraints-cs5/app/index.tsx
index 565b73a5a3..b2eab30537 100644
--- a/ej2-react/code-snippet/diagram/constraints/constraints-cs5/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/constraints/constraints-cs5/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from "react-dom";
@@ -42,4 +42,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/constraints/constraints-cs6/app/index.jsx b/ej2-react/code-snippet/diagram/constraints/constraints-cs6/app/index.jsx
index 583ad490f1..7d2b0569c7 100644
--- a/ej2-react/code-snippet/diagram/constraints/constraints-cs6/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/constraints/constraints-cs6/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from "react-dom";
@@ -47,4 +47,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/constraints/constraints-cs7/app/index.jsx b/ej2-react/code-snippet/diagram/constraints/constraints-cs7/app/index.jsx
index 7c43f88c58..e52c144115 100644
--- a/ej2-react/code-snippet/diagram/constraints/constraints-cs7/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/constraints/constraints-cs7/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from "react-dom";
@@ -42,4 +42,3 @@ const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/constraints/constraints-cs7/app/index.tsx b/ej2-react/code-snippet/diagram/constraints/constraints-cs7/app/index.tsx
index 847ca2ccb7..9043535e3e 100644
--- a/ej2-react/code-snippet/diagram/constraints/constraints-cs7/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/constraints/constraints-cs7/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from "react-dom";
@@ -41,4 +41,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs1/app/index.jsx
index c7c6cd6ddb..d6c084dc44 100644
--- a/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -42,4 +42,4 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs1/app/index.tsx
index 05266b7c3a..59195ce22c 100644
--- a/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -42,4 +42,4 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs2/app/index.jsx b/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs2/app/index.jsx
index de244a8adb..adb85668d8 100644
--- a/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs2/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs2/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -22,51 +22,51 @@ let node = [{
annotations: [{id: 'label2',content: 'Rectangle2'}],
}
];
-
+const contextMenuSettings = {
+ //Enables the context menu
+ show: true,
+ items: [
+ {
+ // Text to be displayed
+ text: 'Fill',
+ items: [
+ { id: 'red', text: 'Red' },
+ { id: 'yellow', text: 'Yellow' },
+ { id: 'green', text: 'Green' },
+ { id: 'blue', text: 'Blue' },
+ ],
+ //Sets the id for the item
+ id: 'fill',
+ target: '.e-elementcontent',
+ // Sets the css icons for the item
+ iconCss: 'e-icons e-paint-bucket',
+ },
+ {
+ text: 'Annotation color',
+ id: 'annotationColor',
+ items: [
+ { id: 'pink', text: 'Pink' },
+ { id: 'orange', text: 'Orange' },
+ { id: 'violet', text: 'Violet' },
+ { id: 'brown', text: 'Brown' },
+ ],
+ target: '.e-elementcontent',
+ iconCss: 'e-icons e-font-color',
+ },
+ {
+ text: 'Clone',
+ id: 'clone',
+ target: '.e-elementcontent',
+ iconCss: 'e-icons e-copy',
+ },
+ ],
+ // Hides the default context menu items
+ showCustomMenuOnly: true,
+};
//Initializes the Diagram component
function App() {
return ( (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node}
- contextMenuSettings={{
- //Enables the context menu
- show: true,
- items: [
- {
- // Text to be displayed
- text: 'Fill',
- items: [
- { id: 'red', text: 'Red' },
- { id: 'yellow', text: 'Yellow' },
- { id: 'green', text: 'Green' },
- { id: 'blue', text: 'Blue' },
- ],
- //Sets the id for the item
- id: 'fill',
- target: '.e-elementcontent',
- // Sets the css icons for the item
- iconCss: 'e-icons e-paint-bucket',
- },
- {
- text: 'Annotation color',
- id: 'annotationColor',
- items: [
- { id: 'pink', text: 'Pink' },
- { id: 'orange', text: 'Orange' },
- { id: 'violet', text: 'Violet' },
- { id: 'brown', text: 'Brown' },
- ],
- target: '.e-elementcontent',
- iconCss: 'e-icons e-font-color',
- },
- {
- text: 'Clone',
- id: 'clone',
- target: '.e-elementcontent',
- iconCss: 'e-icons e-copy',
- },
- ],
- // Hides the default context menu items
- showCustomMenuOnly: true,
- }}
+ contextMenuSettings={contextMenuSettings}
contextMenuClick={(args) => {
let selectedNode = diagramInstance.selectedItems.nodes[0];
@@ -99,4 +99,4 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs2/app/index.tsx b/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs2/app/index.tsx
index 613cbeba09..e87f512815 100644
--- a/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs2/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs2/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -24,50 +24,52 @@ let node: NodeModel[] = [{
}
];
+const contextMenuSettings = {
+ //Enables the context menu
+ show: true,
+ items: [
+ {
+ // Text to be displayed
+ text: 'Fill',
+ items: [
+ { id: 'red', text: 'Red' },
+ { id: 'yellow', text: 'Yellow' },
+ { id: 'green', text: 'Green' },
+ { id: 'blue', text: 'Blue' },
+ ],
+ //Sets the id for the item
+ id: 'fill',
+ target: '.e-elementcontent',
+ // Sets the css icons for the item
+ iconCss: 'e-icons e-paint-bucket',
+ },
+ {
+ text: 'Annotation color',
+ id: 'annotationColor',
+ items: [
+ { id: 'pink', text: 'Pink' },
+ { id: 'orange', text: 'Orange' },
+ { id: 'violet', text: 'Violet' },
+ { id: 'brown', text: 'Brown' },
+ ],
+ target: '.e-elementcontent',
+ iconCss: 'e-icons e-font-color',
+ },
+ {
+ text: 'Clone',
+ id: 'clone',
+ target: '.e-elementcontent',
+ iconCss: 'e-icons e-copy',
+ },
+ ],
+ // Hides the default context menu items
+ showCustomMenuOnly: true,
+};
+
//Initializes the Diagram component
function App() {
return ( (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node}
- contextMenuSettings={{
- //Enables the context menu
- show: true,
- items: [
- {
- // Text to be displayed
- text: 'Fill',
- items: [
- { id: 'red', text: 'Red' },
- { id: 'yellow', text: 'Yellow' },
- { id: 'green', text: 'Green' },
- { id: 'blue', text: 'Blue' },
- ],
- //Sets the id for the item
- id: 'fill',
- target: '.e-elementcontent',
- // Sets the css icons for the item
- iconCss: 'e-icons e-paint-bucket',
- },
- {
- text: 'Annotation color',
- id: 'annotationColor',
- items: [
- { id: 'pink', text: 'Pink' },
- { id: 'orange', text: 'Orange' },
- { id: 'violet', text: 'Violet' },
- { id: 'brown', text: 'Brown' },
- ],
- target: '.e-elementcontent',
- iconCss: 'e-icons e-font-color',
- },
- {
- text: 'Clone',
- id: 'clone',
- target: '.e-elementcontent',
- iconCss: 'e-icons e-copy',
- },
- ],
- // Hides the default context menu items
- showCustomMenuOnly: true,
- }}
+ contextMenuSettings={contextMenuSettings}
contextMenuClick={(args: MenuEventArgs) => {
let selectedNode = diagramInstance.selectedItems.nodes[0];
@@ -100,4 +102,4 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs3/app/index.jsx b/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs3/app/index.jsx
index 19ca25baca..d8ed590749 100644
--- a/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs3/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs3/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -31,34 +31,36 @@ let connectors = [
},
];
+const contextMenuSettings = {
+ //Enables the context menu
+ show: true,
+ items: [
+ {
+ text: 'Change fill',
+ id: 'applyFill',
+ target: '.e-diagramcontent',
+ iconCss: 'e-icons e-paint-bucket',
+ },
+ {
+ text: 'Change stroke',
+ id: 'applyStroke',
+ target: '.e-diagramcontent',
+ iconCss: 'e-icons e-edit',
+ },
+ {
+ text: 'Select All',
+ id: 'selectAll',
+ target: '.e-diagramcontent',
+ },
+ ],
+ // Hides the default context menu items
+ showCustomMenuOnly: true,
+};
+
//Initializes the Diagram component
function App() {
return ( (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node} connectors={connectors}
- contextMenuSettings={{
- //Enables the context menu
- show: true,
- items: [
- {
- text: 'Change fill',
- id: 'applyFill',
- target: '.e-diagramcontent',
- iconCss: 'e-icons e-paint-bucket',
- },
- {
- text: 'Change stroke',
- id: 'applyStroke',
- target: '.e-diagramcontent',
- iconCss: 'e-icons e-edit',
- },
- {
- text: 'Select All',
- id: 'selectAll',
- target: '.e-diagramcontent',
- },
- ],
- // Hides the default context menu items
- showCustomMenuOnly: true,
- }}
+ contextMenuSettings={contextMenuSettings}
contextMenuOpen= {(args) =>{
@@ -109,4 +111,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs3/app/index.tsx b/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs3/app/index.tsx
index c0c1ec5740..33b6d11ec5 100644
--- a/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs3/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs3/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -32,34 +32,36 @@ let connectors: ConnectorModel[]= [
},
];
+const contextMenuSettings = {
+ //Enables the context menu
+ show: true,
+ items: [
+ {
+ text: 'Change fill',
+ id: 'applyFill',
+ target: '.e-diagramcontent',
+ iconCss: 'e-icons e-paint-bucket',
+ },
+ {
+ text: 'Change stroke',
+ id: 'applyStroke',
+ target: '.e-diagramcontent',
+ iconCss: 'e-icons e-edit',
+ },
+ {
+ text: 'Select All',
+ id: 'selectAll',
+ target: '.e-diagramcontent',
+ },
+ ],
+ // Hides the default context menu items
+ showCustomMenuOnly: true,
+};
+
//Initializes the Diagram component
function App() {
return ( (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node} connectors={connectors}
- contextMenuSettings={{
- //Enables the context menu
- show: true,
- items: [
- {
- text: 'Change fill',
- id: 'applyFill',
- target: '.e-diagramcontent',
- iconCss: 'e-icons e-paint-bucket',
- },
- {
- text: 'Change stroke',
- id: 'applyStroke',
- target: '.e-diagramcontent',
- iconCss: 'e-icons e-edit',
- },
- {
- text: 'Select All',
- id: 'selectAll',
- target: '.e-diagramcontent',
- },
- ],
- // Hides the default context menu items
- showCustomMenuOnly: true,
- }}
+ contextMenuSettings={contextMenuSettings}
contextMenuOpen= {(args: DiagramBeforeMenuOpenEventArgs) =>{
@@ -110,4 +112,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs4/app/index.jsx b/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs4/app/index.jsx
index 403d7506bc..cadb811e4e 100644
--- a/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs4/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs4/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -58,4 +58,4 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs4/app/index.tsx b/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs4/app/index.tsx
index 7f00bd0ea2..6e26c8f5c3 100644
--- a/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs4/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/contextmenu/contextmenu-cs4/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -58,4 +58,4 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/contextmenu/es5events-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/contextmenu/es5events-cs1/app/index.jsx
index 28cee6b8d9..6272fc7dfc 100644
--- a/ej2-react/code-snippet/diagram/contextmenu/es5events-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/contextmenu/es5events-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -28,24 +28,26 @@ let node = [{
annotations: [{id: 'label2', content: 'Rectangle2'}]
}];
+const contextMenuSettings = {
+ //Enables the context menu
+ show: true,
+ items: [
+ {
+ text: 'menu item 1',
+ id: 'item1',
+ },
+ {
+ text: 'menu item 2',
+ id: 'item2',
+ },
+ ],
+ // Hides the default context menu items
+ showCustomMenuOnly: true,
+};
+
//Initializes the Diagram component
function App() {
- return ( (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node} connectors={connector} contextMenuSettings={{
- //Enables the context menu
- show: true,
- items: [
- {
- text: 'menu item 1',
- id: 'item1',
- },
- {
- text: 'menu item 2',
- id: 'item2',
- },
- ],
- // Hides the default context menu items
- showCustomMenuOnly: true,
- }}
+ return ( (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node} connectors={connector} contextMenuSettings={contextMenuSettings}
contextMenuBeforeItemRender={(args) => {
//Triggers when the menu is openned
console.log('context menu before item render');
@@ -65,4 +67,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/contextmenu/es5events-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/contextmenu/es5events-cs1/app/index.tsx
index 80e0605853..ad34a44f73 100644
--- a/ej2-react/code-snippet/diagram/contextmenu/es5events-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/contextmenu/es5events-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -30,24 +30,26 @@ let node: NodeModel[] = [{
annotations: [{id: 'label2', content: 'Rectangle2'}]
}];
+const contextMenuSettings = {
+ //Enables the context menu
+ show: true,
+ items: [
+ {
+ text: 'menu item 1',
+ id: 'item1',
+ },
+ {
+ text: 'menu item 2',
+ id: 'item2',
+ },
+ ],
+ // Hides the default context menu items
+ showCustomMenuOnly: true,
+};
+
//Initializes the Diagram component
function App() {
- return ( (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node} connectors={connector} contextMenuSettings={{
- //Enables the context menu
- show: true,
- items: [
- {
- text: 'menu item 1',
- id: 'item1',
- },
- {
- text: 'menu item 2',
- id: 'item2',
- },
- ],
- // Hides the default context menu items
- showCustomMenuOnly: true,
- }}
+ return ( (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node} connectors={connector} contextMenuSettings={contextMenuSettings}
contextMenuBeforeItemRender={(args: MenuEventArgs) => {
//Triggers when the menu is openned
console.log('context menu before item render');
@@ -67,4 +69,4 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/contextmenu/es5menutemplate-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/contextmenu/es5menutemplate-cs1/app/index.jsx
index a44ca45fd9..13bb94f43e 100644
--- a/ej2-react/code-snippet/diagram/contextmenu/es5menutemplate-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/contextmenu/es5menutemplate-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -23,36 +23,38 @@ let node = [{
offsetY: 100,
annotations: [{id: 'label2',content: 'Rectangle2'}]
}];
-
+
+const contextMenuSettings = {
+ //Enables the context menu
+ show: true,
+ items: [
+ {
+ text: 'Cut',
+ id: 'Cut',
+ target: '.e-diagramcontent',
+ iconCss: 'e-cut e-icons',
+ },
+ {
+ text: 'Copy',
+ id: 'Copy',
+ target: '.e-diagramcontent',
+ iconCss: 'e-icons e-copy',
+ },
+ {
+ text: 'Paste',
+ id: 'Paste',
+ target: '.e-diagramcontent',
+ iconCss: 'e-icons e-paste',
+ },
+ ],
+ // Hides the default context menu items
+ showCustomMenuOnly: true,
+};
+
//Initializes the Diagram component
function App() {
return ( (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node}
- contextMenuSettings={{
- //Enables the context menu
- show: true,
- items: [
- {
- text: 'Cut',
- id: 'Cut',
- target: '.e-diagramcontent',
- iconCss: 'e-cut e-icons',
- },
- {
- text: 'Copy',
- id: 'Copy',
- target: '.e-diagramcontent',
- iconCss: 'e-icons e-copy',
- },
- {
- text: 'Paste',
- id: 'Paste',
- target: '.e-diagramcontent',
- iconCss: 'e-icons e-paste',
- },
- ],
- // Hides the default context menu items
- showCustomMenuOnly: true,
- }}
+ contextMenuSettings={contextMenuSettings}
contextMenuBeforeItemRender= {(args) =>{
// To render template in li.
let shortCutSpan = createElement('span');
@@ -85,4 +87,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/contextmenu/es5menutemplate-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/contextmenu/es5menutemplate-cs1/app/index.tsx
index 6922f19aa1..9fa3cfee94 100644
--- a/ej2-react/code-snippet/diagram/contextmenu/es5menutemplate-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/contextmenu/es5menutemplate-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -24,36 +24,38 @@ let node: NodeModel[] = [{
offsetY: 100,
annotations: [{id: 'label2',content: 'Rectangle2'}]
}];
+
+const contextMenuSettings = {
+ //Enables the context menu
+ show: true,
+ items: [
+ {
+ text: 'Cut',
+ id: 'Cut',
+ target: '.e-diagramcontent',
+ iconCss: 'e-cut e-icons',
+ },
+ {
+ text: 'Copy',
+ id: 'Copy',
+ target: '.e-diagramcontent',
+ iconCss: 'e-icons e-copy',
+ },
+ {
+ text: 'Paste',
+ id: 'Paste',
+ target: '.e-diagramcontent',
+ iconCss: 'e-icons e-paste',
+ },
+ ],
+ // Hides the default context menu items
+ showCustomMenuOnly: true,
+};
//Initializes the Diagram component
function App() {
return ( (diagramInstance = diagram)} width={'650px'} height={'350px'} nodes={node}
- contextMenuSettings={{
- //Enables the context menu
- show: true,
- items: [
- {
- text: 'Cut',
- id: 'Cut',
- target: '.e-diagramcontent',
- iconCss: 'e-cut e-icons',
- },
- {
- text: 'Copy',
- id: 'Copy',
- target: '.e-diagramcontent',
- iconCss: 'e-icons e-copy',
- },
- {
- text: 'Paste',
- id: 'Paste',
- target: '.e-diagramcontent',
- iconCss: 'e-icons e-paste',
- },
- ],
- // Hides the default context menu items
- showCustomMenuOnly: true,
- }}
+ contextMenuSettings={contextMenuSettings}
contextMenuBeforeItemRender= {(args: MenuEventArgs) =>{
// To render template in li.
let shortCutSpan = createElement('span');
@@ -86,4 +88,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/dataBinding/es5LocalBinding-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/dataBinding/es5LocalBinding-cs1/app/index.jsx
index a4ac5823f0..1c10225fa0 100644
--- a/ej2-react/code-snippet/diagram/dataBinding/es5LocalBinding-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/dataBinding/es5LocalBinding-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DataBinding, HierarchicalTree, DiagramTools, Inject } from "@syncfusion/ej2-react-diagrams";
@@ -26,51 +26,53 @@ let species = [
{ 'Name': 'Birds', 'Category': 'Vertebrates' },
{ 'Name': 'Mammals', 'Category': 'Vertebrates' }
];
+const layout = {
+ type: 'HierarchicalTree',
+ horizontalSpacing: 15,
+ verticalSpacing: 50,
+ margin: {
+ top: 10,
+ left: 10,
+ right: 10,
+ bottom: 0,
+ },
+};
+const dataSourceSettings = {
+ id: 'Name',
+ parentId: 'Category',
+ dataManager: new DataManager(species),
+ //binds the external data with node
+ doBinding: (nodeModel, data, diagram) => {
+ nodeModel.annotations = [
+ {
+ /* tslint:disable:no-string-literal */
+ content: data['Name'],
+ margin: {
+ top: 10,
+ left: 10,
+ right: 10,
+ bottom: 0,
+ },
+ style: {
+ color: 'black',
+ },
+ },
+ ];
+ /* tslint:disable:no-string-literal */
+ nodeModel.style = {
+ fill: '#ffeec7',
+ strokeColor: '#f5d897',
+ strokeWidth: 1,
+ };
+ },
+};
//Initializes diagram control
function App() {
return ( {
- nodeModel.annotations = [
- {
- /* tslint:disable:no-string-literal */
- content: data['Name'],
- margin: {
- top: 10,
- left: 10,
- right: 10,
- bottom: 0,
- },
- style: {
- color: 'black',
- },
- },
- ];
- /* tslint:disable:no-string-literal */
- nodeModel.style = {
- fill: '#ffeec7',
- strokeColor: '#f5d897',
- strokeWidth: 1,
- };
- },
- }}
+ dataSourceSettings={dataSourceSettings}
//Configrues HierarchicalTree layout
- layout={{
- type: 'HierarchicalTree',
- horizontalSpacing: 15,
- verticalSpacing: 50,
- margin: {
- top: 10,
- left: 10,
- right: 10,
- bottom: 0,
- },
- }}
+ layout={layout}
//Sets the default values of nodes
getNodeDefaults={(obj, diagram) => {
//Initialize shape
@@ -91,12 +93,9 @@ function App() {
connector.targetDecorator.shape = 'None';
}}
//Disables all interactions except zoom/pan
- tool={DiagramTools.ZoomPan} snapSettings={{
- constraints: 0,
- }}>
+ tool={DiagramTools.ZoomPan} snapSettings={{ constraints: 0 }}>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/dataBinding/es5LocalBinding-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/dataBinding/es5LocalBinding-cs1/app/index.tsx
index 7cdd6c8110..85cd057469 100644
--- a/ej2-react/code-snippet/diagram/dataBinding/es5LocalBinding-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/dataBinding/es5LocalBinding-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
@@ -41,6 +41,46 @@ let species: object[] = [
{ 'Name': 'Birds', 'Category': 'Vertebrates' },
{ 'Name': 'Mammals', 'Category': 'Vertebrates' }
];
+const layout = {
+ type: 'HierarchicalTree',
+ horizontalSpacing: 15,
+ verticalSpacing: 50,
+ margin: {
+ top: 10,
+ left: 10,
+ right: 10,
+ bottom: 0,
+ },
+};
+const dataSourceSettings = {
+ id: 'Name',
+ parentId: 'Category',
+ dataManager: new DataManager(species),
+ //binds the external data with node
+ doBinding: (nodeModel: NodeModel, data: DataInfo, diagram: Diagram) => {
+ nodeModel.annotations = [
+ {
+ /* tslint:disable:no-string-literal */
+ content: data['Name'],
+ margin: {
+ top: 10,
+ left: 10,
+ right: 10,
+ bottom: 0,
+ },
+ style: {
+ color: 'black',
+ },
+ },
+ ];
+ /* tslint:disable:no-string-literal */
+ nodeModel.style = {
+ fill: '#ffeec7',
+ strokeColor: '#f5d897',
+ strokeWidth: 1,
+ };
+ },
+};
//Initializes diagram control
function App() {
return (
@@ -49,47 +89,9 @@ function App() {
width={'100%'}
height={490}
//Configures data source
- dataSourceSettings={{
- id: 'Name',
- parentId: 'Category',
- dataManager: new DataManager(species),
- //binds the external data with node
- doBinding: (nodeModel: NodeModel, data: DataInfo, diagram: Diagram) => {
- nodeModel.annotations = [
- {
- /* tslint:disable:no-string-literal */
- content: data['Name'],
- margin: {
- top: 10,
- left: 10,
- right: 10,
- bottom: 0,
- },
- style: {
- color: 'black',
- },
- },
- ];
- /* tslint:disable:no-string-literal */
- nodeModel.style = {
- fill: '#ffeec7',
- strokeColor: '#f5d897',
- strokeWidth: 1,
- };
- },
- }}
+ dataSourceSettings={dataSourceSettings}
//Configrues HierarchicalTree layout
- layout={{
- type: 'HierarchicalTree',
- horizontalSpacing: 15,
- verticalSpacing: 50,
- margin: {
- top: 10,
- left: 10,
- right: 10,
- bottom: 0,
- },
- }}
+ layout={layout}
//Sets the default values of nodes
getNodeDefaults={(obj: Node, diagram: Diagram) => {
//Initialize shape
@@ -111,9 +113,7 @@ function App() {
}}
//Disables all interactions except zoom/pan
tool={DiagramTools.ZoomPan}
- snapSettings={{
- constraints: 0,
- }}
+ snapSettings={{ constraints: 0 }}
>
@@ -132,4 +132,3 @@ export interface DataInfo {
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/dataBinding/es5RemoteBinding-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/dataBinding/es5RemoteBinding-cs1/app/index.jsx
index c03c4a95d9..35bb16ede5 100644
--- a/ej2-react/code-snippet/diagram/dataBinding/es5RemoteBinding-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/dataBinding/es5RemoteBinding-cs1/app/index.jsx
@@ -1,35 +1,56 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DataBinding, HierarchicalTree, DiagramTools, Inject } from "@syncfusion/ej2-react-diagrams";
import { DataManager, Query } from '@syncfusion/ej2-data';
+
+const layout = {
+ type: 'HierarchicalTree',
+ margin: {
+ left: 0,
+ right: 0,
+ top: 100,
+ bottom: 0,
+ },
+ verticalSpacing: 40,
+ getLayoutInfo: (node, options) => {
+ if (options.level === 3) {
+ node.style.fill = '#3c418d';
+ }
+ if (options.level === 2) {
+ node.style.fill = '#108d8d';
+ options.type = 'Center';
+ options.orientation = 'Horizontal';
+ }
+ if (options.level === 1) {
+ node.style.fill = '#822b86';
+ }
+ },
+};
+
+const dataSourceSettings = {
+ id: "Id",
+ parentId: "ParentId",
+ dataSource: new DataManager({
+ url: "https://services.syncfusion.com/react/production/api/RemoteData",
+ crossDomain: true
+ }),
+ //binds the external data with node
+ doBinding: (nodeModel, data, diagram) => {
+ nodeModel.annotations = [
+ {
+ /* tslint:disable:no-string-literal */
+ content: data["Label"],
+ style: { color: "white" }
+ }
+ ];
+ }
+};
+
//Initializes diagram control
function App() {
return ( {
- if (options.level === 3) {
- node.style.fill = '#3c418d';
- }
- if (options.level === 2) {
- node.style.fill = '#108d8d';
- options.type = 'Center';
- options.orientation = 'Horizontal';
- }
- if (options.level === 1) {
- node.style.fill = '#822b86';
- }
- },
- }}
+ layout={layout}
//Sets the default values of nodes
getNodeDefaults={(obj) => {
obj.width = 80;
@@ -51,24 +72,7 @@ function App() {
connector.targetDecorator.shape = 'None';
}}
//Configures data source
- dataSourceSettings={{
- id: "Id",
- parentId: "ParentId",
- dataSource: new DataManager({
- url: "https://services.syncfusion.com/react/production/api/RemoteData",
- crossDomain: true
- }),
- //binds the external data with node
- doBinding: (nodeModel, data, diagram) => {
- nodeModel.annotations = [
- {
- /* tslint:disable:no-string-literal */
- content: data["Label"],
- style: { color: "white" }
- }
- ];
- }
- }}
+ dataSourceSettings={dataSourceSettings}
//Disables all interactions except zoom/pan
tool={DiagramTools.ZoomPan} snapSettings={{
constraints: 0,
@@ -78,4 +82,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/dataBinding/es5RemoteBinding-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/dataBinding/es5RemoteBinding-cs1/app/index.tsx
index 989eb59fcd..ef1b29dd44 100644
--- a/ej2-react/code-snippet/diagram/dataBinding/es5RemoteBinding-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/dataBinding/es5RemoteBinding-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
@@ -21,8 +21,50 @@ import {
Query
} from '@syncfusion/ej2-data';
-//Initializes diagram control
+const layout = {
+ type: 'HierarchicalTree',
+ margin: {
+ left: 0,
+ right: 0,
+ top: 100,
+ bottom: 0,
+ },
+ verticalSpacing: 40,
+ getLayoutInfo: (node: Node, options: TreeInfo) => {
+ if (options.level === 3) {
+ node.style.fill = '#3c418d';
+ }
+ if (options.level === 2) {
+ node.style.fill = '#108d8d';
+ options.type = 'Center';
+ options.orientation = 'Horizontal';
+ }
+ if (options.level === 1) {
+ node.style.fill = '#822b86';
+ }
+ },
+};
+const dataSourceSettings = {
+ id: "Id",
+ parentId: "ParentId",
+ dataSource: new DataManager({
+ url: "https://services.syncfusion.com/react/production/api/RemoteData",
+ crossDomain: true
+ }),
+ //binds the external data with node
+ doBinding: (nodeModel: NodeModel, data: DataInfo, diagram: Diagram) => {
+ nodeModel.annotations = [
+ {
+ /* tslint:disable:no-string-literal */
+ content: data["Label"],
+ style: { color: "white" }
+ }
+ ];
+ }
+};
+
+//Initializes diagram control
function App() {
return (
{
- if (options.level === 3) {
- node.style.fill = '#3c418d';
- }
- if (options.level === 2) {
- node.style.fill = '#108d8d';
- options.type = 'Center';
- options.orientation = 'Horizontal';
- }
- if (options.level === 1) {
- node.style.fill = '#822b86';
- }
- },
- }}
+ layout={layout}
//Sets the default values of nodes
getNodeDefaults={(obj: NodeModel) => {
obj.width = 80;
@@ -74,24 +94,7 @@ function App() {
connector.targetDecorator.shape = 'None';
}}
//Configures data source
- dataSourceSettings={{
- id: "Id",
- parentId: "ParentId",
- dataSource: new DataManager({
- url: "https://services.syncfusion.com/react/production/api/RemoteData",
- crossDomain: true
- }),
- //binds the external data with node
- doBinding: (nodeModel: NodeModel, data: DataInfo, diagram: Diagram) => {
- nodeModel.annotations = [
- {
- /* tslint:disable:no-string-literal */
- content: data["Label"],
- style: { color: "white" }
- }
- ];
- }
- }}
+ dataSourceSettings={dataSourceSettings}
//Disables all interactions except zoom/pan
tool={DiagramTools.ZoomPan}
snapSettings={{
@@ -111,4 +114,3 @@ export interface DataInfo {
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/dataBinding/es5connectionDataSource-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/dataBinding/es5connectionDataSource-cs1/app/index.jsx
index a66a5c618b..9cf684227e 100644
--- a/ej2-react/code-snippet/diagram/dataBinding/es5connectionDataSource-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/dataBinding/es5connectionDataSource-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef } from "react";
@@ -91,38 +91,42 @@ const App = () => {
return connector;
};
+ const layout = {
+ type: "OrganizationalChart",
+ verticalSpacing: 100,
+ getLayoutInfo: (node, options) => {
+ if (!options.hasSubTree) {
+ options.orientation = "Horizontal";
+ }
+ },
+ };
+
+ const dataSourceSettings = {
+ id: "id",
+ parentId: "ParentId",
+ dataSource: dataModify,
+ crudAction: {
+ customFields: ["Id", "Description", "Color"],
+ },
+ connectionDataSource: {
+ id: "id",
+ sourceID: "sourceID",
+ targetID: "targetID",
+ crudAction: {
+ customFields: ["srcPortID", "targetPortID"],
+ },
+ dataManager: designConnectors(),
+ },
+ };
+
return (
{
- if (!options.hasSubTree) {
- options.orientation = "Horizontal";
- }
- },
- }}
- dataSourceSettings={{
- id: "id",
- parentId: "ParentId",
- dataSource: dataModify,
- crudAction: {
- customFields: ["Id", "Description", "Color"],
- },
- connectionDataSource: {
- id: "id",
- sourceID: "sourceID",
- targetID: "targetID",
- crudAction: {
- customFields: ["srcPortID", "targetPortID"],
- },
- dataManager: designConnectors(),
- },
- }}
+ layout={layout}
+ dataSourceSettings={dataSourceSettings}
getNodeDefaults={getNodeDefaults}
getConnectorDefaults={getConnectorDefaults}
>
@@ -133,4 +137,3 @@ const App = () => {
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/dataBinding/es5connectionDataSource-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/dataBinding/es5connectionDataSource-cs1/app/index.tsx
index a66a5c618b..9cf684227e 100644
--- a/ej2-react/code-snippet/diagram/dataBinding/es5connectionDataSource-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/dataBinding/es5connectionDataSource-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef } from "react";
@@ -91,38 +91,42 @@ const App = () => {
return connector;
};
+ const layout = {
+ type: "OrganizationalChart",
+ verticalSpacing: 100,
+ getLayoutInfo: (node, options) => {
+ if (!options.hasSubTree) {
+ options.orientation = "Horizontal";
+ }
+ },
+ };
+
+ const dataSourceSettings = {
+ id: "id",
+ parentId: "ParentId",
+ dataSource: dataModify,
+ crudAction: {
+ customFields: ["Id", "Description", "Color"],
+ },
+ connectionDataSource: {
+ id: "id",
+ sourceID: "sourceID",
+ targetID: "targetID",
+ crudAction: {
+ customFields: ["srcPortID", "targetPortID"],
+ },
+ dataManager: designConnectors(),
+ },
+ };
+
return (
{
- if (!options.hasSubTree) {
- options.orientation = "Horizontal";
- }
- },
- }}
- dataSourceSettings={{
- id: "id",
- parentId: "ParentId",
- dataSource: dataModify,
- crudAction: {
- customFields: ["Id", "Description", "Color"],
- },
- connectionDataSource: {
- id: "id",
- sourceID: "sourceID",
- targetID: "targetID",
- crudAction: {
- customFields: ["srcPortID", "targetPortID"],
- },
- dataManager: designConnectors(),
- },
- }}
+ layout={layout}
+ dataSourceSettings={dataSourceSettings}
getNodeDefaults={getNodeDefaults}
getConnectorDefaults={getConnectorDefaults}
>
@@ -133,4 +137,3 @@ const App = () => {
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/export/export-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/export/export-cs1/app/index.jsx
index bf0dc669e1..f54da28aad 100644
--- a/ej2-react/code-snippet/diagram/export/export-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/export/export-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -67,4 +67,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/export/export-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/export/export-cs1/app/index.tsx
index 76020539d9..cb3e831883 100644
--- a/ej2-react/code-snippet/diagram/export/export-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/export/export-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -68,4 +68,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/export/export-cs2/app/index.jsx b/ej2-react/code-snippet/diagram/export/export-cs2/app/index.jsx
index c6652dcc66..57cb2dc0a0 100644
--- a/ej2-react/code-snippet/diagram/export/export-cs2/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/export/export-cs2/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -60,4 +60,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/export/export-cs2/app/index.tsx b/ej2-react/code-snippet/diagram/export/export-cs2/app/index.tsx
index 9f47ef1b11..73aab56240 100644
--- a/ej2-react/code-snippet/diagram/export/export-cs2/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/export/export-cs2/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -61,4 +61,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/export/export-cs3/app/index.jsx b/ej2-react/code-snippet/diagram/export/export-cs3/app/index.jsx
index f1edacd7fe..fa8ac808fb 100644
--- a/ej2-react/code-snippet/diagram/export/export-cs3/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/export/export-cs3/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -76,4 +76,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/export/export-cs3/app/index.tsx b/ej2-react/code-snippet/diagram/export/export-cs3/app/index.tsx
index 248093ce7a..cc72f8035f 100644
--- a/ej2-react/code-snippet/diagram/export/export-cs3/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/export/export-cs3/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -76,4 +76,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/export/export-cs4/app/index.jsx b/ej2-react/code-snippet/diagram/export/export-cs4/app/index.jsx
index 2e960e035f..5e9aaf5155 100644
--- a/ej2-react/code-snippet/diagram/export/export-cs4/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/export/export-cs4/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -67,4 +67,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/export/export-cs4/app/index.tsx b/ej2-react/code-snippet/diagram/export/export-cs4/app/index.tsx
index 2dbb516369..a991122317 100644
--- a/ej2-react/code-snippet/diagram/export/export-cs4/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/export/export-cs4/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -68,4 +68,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/getting-started/flowdiagram-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/getting-started/flowdiagram-cs1/app/index.jsx
index 2be9ab2b8b..a73c622bff 100644
--- a/ej2-react/code-snippet/diagram/getting-started/flowdiagram-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/getting-started/flowdiagram-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -133,4 +133,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/getting-started/flowdiagram-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/getting-started/flowdiagram-cs1/app/index.tsx
index 5d2eb6aca0..95e890f0c1 100644
--- a/ej2-react/code-snippet/diagram/getting-started/flowdiagram-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/getting-started/flowdiagram-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
@@ -151,4 +151,3 @@ const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLEleme
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/getting-started/orgchart-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/getting-started/orgchart-cs1/app/index.jsx
index 1fc2348a75..6a9f3e6408 100644
--- a/ej2-react/code-snippet/diagram/getting-started/orgchart-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/getting-started/orgchart-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
@@ -70,4 +70,3 @@ export default function App() {
}
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/getting-started/orgchart-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/getting-started/orgchart-cs1/app/index.tsx
index d60066f490..b0f305c432 100644
--- a/ej2-react/code-snippet/diagram/getting-started/orgchart-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/getting-started/orgchart-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
@@ -96,4 +96,3 @@ const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLEleme
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/gridLines/es5LineIntervals-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/gridLines/es5LineIntervals-cs1/app/index.tsx
index 595db78ce7..a4851f006c 100644
--- a/ej2-react/code-snippet/diagram/gridLines/es5LineIntervals-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/gridLines/es5LineIntervals-cs1/app/index.tsx
@@ -4,58 +4,29 @@ import * as React from "react";
import * as ReactDOM from "react-dom";
import {
Diagram,
- NodeModel,
DiagramComponent,
SnapSettingsModel,
SnapConstraints,
- GridlinesModel,
Snapping,
} from "@syncfusion/ej2-react-diagrams";
Diagram.Inject(Snapping);
-let interval: number[];
-// Sets the lineIntervals of Gridlines
-interval = [
- 1,
- 9,
- 0.25,
- 9.75,
- 0.25,
- 9.75,
- 0.25,
- 9.75,
- 0.25,
- 9.75,
- 0.25,
- 9.75,
- 0.25,
- 9.75,
- 0.25,
- 9.75,
- 0.25,
- 9.75,
- 0.25,
- 9.75
-];
-let gridlines: GridlinesModel = {
- lineColor: 'blue',
- lineDashArray: '2 2',
- lineIntervals: interval
-};
let snapSettings: SnapSettingsModel = {
- constraints: SnapConstraints.ShowLines,
- horizontalGridlines: gridlines,
- verticalGridlines: gridlines
+ 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',
+ }
};
// initialize Diagram component
function App() {
- return (
-
- );
+ return ();
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
diff --git a/ej2-react/code-snippet/diagram/interaction/es5ConnectorFixedUserHandle-cs2/app/index.jsx b/ej2-react/code-snippet/diagram/interaction/es5ConnectorFixedUserHandle-cs2/app/index.jsx
index 8bf68c5acd..83176ba824 100644
--- a/ej2-react/code-snippet/diagram/interaction/es5ConnectorFixedUserHandle-cs2/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/interaction/es5ConnectorFixedUserHandle-cs2/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, SelectorConstraints, NodeConstraints } from "@syncfusion/ej2-react-diagrams";
@@ -29,4 +29,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/interaction/es5ConnectorFixedUserHandle-cs2/app/index.tsx b/ej2-react/code-snippet/diagram/interaction/es5ConnectorFixedUserHandle-cs2/app/index.tsx
index 02f285ca53..82e62e95ea 100644
--- a/ej2-react/code-snippet/diagram/interaction/es5ConnectorFixedUserHandle-cs2/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/interaction/es5ConnectorFixedUserHandle-cs2/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
@@ -50,4 +50,3 @@ root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/interaction/es5FixedUserHandleTemplate-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/interaction/es5FixedUserHandleTemplate-cs1/app/index.jsx
index 79fa0a989c..ad3dd671ab 100644
--- a/ej2-react/code-snippet/diagram/interaction/es5FixedUserHandleTemplate-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/interaction/es5FixedUserHandleTemplate-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -61,4 +61,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/interaction/es5FixedUserHandleTemplate-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/interaction/es5FixedUserHandleTemplate-cs1/app/index.tsx
index 0c87026302..a7c3cd87f7 100644
--- a/ej2-react/code-snippet/diagram/interaction/es5FixedUserHandleTemplate-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/interaction/es5FixedUserHandleTemplate-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -70,5 +70,5 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/interaction/es5MultipleUserHandle-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/interaction/es5MultipleUserHandle-cs1/app/index.jsx
index 7cfed9e214..021a0b232f 100644
--- a/ej2-react/code-snippet/diagram/interaction/es5MultipleUserHandle-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/interaction/es5MultipleUserHandle-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -119,4 +119,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/interaction/es5MultipleUserHandle-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/interaction/es5MultipleUserHandle-cs1/app/index.tsx
index 2089a55bde..523b7bbd35 100644
--- a/ej2-react/code-snippet/diagram/interaction/es5MultipleUserHandle-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/interaction/es5MultipleUserHandle-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -126,6 +126,6 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs1/app/index.jsx
index b05c8f9ea1..8f8ed0fc8e 100644
--- a/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, MoveTool, SelectorConstraints, randomId, cloneObject } from "@syncfusion/ej2-react-diagrams";
@@ -70,4 +70,3 @@ class CloneTool extends MoveTool {
this.inAction = true;
}
}
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs1/app/index.tsx
index abef96a9eb..89033c423a 100644
--- a/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -109,5 +109,5 @@ class CloneTool extends MoveTool {
}
}
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs2/app/index.jsx b/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs2/app/index.jsx
index 4a67338fe3..8631850cf4 100644
--- a/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs2/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs2/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -47,4 +47,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs2/app/index.tsx b/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs2/app/index.tsx
index a5fc79e9ea..0faec2639b 100644
--- a/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs2/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs2/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -54,6 +54,6 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs3/app/index.jsx b/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs3/app/index.jsx
index 2057db705e..66d84d5890 100644
--- a/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs3/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs3/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -25,4 +25,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs3/app/index.tsx b/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs3/app/index.tsx
index 51ac655cdf..e80ab1fdd2 100644
--- a/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs3/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs3/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -31,6 +31,6 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs4/app/index.jsx b/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs4/app/index.jsx
index 10c8500ad7..aa2c3ff19c 100644
--- a/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs4/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs4/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -34,4 +34,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs4/app/index.tsx b/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs4/app/index.tsx
index ce83bdae05..b19dd01dc5 100644
--- a/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs4/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs4/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -41,6 +41,6 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs5/app/index.jsx b/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs5/app/index.jsx
index fe2c2af620..d3198af12b 100644
--- a/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs5/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs5/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -40,4 +40,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs5/app/index.tsx b/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs5/app/index.tsx
index f26b660ee1..ba19e66d7f 100644
--- a/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs5/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs5/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -47,6 +47,6 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs6/app/index.jsx b/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs6/app/index.jsx
index 89e45d197e..4d566882e1 100644
--- a/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs6/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs6/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -37,4 +37,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs6/app/index.tsx b/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs6/app/index.tsx
index db1a5cb062..fc813a4038 100644
--- a/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs6/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/interaction/es5UserHandle-cs6/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -44,6 +44,6 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/interaction/es5UserHandleEvents-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/interaction/es5UserHandleEvents-cs1/app/index.jsx
index a0176ccc0a..0e0fdb6936 100644
--- a/ej2-react/code-snippet/diagram/interaction/es5UserHandleEvents-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/interaction/es5UserHandleEvents-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -70,4 +70,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/interaction/es5UserHandleEvents-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/interaction/es5UserHandleEvents-cs1/app/index.tsx
index 8d229d8ccc..8249754c1e 100644
--- a/ej2-react/code-snippet/diagram/interaction/es5UserHandleEvents-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/interaction/es5UserHandleEvents-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -78,6 +78,6 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/interaction/es5UserHandleTypes-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/interaction/es5UserHandleTypes-cs1/app/index.jsx
index 4a672c83a6..f4b77fcb86 100644
--- a/ej2-react/code-snippet/diagram/interaction/es5UserHandleTypes-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/interaction/es5UserHandleTypes-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -69,5 +69,5 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/interaction/es5UserHandleTypes-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/interaction/es5UserHandleTypes-cs1/app/index.tsx
index 3d2fc0fb4e..50179df63f 100644
--- a/ej2-react/code-snippet/diagram/interaction/es5UserHandleTypes-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/interaction/es5UserHandleTypes-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -77,6 +77,6 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/interaction/interaction-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/interaction/interaction-cs1/app/index.jsx
index f67f16e256..5cd428a7f7 100644
--- a/ej2-react/code-snippet/diagram/interaction/interaction-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/interaction/interaction-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -35,4 +35,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/interaction/interaction-cs3/app/index.jsx b/ej2-react/code-snippet/diagram/interaction/interaction-cs3/app/index.jsx
index 61d3105bea..463cab28f1 100644
--- a/ej2-react/code-snippet/diagram/interaction/interaction-cs3/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/interaction/interaction-cs3/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -23,4 +23,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/interaction/interaction-cs3/app/index.tsx b/ej2-react/code-snippet/diagram/interaction/interaction-cs3/app/index.tsx
index 8dd09be6c1..6b162a2243 100644
--- a/ej2-react/code-snippet/diagram/interaction/interaction-cs3/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/interaction/interaction-cs3/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -36,4 +36,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/localization/es5localeContextMenu-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/localization/es5localeContextMenu-cs1/app/index.jsx
index 0630c3175b..618c9bdaca 100644
--- a/ej2-react/code-snippet/diagram/localization/es5localeContextMenu-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/localization/es5localeContextMenu-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -59,4 +59,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/localization/es5localeContextMenu-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/localization/es5localeContextMenu-cs1/app/index.tsx
index a9f3ac3a55..9d63c5c8a9 100644
--- a/ej2-react/code-snippet/diagram/localization/es5localeContextMenu-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/localization/es5localeContextMenu-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -59,4 +59,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/nodes/nExpandAndCollapse-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/nodes/nExpandAndCollapse-cs1/app/index.jsx
index 679b1fa6fc..11b5fc47d7 100644
--- a/ej2-react/code-snippet/diagram/nodes/nExpandAndCollapse-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/nodes/nExpandAndCollapse-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -89,4 +89,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/nodes/nExpandAndCollapse-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/nodes/nExpandAndCollapse-cs1/app/index.tsx
index 02763793bb..60789d4b25 100644
--- a/ej2-react/code-snippet/diagram/nodes/nExpandAndCollapse-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/nodes/nExpandAndCollapse-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from 'react-dom';
@@ -89,4 +89,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/nodes/nExpandAndCollapse-cs2/app/index.jsx b/ej2-react/code-snippet/diagram/nodes/nExpandAndCollapse-cs2/app/index.jsx
index 679b1fa6fc..11b5fc47d7 100644
--- a/ej2-react/code-snippet/diagram/nodes/nExpandAndCollapse-cs2/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/nodes/nExpandAndCollapse-cs2/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -89,4 +89,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/nodes/nExpandAndCollapse-cs2/app/index.tsx b/ej2-react/code-snippet/diagram/nodes/nExpandAndCollapse-cs2/app/index.tsx
index 02763793bb..60789d4b25 100644
--- a/ej2-react/code-snippet/diagram/nodes/nExpandAndCollapse-cs2/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/nodes/nExpandAndCollapse-cs2/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from 'react-dom';
@@ -89,4 +89,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/nodes/nInteraction-cs6/app/index.tsx b/ej2-react/code-snippet/diagram/nodes/nInteraction-cs6/app/index.tsx
index 0bf319d0f7..09cbcfd8a3 100644
--- a/ej2-react/code-snippet/diagram/nodes/nInteraction-cs6/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/nodes/nInteraction-cs6/app/index.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { createRoot } from 'react-dom/client';
+import * as ReactDOM from 'react-dom';
import {
DiagramComponent,
PortVisibility,
@@ -122,6 +122,7 @@ var nodes : NodeModel[] = [
},
];
let diagramInstance: DiagramComponent;
+// initialize Diagram component
function App() {
return (
);
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/nodes/nodes-cs4/app/index.jsx b/ej2-react/code-snippet/diagram/nodes/nodes-cs4/app/index.jsx
index 01478fd003..8546d8562b 100644
--- a/ej2-react/code-snippet/diagram/nodes/nodes-cs4/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/nodes/nodes-cs4/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -67,4 +67,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/nodes/nodes-cs4/app/index.tsx b/ej2-react/code-snippet/diagram/nodes/nodes-cs4/app/index.tsx
index 298f2e8a94..ee0aba4312 100644
--- a/ej2-react/code-snippet/diagram/nodes/nodes-cs4/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/nodes/nodes-cs4/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -67,4 +67,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/overView/es5Node-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/overView/es5Node-cs1/app/index.jsx
index 3f01e02a63..7e1e488c6e 100644
--- a/ej2-react/code-snippet/diagram/overView/es5Node-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/overView/es5Node-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import { createRoot } from 'react-dom/client';
@@ -152,5 +152,5 @@ function App() {
const root = createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/overView/es5Node-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/overView/es5Node-cs1/app/index.tsx
index a341e3292d..29efe99d9a 100644
--- a/ej2-react/code-snippet/diagram/overView/es5Node-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/overView/es5Node-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -167,4 +167,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/overView/es5Node-cs2/app/index.jsx b/ej2-react/code-snippet/diagram/overView/es5Node-cs2/app/index.jsx
index dffdbc8cf5..a0e902856d 100644
--- a/ej2-react/code-snippet/diagram/overView/es5Node-cs2/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/overView/es5Node-cs2/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DiagramComponent, OverviewComponent, SnapConstraints } from '@syncfusion/ej2-react-diagrams';
@@ -45,4 +45,4 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/overView/es5Node-cs2/app/index.tsx b/ej2-react/code-snippet/diagram/overView/es5Node-cs2/app/index.tsx
index de552884ac..548dc68452 100644
--- a/ej2-react/code-snippet/diagram/overView/es5Node-cs2/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/overView/es5Node-cs2/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -44,4 +44,4 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/pagesettings/es5BGImage-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/pagesettings/es5BGImage-cs1/app/index.jsx
index d544429368..01372102b8 100644
--- a/ej2-react/code-snippet/diagram/pagesettings/es5BGImage-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/pagesettings/es5BGImage-cs1/app/index.jsx
@@ -1,25 +1,27 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
+
+const pageSettings = {
+ orientation: 'Landscape',
+ showPageBreaks: true,
+ // Defines the background Image source
+ background: {
+ source: 'https://www.w3schools.com/images/w3schools_green.jpg',
+ // Defines the scale values for the background image
+ scale: 'Meet',
+ // Defines the align values for the background image
+ align: 'XMinYMin'
+ },
+ width: 300,
+ height: 300,
+};
+
function App() {
return ();
+ pageSettings={pageSettings}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/pagesettings/es5BGImage-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/pagesettings/es5BGImage-cs1/app/index.tsx
index c853a28994..0ffd333792 100644
--- a/ej2-react/code-snippet/diagram/pagesettings/es5BGImage-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/pagesettings/es5BGImage-cs1/app/index.tsx
@@ -1,9 +1,25 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
DiagramComponent
} from "@syncfusion/ej2-react-diagrams";
+
+const pageSettings = {
+ orientation: 'Landscape',
+ showPageBreaks: true,
+ // Defines the background Image source
+ background: {
+ source: 'https://www.w3schools.com/images/w3schools_green.jpg',
+ // Defines the scale values for the background image
+ scale: 'Meet',
+ // Defines the align values for the background image
+ align: 'XMinYMin'
+ },
+ width: 300,
+ height: 300,
+};
+
function App() {
return (
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/pagesettings/es5FitOption-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/pagesettings/es5FitOption-cs1/app/index.jsx
index 9ac01a2ed5..4f2a226e2d 100644
--- a/ej2-react/code-snippet/diagram/pagesettings/es5FitOption-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/pagesettings/es5FitOption-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
@@ -10,27 +10,29 @@ let node = [{
offsetY: 200,
annotations: [{ content: 'Node fits at the center of view port' }],
}];
+
+const pageSettings = {
+ width: 500,
+ height: 500,
+ background: { color: 'grey' },
+ fitOptions: {
+ // Fits the content to the center of the viewport
+ canFit: true,
+ // Allows zooming in to fit smaller content
+ canZoomIn: true,
+ // Specifies the region to fit to the center
+ region: 'Content',
+ // Specifies the mode of fitOptions
+ mode: 'Page',
+ // Defines the margin around the fitted content
+ margin: { left: 50, right: 50, top: 50, bottom: 50 },
+ }
+};
+
function App() {
return ();
+ pageSettings={pageSettings}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/pagesettings/es5FitOption-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/pagesettings/es5FitOption-cs1/app/index.tsx
index 113eafea67..ef96a07a64 100644
--- a/ej2-react/code-snippet/diagram/pagesettings/es5FitOption-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/pagesettings/es5FitOption-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
@@ -13,6 +13,23 @@ let node: NodeModel[] = [{
offsetY: 200,
annotations: [{ content: 'Node fits at the center of view port' }],
}];
+const pageSettings = {
+ width: 500,
+ height: 500,
+ background: { color: 'grey' },
+ fitOptions: {
+ // Fits the content to the center of the viewport
+ canFit: true,
+ // Allows zooming in to fit smaller content
+ canZoomIn: true,
+ // Specifies the region to fit to the center
+ region: 'Content',
+ // Specifies the mode of fitOptions
+ mode: 'Page',
+ // Defines the margin around the fitted content
+ margin: { left: 50, right: 50, top: 50, bottom: 50 },
+ }
+};
function App() {
return (
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/pagesettings/es5boundaryconstraints-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/pagesettings/es5boundaryconstraints-cs1/app/index.jsx
index fd48734a4d..f1a04116e6 100644
--- a/ej2-react/code-snippet/diagram/pagesettings/es5boundaryconstraints-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/pagesettings/es5boundaryconstraints-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
@@ -32,20 +32,22 @@ let node = [{
offsetX: 300,
offsetY: 350,
}];
+
+const pageSettings = {
+ // Sets the BoundaryConstraints to page
+ boundaryConstraints: 'Page',
+ background: {
+ color: 'grey'
+ },
+ width: 400,
+ height: 400,
+ showPageBreaks: true,
+};
+
function App() {
return ();
+ pageSettings={pageSettings}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/pagesettings/es5boundaryconstraints-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/pagesettings/es5boundaryconstraints-cs1/app/index.tsx
index f2489c5cfb..334c9caf28 100644
--- a/ej2-react/code-snippet/diagram/pagesettings/es5boundaryconstraints-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/pagesettings/es5boundaryconstraints-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
@@ -38,6 +38,18 @@ let node: NodeModel[] = [{
offsetX: 300,
offsetY: 350,
}];
+
+const pageSettings = {
+ // Sets the BoundaryConstraints to page
+ boundaryConstraints: 'Page',
+ background: {
+ color: 'grey'
+ },
+ width: 400,
+ height: 400,
+ showPageBreaks: true,
+};
+
function App() {
return (
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/pagesettings/es5multiplepage-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/pagesettings/es5multiplepage-cs1/app/index.jsx
index 2fb99e680f..88c49de1fe 100644
--- a/ej2-react/code-snippet/diagram/pagesettings/es5multiplepage-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/pagesettings/es5multiplepage-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
@@ -42,4 +42,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/pagesettings/es5multiplepage-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/pagesettings/es5multiplepage-cs1/app/index.tsx
index e39674274b..bbe778667c 100644
--- a/ej2-react/code-snippet/diagram/pagesettings/es5multiplepage-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/pagesettings/es5multiplepage-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
@@ -56,4 +56,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/pagesettings/es5pagesettings-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/pagesettings/es5pagesettings-cs1/app/index.jsx
index d2f96f48fd..604081dc90 100644
--- a/ej2-react/code-snippet/diagram/pagesettings/es5pagesettings-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/pagesettings/es5pagesettings-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
@@ -26,29 +26,31 @@ let node = [{
content: 'Node3'
}]
}];
+
+const pageSettings = {
+ // Sets the Page Break for diagram
+ showPageBreaks: true,
+ // Defines the background color and image of diagram
+ background: {
+ color: 'grey',
+ },
+ // Sets the width for the Page
+ width: 300,
+ // Sets the height for the Page
+ height: 300,
+ // Sets the space to be left between an annotation and its parent node/connector
+ margin: {
+ left: 10,
+ top: 10,
+ bottom: 10,
+ right: 10,
+ },
+};
function App() {
return ();
+ pageSettings={pageSettings}
+ />);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/pagesettings/es5pagesettings-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/pagesettings/es5pagesettings-cs1/app/index.tsx
index e92c82b3d7..723ae82445 100644
--- a/ej2-react/code-snippet/diagram/pagesettings/es5pagesettings-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/pagesettings/es5pagesettings-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
@@ -30,6 +30,25 @@ let node: NodeModel[] = [{
content: 'Node3'
}]
}];
+const pageSettings = {
+ // Sets the Page Break for diagram
+ showPageBreaks: true,
+ // Defines the background color and image of diagram
+ background: {
+ color: 'grey',
+ },
+ // Sets the width for the Page
+ width: 300,
+ // Sets the height for the Page
+ height: 300,
+ // Sets the space to be left between an annotation and its parent node/connector
+ margin: {
+ left: 10,
+ top: 10,
+ bottom: 10,
+ right: 10
+ },
+};
function App() {
return (
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/pagesettings/es5pagesettings-cs2/app/index.jsx b/ej2-react/code-snippet/diagram/pagesettings/es5pagesettings-cs2/app/index.jsx
index 2b50f3bd5c..9cb761abbb 100644
--- a/ej2-react/code-snippet/diagram/pagesettings/es5pagesettings-cs2/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/pagesettings/es5pagesettings-cs2/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
@@ -26,24 +26,26 @@ let node = [{
content: 'Node2'
}]
}];
+
+const pageSettings = {
+ // Sets the Page Break for diagram
+ showPageBreaks: true,
+ // Defines the background color and image of diagram
+ background: {
+ color: 'grey',
+ },
+ // Sets the width for the Page
+ width: 500,
+ // Sets the height for the Page
+ height: 300,
+ //Sets the orientation for the page
+ orientation: 'Portrait',
+};
+
function App() {
return ();
+ pageSettings={pageSettings}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/pagesettings/es5pagesettings-cs2/app/index.tsx b/ej2-react/code-snippet/diagram/pagesettings/es5pagesettings-cs2/app/index.tsx
index f998a799f4..2dba442637 100644
--- a/ej2-react/code-snippet/diagram/pagesettings/es5pagesettings-cs2/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/pagesettings/es5pagesettings-cs2/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
@@ -30,6 +30,22 @@ let node: NodeModel[] = [{
content: 'Node2'
}]
}];
+
+const pageSettings = {
+ // Sets the Page Break for diagram
+ showPageBreaks: true,
+ // Defines the background color and image of diagram
+ background: {
+ color: 'grey',
+ },
+ // Sets the width for the Page
+ width: 500,
+ // Sets the height for the Page
+ height: 300,
+ //Sets the orientation for the page
+ orientation: 'Portrait'
+};
+
function App() {
return (
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/ports/es5Remove-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/ports/es5Remove-cs1/app/index.jsx
index 41cb1d8d68..37c84b5368 100644
--- a/ej2-react/code-snippet/diagram/ports/es5Remove-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/ports/es5Remove-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, PortVisibility } from "@syncfusion/ej2-react-diagrams";
@@ -67,4 +67,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/ports/es5Remove-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/ports/es5Remove-cs1/app/index.tsx
index 2cc761f6f2..6e15d6bcf8 100644
--- a/ej2-react/code-snippet/diagram/ports/es5Remove-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/ports/es5Remove-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
@@ -88,4 +88,3 @@ root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/print/print-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/print/print-cs1/app/index.jsx
index efec4ef159..e13290efd4 100644
--- a/ej2-react/code-snippet/diagram/print/print-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/print/print-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -61,4 +61,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/print/print-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/print/print-cs1/app/index.tsx
index 38e691b43b..4136b2f077 100644
--- a/ej2-react/code-snippet/diagram/print/print-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/print/print-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -62,4 +62,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/print/print-cs2/app/index.jsx b/ej2-react/code-snippet/diagram/print/print-cs2/app/index.jsx
index 0ca86ef0ae..2825a67c8c 100644
--- a/ej2-react/code-snippet/diagram/print/print-cs2/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/print/print-cs2/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -86,4 +86,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/print/print-cs2/app/index.tsx b/ej2-react/code-snippet/diagram/print/print-cs2/app/index.tsx
index 3d760db4d8..aed68bb5c3 100644
--- a/ej2-react/code-snippet/diagram/print/print-cs2/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/print/print-cs2/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -86,4 +86,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/print/print-cs3/app/index.jsx b/ej2-react/code-snippet/diagram/print/print-cs3/app/index.jsx
index ffdeea7302..b3375d238b 100644
--- a/ej2-react/code-snippet/diagram/print/print-cs3/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/print/print-cs3/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -79,4 +79,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/print/print-cs3/app/index.tsx b/ej2-react/code-snippet/diagram/print/print-cs3/app/index.tsx
index 55c7a82996..bf26da17d3 100644
--- a/ej2-react/code-snippet/diagram/print/print-cs3/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/print/print-cs3/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -79,4 +79,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/print/print-cs4/app/index.jsx b/ej2-react/code-snippet/diagram/print/print-cs4/app/index.jsx
index 2c11e9923c..2c860b5090 100644
--- a/ej2-react/code-snippet/diagram/print/print-cs4/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/print/print-cs4/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -79,4 +79,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/print/print-cs4/app/index.tsx b/ej2-react/code-snippet/diagram/print/print-cs4/app/index.tsx
index a9b7cbd5c4..92997674fa 100644
--- a/ej2-react/code-snippet/diagram/print/print-cs4/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/print/print-cs4/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -79,4 +79,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/print/print-cs5/app/index.jsx b/ej2-react/code-snippet/diagram/print/print-cs5/app/index.jsx
index 7679d05bb2..9edc6a1fc6 100644
--- a/ej2-react/code-snippet/diagram/print/print-cs5/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/print/print-cs5/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -79,4 +79,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/print/print-cs5/app/index.tsx b/ej2-react/code-snippet/diagram/print/print-cs5/app/index.tsx
index fa1d826450..6dc8471ea4 100644
--- a/ej2-react/code-snippet/diagram/print/print-cs5/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/print/print-cs5/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -78,4 +78,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/reactCurlyExamples/layout-event-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/reactCurlyExamples/layout-event-cs1/app/index.jsx
index 3de9a0c14c..7e58ea233e 100644
--- a/ej2-react/code-snippet/diagram/reactCurlyExamples/layout-event-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/reactCurlyExamples/layout-event-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
function dataLoaded(args) {
//we can get diagram instance in args.
@@ -17,4 +17,3 @@
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/reactCurlyExamples/layout-event-cs2/app/index.jsx b/ej2-react/code-snippet/diagram/reactCurlyExamples/layout-event-cs2/app/index.jsx
index f5d1b4c8eb..fbeb33662b 100644
--- a/ej2-react/code-snippet/diagram/reactCurlyExamples/layout-event-cs2/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/reactCurlyExamples/layout-event-cs2/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
function handleLayoutUpdated(args){
if (args.state === 'Started') {
@@ -15,4 +15,3 @@ function handleLayoutUpdated(args){
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/reactCurlyExamples/localization-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/reactCurlyExamples/localization-cs1/app/index.jsx
index d9682b9f4d..b1aa5edde8 100644
--- a/ej2-react/code-snippet/diagram/reactCurlyExamples/localization-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/reactCurlyExamples/localization-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
- {% endraw %}
\ No newline at end of file
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/reactCurlyExamples/postgreSQL-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/reactCurlyExamples/postgreSQL-cs1/app/index.tsx
index 9f6514cd84..f2aae5f301 100644
--- a/ej2-react/code-snippet/diagram/reactCurlyExamples/postgreSQL-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/reactCurlyExamples/postgreSQL-cs1/app/index.tsx
@@ -1,5 +1,5 @@
-{% raw %}
+
import { useEffect, useState } from 'react';
import {
@@ -114,4 +114,3 @@ const OrganizationalLayout = () => {
export default OrganizationalLayout;
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/reactCurlyExamples/serialization-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/reactCurlyExamples/serialization-cs1/app/index.jsx
index d12746f6dd..fda8054491 100644
--- a/ej2-react/code-snippet/diagram/reactCurlyExamples/serialization-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/reactCurlyExamples/serialization-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
return (
@@ -8,4 +8,3 @@
)
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/ruler/customRuler-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/ruler/customRuler-cs1/app/index.jsx
index 5f89066663..08e93e7e79 100644
--- a/ej2-react/code-snippet/diagram/ruler/customRuler-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/ruler/customRuler-cs1/app/index.jsx
@@ -1,29 +1,31 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
+const 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',
+ },
+};
+
function App() {
- return ();
+ return ();
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/ruler/customRuler-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/ruler/customRuler-cs1/app/index.tsx
index 6a519c45d1..6bc0fee75f 100644
--- a/ej2-react/code-snippet/diagram/ruler/customRuler-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/ruler/customRuler-cs1/app/index.tsx
@@ -1,36 +1,36 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import {Diagram,DiagramComponent} from "@syncfusion/ej2-react-diagrams";
-
+const 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',
+ },
+};
function App() {
return (
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/ruler/customRuler-cs2/app/index.jsx b/ej2-react/code-snippet/diagram/ruler/customRuler-cs2/app/index.jsx
index cd04d6fe42..3371c71240 100644
--- a/ej2-react/code-snippet/diagram/ruler/customRuler-cs2/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/ruler/customRuler-cs2/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -19,27 +19,29 @@ let arrange = (args) => {
}
};
+const rulerSettings = {
+ showRulers: true,
+ horizontalRuler: {
+ segmentWidth: 50,
+ orientation: 'Horizontal',
+ interval: 10,
+ thickness: 50,
+ arrangeTick: arrange,
+ },
+ verticalRuler: {
+ segmentWidth: 200,
+ interval: 20,
+ thickness: 20,
+ tickAlignment: 'LeftOrTop',
+ markerColor: 'red',
+ }
+};
+
function App() {
- return ();
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/ruler/customRuler-cs2/app/index.tsx b/ej2-react/code-snippet/diagram/ruler/customRuler-cs2/app/index.tsx
index 31083c1c8e..2b1d0b47b4 100644
--- a/ej2-react/code-snippet/diagram/ruler/customRuler-cs2/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/ruler/customRuler-cs2/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -20,27 +20,29 @@ let arrange = (args: IArrangeTickOptions) => {
}
};
+const rulerSettings = {
+ showRulers: true,
+ horizontalRuler: {
+ segmentWidth: 50,
+ orientation: 'Horizontal',
+ interval: 10,
+ thickness: 50,
+ arrangeTick: arrange,
+ },
+ verticalRuler: {
+ segmentWidth: 200,
+ interval: 20,
+ thickness: 20,
+ tickAlignment: 'LeftOrTop',
+ markerColor: 'red',
+ }
+};
+
function App() {
- return ();
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/ruler/ruler-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/ruler/ruler-cs1/app/index.jsx
index be146c3b7a..70c49ac5ed 100644
--- a/ej2-react/code-snippet/diagram/ruler/ruler-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/ruler/ruler-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -10,4 +10,4 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/ruler/ruler-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/ruler/ruler-cs1/app/index.tsx
index e98367709d..b7dea92b0a 100644
--- a/ej2-react/code-snippet/diagram/ruler/ruler-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/ruler/ruler-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -16,4 +16,4 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/serialization/serialization-cs2/app/index.jsx b/ej2-react/code-snippet/diagram/serialization/serialization-cs2/app/index.jsx
index 7288e0eeea..9d77bd9db1 100644
--- a/ej2-react/code-snippet/diagram/serialization/serialization-cs2/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/serialization/serialization-cs2/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -64,4 +64,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/serialization/serialization-cs2/app/index.tsx b/ej2-react/code-snippet/diagram/serialization/serialization-cs2/app/index.tsx
index c8372b6f38..f758995aa9 100644
--- a/ej2-react/code-snippet/diagram/serialization/serialization-cs2/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/serialization/serialization-cs2/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -64,4 +64,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/serialization/serialization-cs3/app/index.jsx b/ej2-react/code-snippet/diagram/serialization/serialization-cs3/app/index.jsx
index 5f3fa89cee..9c02460ce3 100644
--- a/ej2-react/code-snippet/diagram/serialization/serialization-cs3/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/serialization/serialization-cs3/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -66,4 +66,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/serialization/serialization-cs3/app/index.tsx b/ej2-react/code-snippet/diagram/serialization/serialization-cs3/app/index.tsx
index bc334b3d4f..b0663eb6be 100644
--- a/ej2-react/code-snippet/diagram/serialization/serialization-cs3/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/serialization/serialization-cs3/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -61,4 +61,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/serialization/serialization-cs4/app/index.jsx b/ej2-react/code-snippet/diagram/serialization/serialization-cs4/app/index.jsx
index d20dd1eb62..5453bedd9f 100644
--- a/ej2-react/code-snippet/diagram/serialization/serialization-cs4/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/serialization/serialization-cs4/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -51,4 +51,3 @@ const mermaidData = `
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/serialization/serialization-cs4/app/index.tsx b/ej2-react/code-snippet/diagram/serialization/serialization-cs4/app/index.tsx
index 84ba3bbe53..7dc7e92781 100644
--- a/ej2-react/code-snippet/diagram/serialization/serialization-cs4/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/serialization/serialization-cs4/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -51,4 +51,3 @@ export default function App() {
const root = ReactDOM.createRoot(document.getElementById("diagram") as HTMLElement);
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/shapes/es5ContentFunctionalTemplate-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/shapes/es5ContentFunctionalTemplate-cs1/app/index.jsx
index 27f478fcab..6547c9b1da 100644
--- a/ej2-react/code-snippet/diagram/shapes/es5ContentFunctionalTemplate-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/shapes/es5ContentFunctionalTemplate-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -63,4 +63,4 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/shapes/es5ContentFunctionalTemplate-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/shapes/es5ContentFunctionalTemplate-cs1/app/index.tsx
index bf0a9e2659..ab5b97d896 100644
--- a/ej2-react/code-snippet/diagram/shapes/es5ContentFunctionalTemplate-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/shapes/es5ContentFunctionalTemplate-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -64,4 +64,4 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/shapes/es5NodeFunctionalTemplate-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/shapes/es5NodeFunctionalTemplate-cs1/app/index.jsx
index 75bb3bf582..11a754b25a 100644
--- a/ej2-react/code-snippet/diagram/shapes/es5NodeFunctionalTemplate-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/shapes/es5NodeFunctionalTemplate-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -52,4 +52,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/shapes/es5NodeFunctionalTemplate-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/shapes/es5NodeFunctionalTemplate-cs1/app/index.tsx
index 37a6ad62f8..9195d5a6af 100644
--- a/ej2-react/code-snippet/diagram/shapes/es5NodeFunctionalTemplate-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/shapes/es5NodeFunctionalTemplate-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -62,4 +62,4 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/diagram/shapes/es5NodeTemplate-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/shapes/es5NodeTemplate-cs1/app/index.jsx
index 17e0f81c15..cf909d9554 100644
--- a/ej2-react/code-snippet/diagram/shapes/es5NodeTemplate-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/shapes/es5NodeTemplate-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -48,4 +48,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/swimlane/es5Palette-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/swimlane/es5Palette-cs1/app/index.jsx
index a0a85abd14..1e46f5d04b 100644
--- a/ej2-react/code-snippet/diagram/swimlane/es5Palette-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/swimlane/es5Palette-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -69,6 +69,20 @@ function setPaletteNodeDefaults(node) {
node.height = 70;
node.style.strokeColor = '#3A3A3A';
}
+const symbolPreview = {
+ height: 70,
+ width: 70,
+ offset: {
+ x: 0.5,
+ y: 0.5
+ },
+};
+const symbolMargin = {
+ left: 12,
+ right: 12,
+ top: 12,
+ bottom: 12
+};
// Initialize the Symbol palette
function App() {
return ( {
return {
@@ -101,4 +103,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/swimlane/es5Palette-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/swimlane/es5Palette-cs1/app/index.tsx
index 939c634a82..580f8aedd1 100644
--- a/ej2-react/code-snippet/diagram/swimlane/es5Palette-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/swimlane/es5Palette-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -69,6 +69,20 @@ function setPaletteNodeDefaults(node: NodeModel): void {
node.height = 70;
node.style.strokeColor = '#3A3A3A';
}
+const symbolPreview = {
+ height: 70,
+ width: 70,
+ offset: {
+ x: 0.5,
+ y: 0.5
+ },
+};
+const symbolMargin = {
+ left: 12,
+ right: 12,
+ top: 12,
+ bottom: 12
+};
// Initialize the Symbol palette
function App() {
return (
@@ -83,20 +97,8 @@ function App() {
title: 'Swimlane Shapes',
},
]}
- symbolPreview={{
- height: 70,
- width: 70,
- offset: {
- x: 0.5,
- y: 0.5
- },
- }}
- symbolMargin={{
- left: 12,
- right: 12,
- top: 12,
- bottom: 12
- }}
+ symbolPreview={symbolPreview}
+ symbolMargin={symbolMargin}
//Returns the default properties of node
getNodeDefaults={setPaletteNodeDefaults}
getSymbolInfo = {
@@ -112,4 +114,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/swimlane/es5PhaseCustomize-cs2/app/index.tsx b/ej2-react/code-snippet/diagram/swimlane/es5PhaseCustomize-cs2/app/index.tsx
index 1ae5edafd1..ff32d9a771 100644
--- a/ej2-react/code-snippet/diagram/swimlane/es5PhaseCustomize-cs2/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/swimlane/es5PhaseCustomize-cs2/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, NodeModel } from "@syncfusion/ej2-react-diagrams";
@@ -91,4 +91,3 @@ root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/swimlane/es5PhaseCustomize-cs3/app/index.tsx b/ej2-react/code-snippet/diagram/swimlane/es5PhaseCustomize-cs3/app/index.tsx
index 3a0f121d2a..55afd63e63 100644
--- a/ej2-react/code-snippet/diagram/swimlane/es5PhaseCustomize-cs3/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/swimlane/es5PhaseCustomize-cs3/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, NodeModel, SwimlaneModel} from "@syncfusion/ej2-react-diagrams";
@@ -97,4 +97,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/tooltip/es5InheritTooltip-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/tooltip/es5InheritTooltip-cs1/app/index.jsx
index f077c775db..bfada3f510 100644
--- a/ej2-react/code-snippet/diagram/tooltip/es5InheritTooltip-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/tooltip/es5InheritTooltip-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -54,4 +54,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/tooltip/es5InheritTooltip-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/tooltip/es5InheritTooltip-cs1/app/index.tsx
index 1cce75ea7f..9a6f32539a 100644
--- a/ej2-react/code-snippet/diagram/tooltip/es5InheritTooltip-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/tooltip/es5InheritTooltip-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -54,4 +54,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/tooltip/es5tooltip-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/tooltip/es5tooltip-cs1/app/index.jsx
index 9e334f5cbe..e6a00271f1 100644
--- a/ej2-react/code-snippet/diagram/tooltip/es5tooltip-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/tooltip/es5tooltip-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -42,4 +42,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/tooltip/es5tooltip-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/tooltip/es5tooltip-cs1/app/index.tsx
index 8ae395a7fe..3098fd5c16 100644
--- a/ej2-react/code-snippet/diagram/tooltip/es5tooltip-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/tooltip/es5tooltip-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
@@ -42,4 +42,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/umldiagramshapes/es5preview-cs4/app/index.jsx b/ej2-react/code-snippet/diagram/umldiagramshapes/es5preview-cs4/app/index.jsx
index bba74d889e..3a6146d2d1 100644
--- a/ej2-react/code-snippet/diagram/umldiagramshapes/es5preview-cs4/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/umldiagramshapes/es5preview-cs4/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { SymbolPaletteComponent, DiagramComponent} from "@syncfusion/ej2-react-diagrams";
@@ -94,7 +94,7 @@ function App() {
(diagramInstance = diagram)}
width={'100%'}
height={'700px'}
@@ -105,4 +105,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/umldiagramshapes/es5preview-cs4/app/index.tsx b/ej2-react/code-snippet/diagram/umldiagramshapes/es5preview-cs4/app/index.tsx
index 3c4a5eff93..2bd23df11c 100644
--- a/ej2-react/code-snippet/diagram/umldiagramshapes/es5preview-cs4/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/umldiagramshapes/es5preview-cs4/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
@@ -105,7 +105,7 @@ function App() {
(diagramInstance = diagram)}
width={'100%'}
height={'700px'}
@@ -117,4 +117,3 @@ function App() {
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs1/app/index.jsx
index 76c89829da..0c1b72be4a 100644
--- a/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, ConnectorConstraints, ConnectorEditing, Inject } from "@syncfusion/ej2-react-diagrams";
@@ -30,21 +30,21 @@ let nodes = [{
{ content: 'Drag or resize the node to activate autoscroll' },
],
}];
+const scrollSettings = {
+ scrollLimit: 'Infinity',
+ canAutoScroll: true,
+ autoScrollBorder: {
+ left: 100,
+ right: 100,
+ top: 100,
+ bottom: 100
+ }
+};
function App() {
return (
+ scrollSettings={scrollSettings}>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs1/app/index.tsx
index 0ea6f6967e..6a43632b15 100644
--- a/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
@@ -36,6 +36,16 @@ let nodes: NodeModel[] = [{
{ content: 'Drag or resize the node to activate autoscroll' },
],
}];
+const scrollSettings = {
+ scrollLimit: 'Infinity',
+ canAutoScroll: true,
+ autoScrollBorder: {
+ left: 100,
+ right: 100,
+ top: 100,
+ bottom: 100
+ }
+};
function App() {
return (
+ scrollSettings = {scrollSettings}>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs2/app/index.jsx b/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs2/app/index.jsx
index b539224c28..8f4d66d50d 100644
--- a/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs2/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs2/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, DiagramTools } from "@syncfusion/ej2-react-diagrams";
@@ -27,4 +27,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs2/app/index.tsx b/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs2/app/index.tsx
index cae8d04950..4ce68e7e34 100644
--- a/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs2/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs2/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
@@ -41,4 +41,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs3/app/index.jsx b/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs3/app/index.jsx
index 4dfb7bea19..71a7404ab2 100644
--- a/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs3/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs3/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
@@ -7,12 +7,14 @@ let nodes = [{
width: 100, height: 100,
offsetX: 350, offsetY: 350,
}];
+
+const scrollSettings = {
+ //Sets the scroll padding
+ padding: { left: 100, top: 100 }
+};
+
function App() {
- return ();
+ return ();
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs3/app/index.tsx b/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs3/app/index.tsx
index 1b22b2574e..fde68cb56e 100644
--- a/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs3/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs3/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
@@ -10,6 +10,10 @@ let nodes: NodeModel[] = [{
width: 100, height: 100,
offsetX: 350, offsetY: 350,
}];
+const scrollSettings = {
+ //Sets the scroll padding
+ padding: { left: 100, top: 100 }
+};
function App() {
return (
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs4/app/index.jsx b/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs4/app/index.jsx
index d62ca53ec9..90e451b22a 100644
--- a/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs4/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs4/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Rect, DiagramComponent } from "@syncfusion/ej2-react-diagrams";
@@ -42,4 +42,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs4/app/index.tsx b/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs4/app/index.tsx
index 683ab14204..cca6f6c8d3 100644
--- a/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs4/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs4/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
@@ -56,4 +56,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs5/app/index.jsx b/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs5/app/index.jsx
index 50391ccf34..1c16957399 100644
--- a/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs5/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs5/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, UndoRedo, Inject } from "@syncfusion/ej2-react-diagrams";
@@ -29,4 +29,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs5/app/index.tsx b/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs5/app/index.tsx
index 7063b31c22..f035528678 100644
--- a/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs5/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs5/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
@@ -42,4 +42,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs6/app/index.jsx b/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs6/app/index.jsx
index c614881d06..f84834fe6f 100644
--- a/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs6/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs6/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, UndoRedo, Inject } from "@syncfusion/ej2-react-diagrams";
@@ -20,4 +20,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs6/app/index.tsx b/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs6/app/index.tsx
index d809d65cdf..7ad500bcfc 100644
--- a/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs6/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/undoredo/es5Connect-cs6/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
@@ -33,4 +33,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/undoredo/es5CurrentEntry-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/undoredo/es5CurrentEntry-cs1/app/index.jsx
index b9f46caf65..6ba71d2bd7 100644
--- a/ej2-react/code-snippet/diagram/undoredo/es5CurrentEntry-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/undoredo/es5CurrentEntry-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, UndoRedo, Inject } from "@syncfusion/ej2-react-diagrams";
@@ -25,4 +25,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/undoredo/es5CurrentEntry-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/undoredo/es5CurrentEntry-cs1/app/index.tsx
index bdcdb9df9f..3b7281ec0f 100644
--- a/ej2-react/code-snippet/diagram/undoredo/es5CurrentEntry-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/undoredo/es5CurrentEntry-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
@@ -39,4 +39,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/undoredo/es5HistoryChange-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/undoredo/es5HistoryChange-cs1/app/index.jsx
index 6ba35864c1..733577f7bb 100644
--- a/ej2-react/code-snippet/diagram/undoredo/es5HistoryChange-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/undoredo/es5HistoryChange-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, UndoRedo, Inject } from "@syncfusion/ej2-react-diagrams";
@@ -45,4 +45,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/undoredo/es5HistoryChange-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/undoredo/es5HistoryChange-cs1/app/index.tsx
index bf28a4c112..e7b65698fb 100644
--- a/ej2-react/code-snippet/diagram/undoredo/es5HistoryChange-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/undoredo/es5HistoryChange-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
@@ -61,4 +61,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/undoredo/es5Undo-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/undoredo/es5Undo-cs1/app/index.jsx
index 084d1b0c5a..b19c31d6a2 100644
--- a/ej2-react/code-snippet/diagram/undoredo/es5Undo-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/undoredo/es5Undo-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef, useEffect, useState } from "react";
@@ -66,4 +66,3 @@ const App = () => {
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/undoredo/es5Undo-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/undoredo/es5Undo-cs1/app/index.tsx
index c0479d7652..620a0f2a89 100644
--- a/ej2-react/code-snippet/diagram/undoredo/es5Undo-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/undoredo/es5Undo-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { useRef, useEffect, useState } from "react";
@@ -66,4 +66,3 @@ const App = () => {
const root = ReactDOM.createRoot(document.getElementById("diagram"));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/undoredo/groupAction-cs1/app/index.jsx b/ej2-react/code-snippet/diagram/undoredo/groupAction-cs1/app/index.jsx
index 35c57f0884..e10ad935a7 100644
--- a/ej2-react/code-snippet/diagram/undoredo/groupAction-cs1/app/index.jsx
+++ b/ej2-react/code-snippet/diagram/undoredo/groupAction-cs1/app/index.jsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, UndoRedo, Inject } from "@syncfusion/ej2-react-diagrams";
@@ -33,4 +33,3 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/diagram/undoredo/groupAction-cs1/app/index.tsx b/ej2-react/code-snippet/diagram/undoredo/groupAction-cs1/app/index.tsx
index af153f1be2..7cdc0f5317 100644
--- a/ej2-react/code-snippet/diagram/undoredo/groupAction-cs1/app/index.tsx
+++ b/ej2-react/code-snippet/diagram/undoredo/groupAction-cs1/app/index.tsx
@@ -1,4 +1,4 @@
-{% raw %}
+
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
@@ -47,4 +47,4 @@ function App() {
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render();
-{% endraw %}
+
diff --git a/ej2-react/code-snippet/dialog/positioning-cs2/app/App.jsx b/ej2-react/code-snippet/dialog/positioning-cs2/app/App.jsx
index 5ea2b8b461..700e7cd118 100644
--- a/ej2-react/code-snippet/dialog/positioning-cs2/app/App.jsx
+++ b/ej2-react/code-snippet/dialog/positioning-cs2/app/App.jsx
@@ -25,7 +25,7 @@ class App extends React.Component {
this.setState({ hideDialog: true });
};
footerTemplate = () => {
- return ();
+ return ( this.PositioningInstance = posvalue}/>);
};
render() {
return (