884032: conflicts issue resolved

ej2-asp-core-mvc/circular-gauge/gauge-animation.md

@@ -0,0 +1,63 @@
+---
+layout: post
+title: Animation in ##Platform_Name## Circular Gauge component | Syncfusion
+description: Learn here all about animation in the Syncfusion ##Platform_Name## Circular Gauge component of Syncfusion Essential JS 2 and more.
+platform: ej2-asp-core-mvc
+control: Circular Gauge
+publishingplatform: ##Platform_Name##
+documentation: ug
+---
+
+# Animation in Circular Gauge component
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+All of the elements in the Circular Gauge, such as the axis lines, ticks, labels, ranges, pointers, and annotations, can be animated sequentially by using the [animationDuration](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.CircularGauge.CircularGauge.html#Syncfusion_EJ2_CircularGauge_CircularGauge_AnimationDuration) property. The animation for the Circular Gauge is enabled when the `animationDuration` property is set to an appropriate value in milliseconds, providing a smooth rendering effect for the component. If the `animationDuration` property is set to **0**, which is the default value, the animation effect is disabled. If the animation is enabled, the component will behave in the following order.
+
+1. The axis line will be animated in the rendering direction (clockwise or anticlockwise).
+2. Each tick line and label will then be animated.
+3. If available, ranges will be animated.
+4. If available, pointers will be animated in the same way as [pointer animation](https://ej2.syncfusion.com/aspnetcore/documentation/circular-gauge/gauge-pointers#animation).
+5. If available, annotations will be animated.
+
+The animation of the Circular Gauge is demonstrated in the following example.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/circulargauge/gauge-animation/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Animation.cs" %} 
+{% include code-snippet/circulargauge/gauge-animation/gauge-animation.cs %} 
+{% endhighlight %}
+{% endtabs %}
+
+![Circular Gauge with Animation](../circular-gauge/images/animation.gif)
+
+> Only the pointer of the Circular Gauge can be animated individually, not the axis lines, ticks, labels, ranges, and annotations. You can refer this [link](https://ej2.syncfusion.com/aspnetcore/documentation/circular-gauge/gauge-pointers#animation) to enable only pointer animation.
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+All of the elements in the Circular Gauge, such as the axis lines, ticks, labels, ranges, pointers, and annotations, can be animated sequentially by using the [AnimationDuration](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.CircularGauge.CircularGauge.html#Syncfusion_EJ2_CircularGauge_CircularGauge_AnimationDuration) property. The animation for the Circular Gauge is enabled when the `AnimationDuration` property is set to an appropriate value in milliseconds, providing a smooth rendering effect for the component. If the `AnimationDuration` property is set to **0**, which is the default value, the animation effect is disabled. If the animation is enabled, the component will behave in the following order.
+
+1. The axis line will be animated in the rendering direction (clockwise or anticlockwise).
+2. Each tick line and label will then be animated.
+3. If available, ranges will be animated.
+4. If available, pointers will be animated in the same way as [pointer animation](https://ej2.syncfusion.com/aspnetmvc/documentation/circular-gauge/gauge-pointers#animation).
+5. If available, annotations will be animated.
+
+The animation of the Circular Gauge is demonstrated in the following example.
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/circulargauge/gauge-animation/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Animation.cs" %}
+{% include code-snippet/circulargauge/gauge-animation/gauge-animation.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Circular Gauge with Animation](../circular-gauge/images/animation.gif)
+
+> Only the pointer of the Circular Gauge can be animated individually, not the axis lines, ticks, labels, ranges, and annotations. You can refer this [link](https://ej2.syncfusion.com/aspnetmvc/documentation/circular-gauge/gauge-pointers#animation) to enable only pointer animation.
+
+{% endif %}

ej2-asp-core-mvc/code-snippet/chart/getting-started/multi-export/tagHelper

@@ -21,4 +21,4 @@
         var chart1 = document.getElementById('container1').ej2_instances[0];
         chart.exportModule.export('PNG', 'chart', 'Landscape', [chart,chart1]);
     };
-</script>
+</script>

ej2-asp-core-mvc/code-snippet/circulargauge/gauge-animation/gauge-animation.cs

@@ -0,0 +1,19 @@
+using System;
+using System.Collections.Generic;
+using System.Diagnostics;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using EJ2_Core_Application.Models;
+using Newtonsoft.Json;
+
+namespace EJ2_Core_Application.Controllers
+{
+    public class HomeController : Controller
+    {
+        public IActionResult Index()
+        {
+            return View();
+        }
+    }
+}

ej2-asp-core-mvc/code-snippet/circulargauge/gauge-animation/razor

@@ -0,0 +1,26 @@
+@using Syncfusion.EJ2;
+@using Syncfusion.EJ2.CircularGauge;
+
+@Html.EJS().CircularGauge("container").AnimationDuration(2000).Load("gaugeLoad").Background("transparent").Axes(axes => axes
+        .Radius("80%").StartAngle(230).EndAngle(130).LabelStyle(labelStyle => labelStyle.Position(Position.Inside).Font(font => font.FontFamily("inherit")).Offset(-1))
+        .Annotations(annotation => annotation.Content("<div style='font-size:18px;margin-left: -20px;margin-top: -12px; color:#9DD55A'>60</div>").ZIndex("1").Angle(165).Radius("35%").Add())
+        .Pointers(pointer => pointer.Value(60).Radius("60%").PointerWidth(7).Color("#c06c84").Animation(animation => animation.Enable(true).Duration(2000)).Cap(cap => cap.Radius(8).Color("#c06c84").Border(border => border.Width(0))).NeedleTail(needleTail => needleTail.Length("0%")).Add())
+        .Ranges(range => range.Start(0).End(30).StartWidth(22).EndWidth(22).Color("#E63B86").Radius("60%").Add())
+        .LineStyle(lineStyle => lineStyle.Width(8).Color("#E0E0E0"))
+        .MinorTicks(minorTick => minorTick.Offset(5)).MajorTicks(majorTick => majorTick.Offset(5)).Add()).Render()
+<script>
+
+    var rangeLinearGradient = {
+        startValue: '0%',
+        endValue: '100%',
+        colorStop: [
+            { color: '#9e40dc', offset: '0%', opacity: 1 },
+            { color: '#d93c95', offset: '70%', opacity: 1 },
+        ],
+    };
+
+    window.gaugeLoad = function (args) {
+        args.gauge.axes[0].ranges[0].linearGradient = rangeLinearGradient;
+    }
+
+</script>

ej2-asp-core-mvc/code-snippet/circulargauge/gauge-animation/tagHelper

@@ -0,0 +1,49 @@
+@using Syncfusion.EJ2;
+
+@{
+    var labelFont = new Syncfusion.EJ2.CircularGauge.CircularGaugeFont { FontFamily = "inherit" };
+}
+
+<ejs-circulargauge id="container" load="gaugeLoad">
+    <e-circulargauge-axes>
+        <e-circulargauge-axis startAngle="230" endAngle="130" minimum="0" maximum="100" radius="80%">
+            <e-circulargauge-annotations>
+                <e-circulargauge-annotation angle="165" radius="35%" content='<div style=" font-size:18px;margin-left: -20px;margin-top: -12px; color:#9DD55A">60</div>' zIndex="1"></e-circulargauge-annotation>
+            </e-circulargauge-annotations>
+            <e-axis-linestyle width="8" color="#E0E0E0"></e-axis-linestyle>
+            <e-axis-labelstyle offset="-1" font="labelFont">
+            </e-axis-labelstyle>
+            <e-circulargauge-pointers>
+                <e-circulargauge-pointer value="60" radius="60%" color="#c06c84" pointerWidth=7>
+                    <e-pointer-animation enable="true" duration=500></e-pointer-animation>
+                    <e-pointer-cap radius="8" color="#c06c84">
+                        <e-pointers-cap-border width="0" />
+                    </e-pointer-cap>
+                    <e-pointer-needletail length="0%" />
+                </e-circulargauge-pointer>
+            </e-circulargauge-pointers>
+            <e-circulargauge-ranges>
+                <e-circulargauge-range start="0" end="30" color="#E63B86" startwidth="22" endwidth="22" radius="60%"></e-circulargauge-range>
+            </e-circulargauge-ranges>
+            <e-axis-majorticks offset="5"></e-axis-majorticks>
+            <e-axis-minorticks offset="5"></e-axis-minorticks>
+        </e-circulargauge-axis>
+    </e-circulargauge-axes>
+</ejs-circulargauge>
+
+<script>
+    var rangeLinearGradient = {
+        startValue: '0%',
+        endValue: '100%',
+        colorStop: [
+            { color: '#9e40dc', offset: '0%', opacity: 1 },
+            { color: '#d93c95', offset: '70%', opacity: 1 },
+        ],
+    };
+
+    window.gaugeLoad = function (args) {
+        args.gauge.animationDuration = 2000;
+        args.gauge.axes[0].ranges[0].linearGradient = rangeLinearGradient;
+
+    }
+</script>

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

@@ -0,0 +1,37 @@
+@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;
+        let mentionData = [
+            { "Name": "Selma Rose", "Eimg": "3", "EmailId": "selma@mycompany.com" },
+            { "Name": "Russo Kay", "Eimg": "8", "EmailId": "russo@mycompany.com" },
+            { "Name": "Camden Kate", "Eimg": "9", "EmailId": "camden@mycompany.com" },
+            { "Name": "Mary Kate", "Eimg": "4", "EmailId": "marry@mycompany.com" },
+            { "Name": "Ursula Ann", "Eimg": "2", "EmailId": "ursula@mycompany.com" },
+            { "Name": "Margaret", "Eimg": "5", "EmailId": "margaret@mycompany.com" },
+            { "Name": "Laura Grace", "Eimg": "6", "EmailId": "laura@mycompany.com" },
+            { "Name": "Robert", "Eimg": "8", "EmailId": "robert@mycompany.com" },
+            { "Name": "Albert", "Eimg": "9", "EmailId": "albert@mycompany.com" },
+            { "Name": "Michale", "Eimg": "10", "EmailId": "michale@mycompany.com" },
+            { "Name": "Andrew James", "Eimg": "7", "EmailId": "james@mycompany.com" },
+            { "Name": "Rosalie", "Eimg": "4", "EmailId": "rosalie@mycompany.com" },
+            { "Name": "Stella Ruth", "Eimg": "2", "EmailId": "stella@mycompany.com" },
+            { "Name": "Richard Rose", "Eimg": "10", "EmailId": "richard@mycompany.com" },
+            { "Name": "Gabrielle", "Eimg": "3", "EmailId": "gabrielle@mycompany.com" },
+            { "Name": "Thomas", "Eimg": "7", "EmailId": "thomas@mycompany.com" },
+            { "Name": "Charles Danny", "Eimg": "8", "EmailId": "charles@mycompany.com" },
+            { "Name": "Daniel", "Eimg": "10", "EmailId": "daniel@mycompany.com" },
+            { "Name": "Matthew", "Eimg": "7", "EmailId": "matthew@mycompany.com" },
+            { "Name": "Donald Krish", "Eimg": "9", "EmailId": "donald@mycompany.com" },
+            { "Name": "Yohana", "Eimg": "1", "EmailId": "yohana@mycompany.com" },
+            { "Name": "Kevin Paul", "Eimg": "10", "EmailId": "kevin@mycompany.com" },
+            { "Name": "Andrew Fuller", "Eimg": "3", "EmailId": "andrew@mycompany.com"}
+        ];
+        container.documentEditorSettings.mentionSettings = { dataSource: mentionData, fields: { text: 'Name' }};
+    }
+</script>

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

@@ -0,0 +1,38 @@
+
+<ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" 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": "Selma Rose", "Eimg": "3", "EmailId": "selma@mycompany.com" },
+            { "Name": "Russo Kay", "Eimg": "8", "EmailId": "russo@mycompany.com" },
+            { "Name": "Camden Kate", "Eimg": "9", "EmailId": "camden@mycompany.com" },
+            { "Name": "Mary Kate", "Eimg": "4", "EmailId": "marry@mycompany.com" },
+            { "Name": "Ursula Ann", "Eimg": "2", "EmailId": "ursula@mycompany.com" },
+            { "Name": "Margaret", "Eimg": "5", "EmailId": "margaret@mycompany.com" },
+            { "Name": "Laura Grace", "Eimg": "6", "EmailId": "laura@mycompany.com" },
+            { "Name": "Robert", "Eimg": "8", "EmailId": "robert@mycompany.com" },
+            { "Name": "Albert", "Eimg": "9", "EmailId": "albert@mycompany.com" },
+            { "Name": "Michale", "Eimg": "10", "EmailId": "michale@mycompany.com" },
+            { "Name": "Andrew James", "Eimg": "7", "EmailId": "james@mycompany.com" },
+            { "Name": "Rosalie", "Eimg": "4", "EmailId": "rosalie@mycompany.com" },
+            { "Name": "Stella Ruth", "Eimg": "2", "EmailId": "stella@mycompany.com" },
+            { "Name": "Richard Rose", "Eimg": "10", "EmailId": "richard@mycompany.com" },
+            { "Name": "Gabrielle", "Eimg": "3", "EmailId": "gabrielle@mycompany.com" },
+            { "Name": "Thomas", "Eimg": "7", "EmailId": "thomas@mycompany.com" },
+            { "Name": "Charles Danny", "Eimg": "8", "EmailId": "charles@mycompany.com" },
+            { "Name": "Daniel", "Eimg": "10", "EmailId": "daniel@mycompany.com" },
+            { "Name": "Matthew", "Eimg": "7", "EmailId": "matthew@mycompany.com" },
+            { "Name": "Donald Krish", "Eimg": "9", "EmailId": "donald@mycompany.com" },
+            { "Name": "Yohana", "Eimg": "1", "EmailId": "yohana@mycompany.com" },
+            { "Name": "Kevin Paul", "Eimg": "10", "EmailId": "kevin@mycompany.com" },
+            { "Name": "Andrew Fuller", "Eimg": "3", "EmailId": "andrew@mycompany.com"}
+        ];
+        container.documentEditorSettings.mentionSettings = { dataSource: mentionData, fields: { text: 'Name' }};
+    }
+</script>

ej2-asp-core-mvc/code-snippet/document-editor-container/customize-color-picker/document-editor.cs

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

ej2-asp-core-mvc/code-snippet/document-editor-container/customize-color-picker/razor

@@ -0,0 +1,4 @@
+@Html.EJS().DocumentEditorContainer("container").EnableToolbar(true).DocumentEditorSettings("settings").Render()
+<script>
+    var settings = { colorPickerSettings: { mode: 'Palette', modeSwitcher: true, showButtons: true } };
+</script>

ej2-asp-core-mvc/code-snippet/document-editor-container/customize-color-picker/tagHelper

@@ -0,0 +1,5 @@
+<ejs-documenteditorcontainer id="container" documentEditorSettings="settings" enableToolbar=true  height="590px"></ejs-documenteditorcontainer>
+
+<script>
+    var settings = { colorPickerSettings: { mode: 'Palette', modeSwitcher: true, showButtons: true } };
+</script>

ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-blob/document-editor.cs

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

ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-blob/razor

@@ -0,0 +1,16 @@
+@Html.EJS().Button("export").Content("Export").Render()
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditorContainer("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render()
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        container.resize();
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.saveAsBlob('Docx');
+        });
+    }); 
+</script>

ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-blob/tagHelper

