SEO-2846 - ASP.NET Core Toast interlinking changes

ej2-asp-core-mvc/code-snippet/grid/row/row-info/razor

@@ -0,0 +1,17 @@
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).RowDataBound("rowDataBound").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true); }).Columns(col =>
+{
+    col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
+    col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
+    col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
+}).Render()
+
+<script>
+    function rowDataBound(args) {
+        var gridElement = document.getElementById('Grid').ej2_instances[0];
+        args.row.addEventListener('mouseover', function (e) {
+            console.log(gridElement.getRowInfo(e.target))
+        })
+    }
+</script>

ej2-asp-core-mvc/code-snippet/grid/row/row-info/row-info.cs

@@ -0,0 +1,5 @@
+public IActionResult Index()
+{
+    ViewBag.DataSource = OrderDetails.GetAllRecords();
+    return View();
+} 

ej2-asp-core-mvc/code-snippet/grid/row/row-info/tagHelper

@@ -0,0 +1,18 @@
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" rowDataBound="rowDataBound">
+    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings>
+    <e-grid-columns>
+        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer ID" width="140"></e-grid-column>
+        <e-grid-column field="Freight" headerText="Freight" width="120" format='C2'></e-grid-column>
+        <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="140"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+
+<script>
+    function rowDataBound(args) {
+        var gridElement = document.getElementById('Grid').ej2_instances[0];
+        args.row.addEventListener('mouseover', function (e) {
+            console.log(gridElement.getRowInfo(e.target))
+        })
+    }
+</script>

ej2-asp-core-mvc/code-snippet/maps/map-providers/othermap/razor

@@ -1,4 +1,4 @@
 @using Syncfusion.EJ2;
 @Html.EJS().Maps("maps").Layers(l=> {
-    l.UrlTemplate("http://mt1.google.com/vt/lyrs=m@129&hl=en&x=tileX&y=tileY&z=level").Add();
+    l.UrlTemplate("http://api.tomtom.com/map/1/tile/basic/main/level/tileX/tileY.png?key=subscription_key").Add();
 }).Render()

ej2-asp-core-mvc/code-snippet/maps/map-providers/othermap/tagHelper

@@ -1,6 +1,6 @@
   @using Syncfusion.EJ2;
    <ejs-maps id="maps">
         <e-maps-layers>
-            <e-maps-layer urlTemplate="http://mt1.google.com/vt/lyrs=m@129&hl=en&x=tileX&y=tileY&z=level"></e-maps-layer>
+            <e-maps-layer urlTemplate="http://api.tomtom.com/map/1/tile/basic/main/level/tileX/tileY.png?key=subscription_key"></e-maps-layer>
         </e-maps-layers>
     </ejs-maps>

ej2-asp-core-mvc/code-snippet/maps/map-providers/othermaplegend/razor

@@ -3,7 +3,7 @@
 
 
 @{ 
-    var urlTemplate = "http://mt1.google.com/vt/lyrs=m@129&hl=en&x=tileX&y=tileY&z=level";
+    var urlTemplate = "http://api.tomtom.com/map/1/tile/basic/main/level/tileX/tileY.png?key=subscription_key";
 }
 <div class="control-section">
     <div id="outer" style="width:100%">

ej2-asp-core-mvc/code-snippet/maps/map-providers/othermaplegend/tagHelper

@@ -30,7 +30,7 @@
          <e-legendsettings-textstyle color="#000000" fontFamily="inherit"  />
      </e-maps-legendsettings>
      <e-maps-layers>
-         <e-maps-layer urlTemplate="http://mt1.google.com/vt/lyrs=m@129&hl=en&x=tileX&y=tileY&z=level" markerSettings="@Markers"></e-maps-layer>
+         <e-maps-layer urlTemplate="http://api.tomtom.com/map/1/tile/basic/main/level/tileX/tileY.png?key=subscription_key" markerSettings="@Markers"></e-maps-layer>
      </e-maps-layers>
 </ejs-maps>
 

ej2-asp-core-mvc/code-snippet/maps/map-providers/othermapmarker/razor

