DOCINFRA-2341_merged_using_automation

ej2-asp-core-mvc/EJ2_ASP.NETCORE/installation/install-nuget-packages.md

@@ -46,7 +46,7 @@ The NuGet **Package Manager UI** allows to search, install, uninstall, and updat
 
     ![ASP.NET Core NuGet Packages Install](images/InstallNuGet.png)
 
-5. At this point, your application has all the required Syncfusion<sup style="font-size:70%">&reg;</sup> assemblies, and you will be ready to start building high-performance, responsive app with [Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core JS2 components](https://www.syncfusion.com/aspnet-core-ui-controls). Also, you can refer to the [ASP.NET Core JS2 help document](https://ej2.syncfusion.com/aspnetcore/documentation/introduction/) for development.
+5. At this point, your application has all the required Syncfusion<sup style="font-size:70%">&reg;</sup> assemblies, and you will be ready to start building high-performance, responsive app with [Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core JS2 components](https://www.syncfusion.com/aspnet-core-ui-controls). Also, you can refer to the [ASP.NET Core JS2 help document](https://ej2.syncfusion.com/aspnetcore/documentation/introduction) for development.
 
 ## Installation using Dotnet (.NET) CLI
 
@@ -72,7 +72,7 @@ Follow the below instructions to use the dotnet CLI command to install the Syncf
 
     N> Restoring is done automatically with **dotnet build** and **dotnet run** in .NET Core 2.0 and later.
 
-5. At this point, your application has all the required Syncfusion<sup style="font-size:70%">&reg;</sup> assemblies, and you will be ready to start building high-performance, responsive app with [Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core JS2 components](https://www.syncfusion.com/aspnet-core-ui-controls). Also, you can refer to the [ASP.NET Core JS2 help document](https://ej2.syncfusion.com/aspnetcore/documentation/introduction/) for development.
+5. At this point, your application has all the required Syncfusion<sup style="font-size:70%">&reg;</sup> assemblies, and you will be ready to start building high-performance, responsive app with [Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core JS2 components](https://www.syncfusion.com/aspnet-core-ui-controls). Also, you can refer to the [ASP.NET Core JS2 help document](https://ej2.syncfusion.com/aspnetcore/documentation/introduction) for development.
 
 ## Installation using Package Manager Console
 
@@ -110,4 +110,4 @@ The **Package Manager Console** saves NuGet packages installation time since you
 
 4. The NuGet package manager console will install the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core JS2 NuGet package as well as the dependencies it has. When the installation is complete, the console will show that your Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core JS2 package has been successfully added to the application.
 
-5. At this point, your application has all the required Syncfusion<sup style="font-size:70%">&reg;</sup> assemblies, and you will be ready to start building high-performance, responsive app with [Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core JS2 components](https://www.syncfusion.com/aspnet-core-ui-controls). Also, you can refer to the [ASP.NET Core JS2 help document](https://ej2.syncfusion.com/aspnetcore/documentation/introduction/) for development.
+5. At this point, your application has all the required Syncfusion<sup style="font-size:70%">&reg;</sup> assemblies, and you will be ready to start building high-performance, responsive app with [Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core JS2 components](https://www.syncfusion.com/aspnet-core-ui-controls). Also, you can refer to the [ASP.NET Core JS2 help document](https://ej2.syncfusion.com/aspnetcore/documentation/introduction) for development.

ej2-asp-core-mvc/code-snippet/document-editor-container/comment-only-protect/document-editor.cs

@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+

ej2-asp-core-mvc/code-snippet/document-editor-container/comments-event/document-editor.cs

@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+

ej2-asp-core-mvc/code-snippet/document-editor-container/comments-event/razor

@@ -0,0 +1,23 @@
+
+@Html.EJS().DocumentEditorContainer("container").EnableToolbar(true).Height("590px").BeforeCommentAction("beforeComment").Render()
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById('container');
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        let mentionData = [
+            { "Name": "Mary Kate", "EmailId": "marry@company.com" },
+            { "Name": "Andrew James", "EmailId": "james@company.com" },
+            { "Name": "Andrew Fuller", "EmailId": "andrew@company.com" }
+        ];
+        container.documentEditorSettings.mentionSettings = { dataSource: mentionData, fields: { text: 'Name' } };
+        container.currentUser = "Guest User";
+    }
+    function beforeComment(args) {
+        if (args.type === "Delete" && container.currentUser !== args.author) {
+            args.cancel = true;
+        }
+    }
+</script>

ej2-asp-core-mvc/code-snippet/document-editor-container/comments-event/tagHelper

@@ -0,0 +1,24 @@
+
+<ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" beforeCommentAction="beforeComment" height="590px"></ejs-documenteditorcontainer>
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById('container');
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        let mentionData = [
+            { "Name": "Mary Kate", "EmailId": "marry@company.com" },
+            { "Name": "Andrew James", "EmailId": "james@company.com" },
+            { "Name": "Andrew Fuller", "EmailId": "andrew@company.com"}
+        ];
+        container.documentEditorSettings.mentionSettings = { dataSource: mentionData, fields: { text: 'Name' }};
+        container.currentUser = "Guest User";
+    }
+    function beforeComment(args){
+        if(args.type === "Delete" && container.currentUser !== args.author){
+            args.cancel = true;
+        }
+    }
+</script>

ej2-asp-core-mvc/code-snippet/document-editor-container/comments-mention/document-editor.cs

@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+

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/code-snippet/document-editor-container/get-paragraph/razor

@@ -11,7 +11,9 @@
     // To select the current paragraph in document
     container.documentEditor.selection.selectParagraph();
 
-    // To get the selected content as sfdt
-    var selectedContent = container.documentEditor.selection.sfdt;
+    // To get the selected content as text
+    var selectedContentText = container.documentEditor.selection.text;
+    // To get the selected content as SFDT (rich text)
+    var selectedContentSFDT = container.documentEditor.selection.sfdt;
   }
 </script>

ej2-asp-core-mvc/code-snippet/document-editor-container/get-paragraph/tagHelper

@@ -13,7 +13,9 @@
     // To select the current paragraph in document
     container.documentEditor.selection.selectParagraph();
 
-    // To get the selected content as sfdt
-    var selectedContent = container.documentEditor.selection.sfdt;
+    // To get the selected content as text
+    var selectedContentText = container.documentEditor.selection.text;
+    // To get the selected content as SFDT (rich text)
+    var selectedContentSFDT = container.documentEditor.selection.sfdt;
   }
 </script>

ej2-asp-core-mvc/code-snippet/document-editor-container/get-word/razor

@@ -12,6 +12,8 @@
     container.documentEditor.selection.selectCurrentWord();
 
     // To get the selected content as text
-    var selectedContent = container.documentEditor.selection.text;
+    var selectedContentText = container.documentEditor.selection.text;
+    // To get the selected content as SFDT (rich text)
+    var selectedContentSFDT = container.documentEditor.selection.sfdt;
   }
 </script>

ej2-asp-core-mvc/code-snippet/document-editor-container/get-word/tagHelper

@@ -14,6 +14,8 @@
     container.documentEditor.selection.selectCurrentWord();
 
     // To get the selected content as text
-    var selectedContent = container.documentEditor.selection.text;
+    var selectedContentText = container.documentEditor.selection.text;
+    // To get the selected content as SFDT (rich text)
+    var selectedContentSFDT = container.documentEditor.selection.sfdt;
   }
 </script>