@@ -0,0 +1,16 @@
+<ejs-button id="export">Export</ejs-button>
+<div id="documenteditor" style="width:100%;height:100%">
+    <ejs-documenteditorcontainer id="container" isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true></ejs-documenteditorcontainer> 
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        container.resize();
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.saveAsBlob('Docx');
+        });
+    }); 
+</script>

ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-docx/document-editor.cs

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

ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-docx/razor

@@ -0,0 +1,16 @@
+@Html.EJS().Button("export").Content("Export").Render()
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditorContainer("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render()
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        container.resize();
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.save('sample', 'Docx');
+        });
+    }); 
+</script>

ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-docx/tagHelper

@@ -0,0 +1,16 @@
+<ejs-button id="export">Export</ejs-button>
+<div id="documenteditor" style="width:100%;height:100%">
+    <ejs-documenteditorcontainer id="container" isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true></ejs-documenteditorcontainer> 
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        container.resize();
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.save('sample', 'Docx');
+        });
+    }); 
+</script>

ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-dotx/document-editor.cs

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

ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-dotx/razor

@@ -0,0 +1,16 @@
+@Html.EJS().Button("export").Content("Export").Render()
+<div id="documenteditor" style="width:100%;height:100%">
+    @Html.EJS().DocumentEditorContainer("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render()
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        container.resize();
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.save('sample', 'Dotx');
+        });
+    }); 
+</script>

ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-dotx/tagHelper

@@ -0,0 +1,16 @@
+<ejs-button id="export">Export</ejs-button>
+<div id="documenteditor" style="width:100%;height:100%">
+    <ejs-documenteditorcontainer id="container" isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true></ejs-documenteditorcontainer> 
+</div>
+
+<script>
+    var documenteditor;
+    document.addEventListener('DOMContentLoaded', function () {
+        var documenteditorElement = document.getElementById("container");
+        container = documenteditorElement.ej2_instances[0];
+        container.resize();
+        document.getElementById('export').addEventListener('click', function () {
+            container.documentEditor.save('sample', 'Dotx');
+        });
+    }); 
+</script>

ej2-asp-core-mvc/code-snippet/document-editor-container/export-container-sfdt/document-editor.cs

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