@@ -3,7 +3,7 @@
 
 @Html.EJS().Maps("maps").Layers(l =>
 {
-    l.UrlTemplate("http://mt1.google.com/vt/lyrs=m@129&hl=en&x=tileX&y=tileY&z=level").MarkerSettings(marker =>
+    l.UrlTemplate("http://api.tomtom.com/map/1/tile/basic/main/level/tileX/tileY.png?key=subscription_key").MarkerSettings(marker =>
        {
            marker.Visible(true).DataSource(ViewBag.markerData).Add();
        }).NavigationLineSettings(ns =>

ej2-asp-core-mvc/code-snippet/maps/map-providers/othermapmarker/tagHelper

@@ -11,7 +11,7 @@
 <div id="control-section">
     <ejs-maps id="maps" load="window.onMapLoad">
         <e-maps-layers>
-            <e-maps-layer urlTemplate="http://mt1.google.com/vt/lyrs=m@129&hl=en&x=tileX&y=tileY&z=level" markerSettings="marker"></e-maps-layer>
+            <e-maps-layer urlTemplate="http://api.tomtom.com/map/1/tile/basic/main/level/tileX/tileY.png?key=subscription_key" markerSettings="marker"></e-maps-layer>
         </e-maps-layers>
     </ejs-maps>
 </div>

ej2-asp-core-mvc/code-snippet/maps/map-providers/othermapzoom/razor

@@ -1,4 +1,4 @@
 @using Syncfusion.EJ2;
 @Html.EJS().Maps("maps").ZoomSettings(zoom=>zoom.Enable(true)).Layers(l=> {
-    l.UrlTemplate("http://mt1.google.com/vt/lyrs=m@129&hl=en&x=tileX&y=tileY&z=level").Add();
+    l.UrlTemplate("http://api.tomtom.com/map/1/tile/basic/main/level/tileX/tileY.png?key=subscription_key").Add();
 }).Render()

ej2-asp-core-mvc/code-snippet/maps/map-providers/othermapzoom/tagHelper

@@ -2,6 +2,6 @@
    <ejs-maps id="maps">
         <e-maps-zoomSettings Enable="true">
         <e-maps-layers>
-            <e-maps-layer urlTemplate="http://mt1.google.com/vt/lyrs=m@129&hl=en&x=tileX&y=tileY&z=level"></e-maps-layer>
+            <e-maps-layer urlTemplate="http://api.tomtom.com/map/1/tile/basic/main/level/tileX/tileY.png?key=subscription_key"></e-maps-layer>
         </e-maps-layers>
     </ejs-maps>

ej2-asp-core-mvc/code-snippet/maps/map-providers/othersublayer/razor

@@ -1,6 +1,6 @@
 @using Syncfusion.EJ2;
 @Html.EJS().Maps("maps").Layers(l =>
    {
-       l.UrlTemplate("http://mt1.google.com/vt/lyrs=m@129&hl=en&x=tileX&y=tileY&z=level").Add();
+       l.UrlTemplate("http://api.tomtom.com/map/1/tile/basic/main/level/tileX/tileY.png?key=subscription_key").Add();
        l.ShapeData(ViewBag.africaMapShape).Type("SubLayer").Add();
    }).Render()

ej2-asp-core-mvc/code-snippet/maps/map-providers/othersublayer/tagHelper

@@ -3,7 +3,7 @@
 @using Syncfusion.EJ2;
 <ejs-maps id="maps">
         <e-maps-layers>
-            <e-maps-layer urlTemplate="http://mt1.google.com/vt/lyrs=m@129&hl=en&x=tileX&y=tileY&z=level"></e-maps-layer>
+            <e-maps-layer urlTemplate="http://api.tomtom.com/map/1/tile/basic/main/level/tileX/tileY.png?key=subscription_key"></e-maps-layer>
             <e-maps-layer type="SubLayer" shapeData="ViewBag.africaMap">
                 <e-layersettings-shapesettings fill="blue"></e-layersettings-shapesettings>
             </e-maps-layer>

ej2-asp-core-mvc/code-snippet/message/close-icon/controller.cs

@@ -0,0 +1,8 @@
+public class HomeController : Controller
+{
+
+    public ActionResult Index()
+    {
+        return View();
+    }
+}

ej2-asp-core-mvc/code-snippet/message/close-icon/razor

@@ -0,0 +1,108 @@
+<div class="msg-icon-section">
+  <div class="msg-content-section">
+    @Html.EJS().Button("btn1").Content("Show Default Message").CssClass("e-outline e-primary msg-hidden").Render()
+    @Html.EJS().Message("msg_default_icon").Severity(Severity.Normal).Content("Editing is
+    restricted").ShowCloseIcon(true).Closed("defaultClosed").Render()
+    @Html.EJS().Button("btn2").Content("Show Info Message").CssClass("e-outline e-primary e-info msg-hidden").Render()
+    @Html.EJS().Message("msg_info_icon").Severity(Severity.Info).Content("Please read the comments
+    carefully").ShowCloseIcon(true).Closed("infoClosed").Render()
+    @Html.EJS().Button("btn3").Content("Show Success Message").CssClass("e-outline e-primary e-success
+    msg-hidden").Render()
+    @Html.EJS().Message("msg_success_icon").Severity(Severity.Success).Content("Your message has been sent
+    successfully").ShowCloseIcon(true).Closed("successClosed").Render()
+    @Html.EJS().Button("btn4").Content("Show Warning Message").CssClass("e-outline e-primary e-warning
+    msg-hidden").Render()
+    @Html.EJS().Message("msg_warning_icon").Severity(Severity.Warning).Content("There was a problem with your network
+    connection").ShowCloseIcon(true).Closed("warningClosed").Render()
+    @Html.EJS().Button("btn5").Content("Show Error Message").CssClass("e-outline e-primary e-danger
+    msg-hidden").Render()
+    @Html.EJS().Message("msg_error_icon").Severity(Severity.Error).Content("A problem has been occurred while submitting
+    your data").ShowCloseIcon(true).Closed("errorClosed").Render()
+  </div>
+</div>
+
+<script>
+  document.getElementById("btn1").onclick = function (e) {
+    var msgDefault = ej.base.getComponent(document.getElementById("msg_default_icon"), "message");
+    var defaultBtn = ej.base.getComponent(document.getElementById("btn1"), "btn");
+    show(msgDefault, defaultBtn);
+  }
+
+  document.getElementById("btn2").onclick = function (e) {
+    var msgInfo = ej.base.getComponent(document.getElementById("msg_info_icon"), "message");
+    var infoBtn = ej.base.getComponent(document.getElementById("btn2"), "btn");
+    show(msgInfo, infoBtn);
+  }
+
+  document.getElementById("btn3").onclick = function (e) {
+    var msgSuccess = ej.base.getComponent(document.getElementById("msg_success_icon"), "message");
+    var successBtn = ej.base.getComponent(document.getElementById("btn3"), "btn");
+    show(msgSuccess, successBtn);
+  }
+
+  document.getElementById("btn4").onclick = function (e) {
+    var msgWarning = ej.base.getComponent(document.getElementById("msg_warning_icon"), "message");
+    var warningBtn = ej.base.getComponent(document.getElementById("btn4"), "btn");
+    show(msgWarning, warningBtn);
+  }
+
+  document.getElementById("btn5").onclick = function (e) {
+    var msgError = ej.base.getComponent(document.getElementById("msg_error_icon"), "message");
+    var errorBtn = ej.base.getComponent(document.getElementById("btn5"), "btn");
+    show(msgError, errorBtn);
+  }
+</script>
+
+<script>
+  function defaultClosed() {
+    var defaultBtn = ej.base.getComponent(document.getElementById("btn1"), "btn");
+    defaultBtn.element.classList.remove("msg-hidden");
+  }
+
+  function infoClosed() {
+    var infoBtn = ej.base.getComponent(document.getElementById("btn2"), "btn");
+    infoBtn.element.classList.remove("msg-hidden");
+  }
+
+  function warningClosed() {
+    var warningBtn = ej.base.getComponent(document.getElementById("btn4"), "btn");
+    warningBtn.element.classList.remove("msg-hidden");
+  }
+
+  function successClosed() {
+    var successBtn = ej.base.getComponent(document.getElementById("btn3"), "btn");
+    successBtn.element.classList.remove("msg-hidden");
+  }
+
+  function errorClosed() {
+    var errorBtn = ej.base.getComponent(document.getElementById("btn5"), "btn");
+    errorBtn.element.classList.remove("msg-hidden");
+  }
+
+  function show(message, btn) {
+    message.visible = true;
+    btn.element.classList.add("msg-hidden");
+  }
+
+</script>
+
+<style>
+  .msg-icon-section .content-section {
+    margin: 0 auto;
+    max-width: 450px;
+    padding-top: 10px;
+  }
+
+  .msg-icon-section .e-message {
+    margin: 10px 0;
+  }
+
+  .msg-icon-section .e-btn {
+    display: block;
+    margin: 10px 0;
+  }
+
+  .msg-icon-section .e-btn.msg-hidden {
+    display: none;
+  }
+</style>

ej2-asp-core-mvc/code-snippet/message/close-icon/tagHelper

@@ -0,0 +1,105 @@
+<div class="msg-icon-section">
+  <div class="content-section">
+    <ejs-button id="btn1" content="Show Default Message" cssClass="e-outline e-primary msg-hidden"></ejs-button>
+    <ejs-message id="msg_default_icon" showCloseIcon="true" closed="defaultClosed" content="Editing is restricted">
+    </ejs-message>
+    <ejs-button id="btn2" content="Show Info Message" cssClass="e-outline e-primary e-info msg-hidden"></ejs-button>
+    <ejs-message id="msg_info_icon" severity="Info" showCloseIcon="true" closed="infoClosed"
+      content="Please read the comments carefully"></ejs-message>
+    <ejs-button id="btn3" content="Show Success Message" cssClass="e-outline e-primary e-success msg-hidden">
+    </ejs-button>
+    <ejs-message id="msg_success_icon" severity="Success" showCloseIcon="true" closed="successClosed"
+      content="Your message has been sent successfully"></ejs-message>
+    <ejs-button id="btn4" content="Show Warning Message" cssClass="e-outline e-primary e-warning msg-hidden">
+    </ejs-button>
+    <ejs-message id="msg_warning_icon" severity="Warning" showCloseIcon="true" closed="warningClosed"
+      content="There was a problem with your network connection"></ejs-message>
+    <ejs-button id="btn5" content="Show Error Message" cssClass="e-outline e-primary e-error msg-hidden"></ejs-button>
+    <ejs-message id="msg_error_icon" severity="Error" showCloseIcon="true" closed="errorClosed"
+      content="A problem has been occurred while submitting your data"></ejs-message>
+  </div>
+</div>
+
+<script type="text/javascript">
+  document.getElementById("btn1").onclick = function (e) {
+    var msgDefault = ej.base.getComponent(document.getElementById("msg_default_icon"), "message");
+    var defaultBtn = ej.base.getComponent(document.getElementById("btn1"), "btn");
+    show(msgDefault, defaultBtn);
+  }
+
+  document.getElementById("btn2").onclick = function (e) {
+    var msgInfo = ej.base.getComponent(document.getElementById("msg_info_icon"), "message");
+    var infoBtn = ej.base.getComponent(document.getElementById("btn2"), "btn");
+    show(msgInfo, infoBtn);
+  }
+
+  document.getElementById("btn3").onclick = function (e) {
+    var msgSuccess = ej.base.getComponent(document.getElementById("msg_success_icon"), "message");
+    var successBtn = ej.base.getComponent(document.getElementById("btn3"), "btn");
+    show(msgSuccess, successBtn);
+  }
+
+  document.getElementById("btn4").onclick = function (e) {
+    var msgWarning = ej.base.getComponent(document.getElementById("msg_warning_icon"), "message");
+    var warningBtn = ej.base.getComponent(document.getElementById("btn4"), "btn");
+    show(msgWarning, warningBtn);
+  }
+
+  document.getElementById("btn5").onclick = function (e) {
+    var msgError = ej.base.getComponent(document.getElementById("msg_error_icon"), "message");
+    var errorBtn = ej.base.getComponent(document.getElementById("btn5"), "btn");
+    show(msgError, errorBtn);
+  }
+
+  function defaultClosed() {
+    var defaultBtn = ej.base.getComponent(document.getElementById("btn1"), "btn");
+    defaultBtn.element.classList.remove("msg-hidden");
+  }
+
+  function infoClosed() {
+    var infoBtn = ej.base.getComponent(document.getElementById("btn2"), "btn");
+    infoBtn.element.classList.remove("msg-hidden");
+  }
+
+  function warningClosed() {
+    var warningBtn = ej.base.getComponent(document.getElementById("btn4"), "btn");
+    warningBtn.element.classList.remove("msg-hidden");
+  }
+
+  function successClosed() {
+    var successBtn = ej.base.getComponent(document.getElementById("btn3"), "btn");
+    successBtn.element.classList.remove("msg-hidden");
+  }
+
+  function errorClosed() {
+    var errorBtn = ej.base.getComponent(document.getElementById("btn5"), "btn");
+    errorBtn.element.classList.remove("msg-hidden");
+  }
+
+  function show(message, btn) {
+    message.visible = true;
+    btn.element.classList.add("msg-hidden");
+  }
+
+</script>
+
+<style>
+  .msg-icon-section .content-section {
+    margin: 0 auto;
+    max-width: 450px;
+    padding-top: 10px;
+  }
+
+  .msg-icon-section .e-message {
+    margin: 10px 0;
+  }
+
+  .msg-icon-section .e-btn {
+    display: block;
+    margin: 10px 0;
+  }
+
+  .msg-icon-section .e-btn.msg-hidden {
+    display: none;
+  }
+</style>

ej2-asp-core-mvc/code-snippet/message/content-alignment/controller.cs

@@ -0,0 +1,8 @@
+public class HomeController : Controller
+{
+
+    public ActionResult Index()
+    {
+        return View();
+    }
+}

ej2-asp-core-mvc/code-snippet/message/content-alignment/razor

@@ -0,0 +1,20 @@
+<div class="msg-custom-section">
+    <div class="msg-content-section">
+        <h4>Content Alignment</h4>
+        @Html.EJS().Message("msg-content-left").Severity(Severity.Success).Content("Your license has been activated successfully").Render()
+        @Html.EJS().Message("msg-content-center").Severity(Severity.Warning).Content("The license will expire today").CssClass("e-content-center").Render()
+        @Html.EJS().Message("msg-content-right").Severity(Severity.Error).Content("The license key is invalid").CssClass("e-content-right").Render()
+    </div>
+</div>
+
+<style>
+  .msg-custom-section .content-section {
+    margin: 0 auto;
+    max-width: 400px;
+    padding-top: 10px;
+  }
+
+  .msg-custom-section .e-message {
+    margin: 10px 0;
+  }
+</style>