ej2-asp-core-mvc/code-snippet/document-editor-container/toggle-track-pane/document-editor.cs

@@ -0,0 +1,5 @@
+ public ActionResult Default()
+    {
+        return View();
+    }
+

ej2-asp-core-mvc/code-snippet/document-editor-container/track-changes-default/document-editor.cs

@@ -0,0 +1,5 @@
+ public ActionResult Default()
+    {
+        return View();
+    }
+

ej2-asp-core-mvc/code-snippet/document-editor-container/track-changes-default/razor

@@ -0,0 +1,13 @@
+<div>
+    @Html.EJS().DocumentEditorContainer("container").documentChange("onDocChange").EnableToolbar(true).Render()
+</div>
+
+<ejs-documenteditorcontainer id="container"  documentChange="onDocumentChange" enableToolbar=true serviceUrl="/api/DocumentEditor/" height="590px"></ejs-documenteditorcontainer>
+<script>
+    function onDocumentChange() {
+        var container = document.getElementById("container").ej2_instances[0];
+        if(container !== null){
+           container.documentEditor.enableTrackChanges= true;
+        }
+    }
+</script>

ej2-asp-core-mvc/code-snippet/document-editor-container/track-changes-default/tagHelper

@@ -0,0 +1,9 @@
+<ejs-documenteditorcontainer id="container"  documentChange="onDocumentChange" enableToolbar=true serviceUrl="/api/DocumentEditor/" height="590px"></ejs-documenteditorcontainer>
+<script>
+    function onDocumentChange() {
+        var container = document.getElementById("container").ej2_instances[0];
+        if(container !== null){
+           container.documentEditor.enableTrackChanges= true;
+        }
+    }
+</script>

ej2-asp-core-mvc/code-snippet/document-editor-container/track-changes-only-protect/document-editor.cs

@@ -0,0 +1,5 @@
+ public ActionResult Default()
+    {
+        return View();
+    }
+

