From bada52ac1e02f248cba06aad7b81d7910acbe46f Mon Sep 17 00:00:00 2001
From: kavitha Muralitharan <kavitha.muralitharan@syncfusion.com>
Date: Mon, 7 Apr 2025 13:57:45 +0530
Subject: [PATCH] 938302: Added code for custom context menu with sub-menu
 items in Core and MVC

---
 .../customize-sub-context-menu/razor          | 38 ++++++++++++++++++
 .../customize-sub-context-menu/tagHelper      | 39 +++++++++++++++++++
 .../how-to/customize-context-menu.md          | 24 ++++++++++++
 3 files changed, 101 insertions(+)
 create mode 100644 ej2-asp-core-mvc/code-snippet/document-editor-container/customize-sub-context-menu/razor
 create mode 100644 ej2-asp-core-mvc/code-snippet/document-editor-container/customize-sub-context-menu/tagHelper

diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-sub-context-menu/razor b/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-sub-context-menu/razor
new file mode 100644
index 0000000000..ef0ae7c5e7
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-sub-context-menu/razor
@@ -0,0 +1,38 @@
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        // creating Custom Options
+        let menuItems = [
+            {
+                text: 'Form field',
+                id: 'form field',
+                iconCss: 'e-de-formfield e-icons',
+                items: [
+                    {
+                    text: 'Text form',
+                    id: 'Text form',
+                    iconCss: 'e-icons e-de-textform',
+                    },
+                    {
+                    text: 'Check box',
+                    id: 'Check box',
+                    iconCss: 'e-icons e-de-checkbox-form',
+                    },
+                    {
+                    text: 'Drop down',
+                    id: 'Drop down',
+                    iconCss: 'e-icons e-de-dropdownform',
+                    },
+                ],
+            },
+        ];
+        // adding Custom Options
+        container.documentEditor.contextMenu.addCustomMenu(menuItems, false, true);
+    }
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-sub-context-menu/tagHelper b/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-sub-context-menu/tagHelper
new file mode 100644
index 0000000000..26af90f131
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/document-editor-container/customize-sub-context-menu/tagHelper
@@ -0,0 +1,39 @@
+<div class="control-section">
+    <ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
+</div>
+<script>
+  var documenteditor;
+  var container;
+  function onCreated() {
+      var documenteditorElement = document.getElementById("container");
+      container = documenteditorElement.ej2_instances[0];
+      documenteditor = container.documentEditor;
+      // creating Custom Options
+      let menuItems = [
+          {
+            text: 'Form field',
+            id: 'form field',
+            iconCss: 'e-de-formfield e-icons',
+            items: [
+                {
+                text: 'Text form',
+                id: 'Text form',
+                iconCss: 'e-icons e-de-textform',
+                },
+                {
+                text: 'Check box',
+                id: 'Check box',
+                iconCss: 'e-icons e-de-checkbox-form',
+                },
+                {
+                text: 'Drop down',
+                id: 'Drop down',
+                iconCss: 'e-icons e-de-dropdownform',
+                },
+            ],
+          },
+      ];
+      // adding Custom Options
+      container.documentEditor.contextMenu.addCustomMenu(menuItems, false, true);
+  }
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/document-editor/how-to/customize-context-menu.md b/ej2-asp-core-mvc/document-editor/how-to/customize-context-menu.md
index 0ec79a94dc..0149b5d3f1 100644
--- a/ej2-asp-core-mvc/document-editor/how-to/customize-context-menu.md
+++ b/ej2-asp-core-mvc/document-editor/how-to/customize-context-menu.md
@@ -90,3 +90,27 @@ The following code shows how to hide or show added custom option in context menu
 {% endhighlight %}{% endtabs %}
 {% endif %}
 
+#### Customize Context Menu with sub-menu items
+
+Document Editor allows you to customize the Context Menu with sub-menu items. It can be achieved by using the `addCustomMenu()` method.
+
+The following code shows how to add a sub items in the custom option in context menu in Document Editor Container.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/document-editor-container/customize-sub-context-menu/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Customize-sub-context-menu" %}
+{% endhighlight %}{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/document-editor-container/customize-sub-context-menu/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Customize-sub-context-menu" %}
+{% endhighlight %}{% endtabs %}
+{% endif %}
\ No newline at end of file