Merge pull request #3755 from syncfusion-content/904164-cmtEvent-CM

904164: Added Comment Event in Core and MVC

Author: mugunthan-anbalagan

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/document-editor/comments.md

@@ -153,7 +153,9 @@ Document editor provides an option to protect and unprotect document using `enfo
 {% include code-snippet/document-editor-container/comment-only-protect/tagHelper %}
 {% endhighlight %}
 {% highlight c# tabtitle="Comment-only.cs" %}
-{% endhighlight %}{% endtabs %}
+{% include code-snippet/document-editor-container/comment-only-protect/document-editor.cs %}
+{% endhighlight %}
+{% endtabs %}
 
 {% elsif page.publishingplatform == "aspnet-mvc" %}
 
@@ -162,7 +164,9 @@ Document editor provides an option to protect and unprotect document using `enfo
 {% include code-snippet/document-editor-container/comment-only-protect/razor %}
 {% endhighlight %}
 {% highlight c# tabtitle="Comment-only.cs" %}
-{% endhighlight %}{% endtabs %}
+{% include code-snippet/document-editor-container/comment-only-protect/document-editor.cs %}
+{% endhighlight %}
+{% endtabs %}
 {% endif %}
 
 
@@ -185,7 +189,9 @@ The following example illustrates how to enable mention support in Document Edit
 {% include code-snippet/document-editor-container/comments-mention/tagHelper %}
 {% endhighlight %}
 {% highlight c# tabtitle="comments-mention.cs" %}
-{% endhighlight %}{% endtabs %}
+{% include code-snippet/document-editor-container/comments-mention/document-editor.cs %}
+{% endhighlight %}
+{% endtabs %}
 
 {% elsif page.publishingplatform == "aspnet-mvc" %}
 
@@ -194,5 +200,36 @@ The following example illustrates how to enable mention support in Document Edit
 {% include code-snippet/document-editor-container/comments-mention/razor %}
 {% endhighlight %}
 {% highlight c# tabtitle="comments-mention.cs" %}
-{% endhighlight %}{% endtabs %}
+{% include code-snippet/document-editor-container/comments-mention/document-editor.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+## Events
+
+DocumentEditor provides `beforeCommentAction` event, which is triggered on comment actions like Post, edit, reply, resolve and reopen. This event provides an opportunity to perform custom logic on comment actions like Post, edit, reply, resolve and reopen. The event handler receives the `CommentActionEventArgs` object as an argument, which allows access to information about the comment.
+
+To demonstrate a specific use case, let’s consider an example where we want to restrict the delete functionality based on the author’s name. The following code snippet illustrates how to allow only the author of a comment to delete:
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/document-editor-container/comments-event/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="comments-event.cs" %}
+{% include code-snippet/document-editor-container/comments-event/document-editor.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/document-editor-container/comments-event/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="comments-event.cs" %}
+{% include code-snippet/document-editor-container/comments-event/document-editor.cs %}
+{% endhighlight %}
+{% endtabs %}
 {% endif %}