ej2-asp-core-mvc/code-snippet/document-editor-container/track-changes/document-editor.cs

@@ -0,0 +1,5 @@
+ public ActionResult Default()
+    {
+        return View();
+    }
+

ej2-asp-core-mvc/code-snippet/document-editor/custom-toolbar/razor

@@ -8,7 +8,7 @@
         var toolItem = {
             prefixIcon: "e-de-ctnr-lock",
             tooltipText: "Disable Image",
-            text: "Disable Image",
+            text: onWrapText("Disable Image"),
             id: "Custom"
         };
         container.toolbarItems = [toolItem, 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl'];
@@ -21,4 +21,17 @@
             }
         };
     }
+
+    function onWrapText(text) {
+        let content = '';
+        const index = text.lastIndexOf(' ');
+
+        if (index !== -1) {
+            content = text.slice(0, index) + "<div class='e-de-text-wrap'>" + text.slice(index + 1) + "</div>";
+        } else {
+            content = text;
+        }
+
+        return content;
+    }
 </script>

ej2-asp-core-mvc/code-snippet/document-editor/custom-toolbar/tagHelper

@@ -5,7 +5,7 @@
         var toolItem = {
             prefixIcon: "e-de-ctnr-lock",
             tooltipText: "Disable Image",
-            text: "Disable Image",
+            text: onWrapText("Disable Image"),
             id: "Custom"
         };
         container.toolbarItems = [toolItem, 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl'];
@@ -18,4 +18,17 @@
             }
         };
     }
+
+    function onWrapText(text) {
+        let content = '';
+        const index = text.lastIndexOf(' ');
+
+        if (index !== -1) {
+            content = text.slice(0, index) + "<div class='e-de-text-wrap'>" + text.slice(index + 1) + "</div>";
+        } else {
+            content = text;
+        }
+
+        return content;
+    }
 </script>

ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-buildin-tool/controller.cs

@@ -0,0 +1,10 @@
+public class HomeController : Controller
+{
+
+    public ActionResult Index()
+    {
+        ViewBag.value = @"<p>The Rich Text Editor component is WYSIWYG (\'what you see is what you get\') editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes</p></li><li><p>Capable of handling markdown editing.</p></li><li><p>Contains a modular library to load the necessary functionality on demand.</p></li><li><p>Provides a fully customizable toolbar.</p></li><li><p>Provides HTML view to edit the source directly for developers.</p></li><li><p>Supports third-party library integration.</p></li><li><p>Allows preview of modified content before saving it.</p></li><li><p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager.</p></li><li><p>Creates bulleted and numbered lists.</p></li></ul>";
+        ViewBag.items = new[] { "Undo", "Redo", "|", "Bold", "Italic", "Underline", "StrikeThrough", "|", "FontName", "FontSize", "FontColor", "BackgroundColor" };
+        return View();
+    }
+}

ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-buildin-tool/razor

@@ -0,0 +1,2 @@
+
+@Html.EJS().RichTextEditor("toolbar").ToolbarSettings(e => e.Items((object)ViewBag.items)).Value(ViewBag.value).Render()

ej2-asp-core-mvc/code-snippet/rich-text-editor/remove-buildin-tool/tagHelper

@@ -0,0 +1,3 @@
+<ejs-richtexteditor id="toolbar" value="@ViewBag.value">
+    <e-richtexteditor-toolbarsettings items="@ViewBag.items"></e-richtexteditor-toolbarsettings>
+</ejs-richtexteditor>

ej2-asp-core-mvc/code-snippet/rich-text-editor/text-quick-toolbar/controller.cs

@@ -0,0 +1,10 @@
+public class HomeController : Controller
+{
+
+    public ActionResult Index()
+    {
+        ViewBag.value = @"<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";
+        ViewBag.text = new[] { "Bold", "Italic", "Underline", "FontColor", "BackgroundColor", "Alignments", "-", "FontSize", "FontName", "Formats", "OrderedList", "UnorderedList"};
+        return View();
+    }
+}

ej2-asp-core-mvc/code-snippet/rich-text-editor/text-quick-toolbar/razor

@@ -0,0 +1 @@
+@Html.EJS().RichTextEditor("text").QuickToolbarSettings(e => { e.Text((object)ViewBag.text); }).Value(ViewBag.value).Render()

ej2-asp-core-mvc/code-snippet/rich-text-editor/text-quick-toolbar/tagHelper

@@ -0,0 +1,3 @@
+<ejs-richtexteditor id="text" value="@ViewBag.value">
+    <e-richtexteditor-quicktoolbarsettings text="@ViewBag.text"></e-richtexteditor-quicktoolbarsettings>
+</ejs-richtexteditor>