Merge pull request #4137 from syncfusion-content/938302-sub-menu-cm

938302: Added code for custom context menu with sub-menu items.

Author: mugunthan-anbalagan

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>

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>

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 %}