Documentation(926603-dev): Revamp for Accessibility in ASP.NET CORE a…

ej2-asp-core-mvc/code-snippet/grid/accessibility/ensuring-accessibility/ensuring-accessibility.cs

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

ej2-asp-core-mvc/code-snippet/grid/accessibility/ensuring-accessibility/razor

@@ -0,0 +1,21 @@
+@{
+    List<object> cols = new List<object>();
+    cols.Add(new { field = "OrderID", direction = "Ascending" });
+    cols.Add(new { field = "ShipCity", direction = "Descending" });
+}
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
+{
+    col.Type("checkbox").Width(50).Add();
+    col.Field("OrderID").HeaderText("Order ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Width(120).Add();
+    col.Field("CustomerID").HeaderText("Customer ID").Width(150).Add();
+    col.Field("OrderDate").HeaderText("Order Date").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(135).Format("yMd").Add();
+    col.Field("Freight").HeaderText("Freight($)").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(120).Format("C2").Add();
+    col.Field("ShipCity").HeaderText("Ship City").Width(150).Add();
+    col.Field("ShipCountry").HeaderText("Ship Country").Width(140).Add();
+    col.Field("ShipName").HeaderText("Shipped Name").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(145).Add();
+}).Toolbar(new List<string> { "Add", "Edit", "Delete", "Update", "Cancel", "Search", "ColumnChooser" }).SearchSettings(search => search.Fields(new string[] { "ShipCountry" }).Operator("contains").Key("a").IgnoreCase(true)).AllowPaging(true).PageSettings(page => page.PageCount(2).PageSizes(true)).AllowReordering(true).AllowRowDragAndDrop(true).AllowGrouping(true).GroupSettings(group => group.Columns(new string[] { "CustomerID" })).AllowSorting(true).SortSettings(sort => sort.Columns(cols)).AllowFiltering(true).FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Excel)).SelectionSettings(select => select.Type(Syncfusion.EJ2.Grids.SelectionType.Multiple).Mode(Syncfusion.EJ2.Grids.SelectionMode.Both)).SelectedRowIndex(6).EditSettings(edit => edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal)).ShowColumnChooser(true).Aggregates(gridAggregation =>
+{
+    gridAggregation.Columns(new List<Syncfusion.EJ2.Grids.GridAggregateColumn>() { new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "Freight", Type = "Sum", Format = "C2", GroupFooterTemplate = "Sum: ${Sum}" } }).Add();
+    gridAggregation.Columns(new List<Syncfusion.EJ2.Grids.GridAggregateColumn>() { new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "Freight", Type = "Sum", Format = "C2", FooterTemplate = "Sum: ${Sum}" } }).Add();
+    gridAggregation.Columns(new List<Syncfusion.EJ2.Grids.GridAggregateColumn>() { new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "Freight", Type = "Max", GroupCaptionTemplate = "Max: ${Max}" } }).Add();
+}).Render()

ej2-asp-core-mvc/code-snippet/grid/accessibility/ensuring-accessibility/tagHelper

@@ -0,0 +1,43 @@
+@{
+    List<object> cols = new List<object>();
+    cols.Add(new { field = "OrderID", direction = "Ascending" });
+    cols.Add(new { field = "ShipCity", direction = "Descending" });
+}
+
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" toolbar="@(new List<string>() {"Add", "Edit", "Delete", "Update", "Cancel","Search","ColumnChooser"})" allowPaging="true" allowReordering="true" allowGrouping="true" allowSorting="true" allowFiltering="true" showColumnChooser="true" allowRowDragAndDrop="true" height="400">
+<e-grid-editSettings allowEditing="true" allowAdding="true" allowDeleting="true" mode="Normal"></e-grid-editSettings>
+<e-grid-filterSettings type="Excel"></e-grid-filterSettings>
+    <e-grid-groupSettings columns="@(new string[] {"CustomerID"})">
+</e-grid-groupSettings>
+<e-grid-pageSettings pageSizes="true" pageCount="2"></e-grid-pageSettings>
+<e-grid-selectionSettings type="Multiple" mode="Both"></e-grid-selectionSettings>
+    <e-grid-sortSettings columns="cols"> </e-grid-sortSettings>
+    <e-grid-searchSettings fields="@(new string[] { "ShipCountry"})" operator="contains" key="a" ignoreCase="true"></e-grid-searchSettings>
+<e-grid-columns>
+    <e-grid-column type="checkbox" width="50"></e-grid-column>
+    <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
+    <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>
+    <e-grid-column field="OrderDate" headerText="Order Date" textAlign="Right" width="135" format="yMd"></e-grid-column>
+    <e-grid-column field="Freight" headerText="Freight($)" textAlign="Right" width="120" format="C2"></e-grid-column>
+    <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
+    <e-grid-column field="ShipCountry" headerText="Ship Country" width="140"></e-grid-column>
+    <e-grid-column field="ShipName" headerText="Shipped Name" textAlign="Right" width="145"></e-grid-column>
+</e-grid-columns>
+    <e-grid-aggregates>
+        <e-grid-aggregate>
+            <e-aggregate-columns>
+                <e-aggregate-column type="Sum" field="Freight" format="C2" groupFooterTemplate="Sum: ${Sum}"></e-aggregate-column>
+            </e-aggregate-columns>
+        </e-grid-aggregate>
+        <e-grid-aggregate>
+            <e-aggregate-columns>
+                <e-aggregate-column type="Sum" field="Freight" format="C2" footerTemplate="Sum: ${Sum}"></e-aggregate-column>
+            </e-aggregate-columns>
+        </e-grid-aggregate>
+       <e-grid-aggregate>
+            <e-aggregate-columns>
+            <e-aggregate-column type="Max" field="Freight" groupCaptionTemplate="Max: ${Max}"></e-aggregate-column>
+            </e-aggregate-columns>
+        </e-grid-aggregate>
+    </e-grid-aggregates>
+</ejs-grid>

ej2-asp-core-mvc/code-snippet/grid/accessibility/prevent-key/prevent-key.cs

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

ej2-asp-core-mvc/code-snippet/grid/accessibility/prevent-key/razor

@@ -0,0 +1,14 @@
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).KeyPressed("keyPressed").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("ShipCity").HeaderText("Ship City").Width("150").Add();
+    col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
+}).Render()
+<script>
+    function keyPressed(args) {
+        if (args.keyCode === 13) { 
+            args.cancel = true; // Prevent the default Enter key action
+        }
+    }
+</script>

ej2-asp-core-mvc/code-snippet/grid/accessibility/prevent-key/tagHelper

@@ -0,0 +1,15 @@
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" keyPressed="keyPressed">
+    <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="150"></e-grid-column>
+            <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
+            <e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+<script>
+    function keyPressed(args){
+    if (args.keyCode === 13)
+    {
+        args.cancel = true; // Prevent the default Enter key action
+    }}
+</script>

ej2-asp-core-mvc/code-snippet/grid/accessibility/shortcut-key/razor

@@ -0,0 +1,67 @@
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
+{
+        col.Field("OrderID").HeaderText("Order ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Width(120).Add();
+        col.Field("CustomerID").HeaderText("Customer ID").Width(120).Add();
+        col.Field("ShipCountry").HeaderText("Ship Country").Width(150).Add();
+}).AllowGrouping(true).KeyPressed("keyPressed").SelectionSettings(select => select.Type(Syncfusion.EJ2.Grids.SelectionType.Multiple)).EditSettings(edit => edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true)).Toolbar(new List<string> { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
+<script>
+    function keyPressed(e) {
+        var key = e.key.toLowerCase();
+        var grid = document.getElementById("Grid").ej2_instances[0]; 
+
+        switch (key) {
+            case 'n':
+                e.preventDefault();
+                grid.addRecord();
+                break;
+            case 's': 
+                if (e.ctrlKey) {
+                    e.preventDefault();
+                    grid.endEdit();
+                }
+                break;
+            case 'd': 
+                if (e.ctrlKey) {
+                    e.preventDefault();
+                    grid.deleteRecord();
+                }
+                break;
+            case 'a': 
+                if (e.ctrlKey) {
+                    e.preventDefault();
+                    grid.selectRowsByRange(0);
+                }
+                break;
+            case 'g': 
+                if (e.ctrlKey) {
+                    e.preventDefault();
+                    grid.groupColumn('CustomerID');
+                }
+                break;
+            case 'enter': 
+                e.preventDefault();
+                e.cancel = true;
+                grid.refreshColumns();
+                break;
+            case 'insert':
+                e.preventDefault();
+                e.cancel = true;
+                break;
+            case 'delete':
+                e.preventDefault();
+                e.cancel = true;
+                break;
+            case 'f2': 
+                e.preventDefault();
+                e.cancel = true;
+                break;
+            case '" "':
+                if (e.ctrlKey) {
+                    e.preventDefault();
+                    e.cancel = true;
+                }
+                break;
+              // Add more custom shortcuts as needed
+        }
+    }
+</script>

ej2-asp-core-mvc/code-snippet/grid/accessibility/shortcut-key/shortcut-key.cs

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

ej2-asp-core-mvc/code-snippet/grid/accessibility/shortcut-key/tagHelper

@@ -0,0 +1,70 @@
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="315" allowGrouping="true" keyPressed="keyPressed" toolbar="@(new List<string>() { "Add", "Edit", "Delete","Update","Cancel" })">
+  <e-grid-selectionsettings type="Multiple"></e-grid-selectionsettings>
+  <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" isPrimaryKey="true"></e-grid-column>
+    <e-grid-column field="CustomerID" headerText="Customer ID" width="120"></e-grid-column>
+    <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
+  </e-grid-columns>
+</ejs-grid>
+<script>
+    function keyPressed(e) {
+        var key = e.key.toLowerCase();
+        var grid = document.getElementById("Grid").ej2_instances[0]; 
+
+        switch (key) {
+            case 'n':
+                e.preventDefault();
+                grid.addRecord();
+                break;
+            case 's': 
+                if (e.ctrlKey) {
+                    e.preventDefault();
+                    grid.endEdit();
+                }
+                break;
+            case 'd': 
+                if (e.ctrlKey) {
+                    e.preventDefault();
+                    grid.deleteRecord();
+                }
+                break;
+            case 'a': 
+                if (e.ctrlKey) {
+                    e.preventDefault();
+                    grid.selectRowsByRange(0);
+                }
+                break;
+            case 'g': 
+                if (e.ctrlKey) {
+                    e.preventDefault();
+                    grid.groupColumn('CustomerID');
+                }
+                break;
+            case 'enter': 
+                e.preventDefault();
+                e.cancel = true;
+                grid.refreshColumns();
+                break;
+            case 'insert':
+                e.preventDefault();
+                e.cancel = true;
+                break;
+            case 'delete':
+                e.preventDefault();
+                e.cancel = true;
+                break;
+            case 'f2': 
+                e.preventDefault();
+                e.cancel = true;
+                break;
+            case '" "':
+                if (e.ctrlKey) {
+                    e.preventDefault();
+                    e.cancel = true;
+                }
+                break;
+              // Add more custom shortcuts as needed
+        }
+    }
+</script>

ej2-asp-core-mvc/grid/accessibility.md

@@ -208,14 +208,131 @@ The Grid component followed the [keyboard interaction](https://www.w3.org/WAI/AR
 > * The <kbd>Command</kbd> and <kbd>Control</kbd> keys on Mac devices can be interchanged. When this switch occurs, use the <kbd>Command</kbd> key in place of the <kbd>Control</kbd> key and the <kbd>Control</kbd> key in place of the <kbd>Command</kbd> key for the above listed key interactions with Mac devices. 
 > * For example, after switching the keys to group the columns when the header element is focused use <kbd>Command + Space</kbd> and for expanding the visible groups use <kbd>Ctrl + Down Arrow</kbd>.
 
+### How to prevent default key action behavior
+
+The Syncfusion ##Platform_Name## Grid provides flexibility to prevent the default key action behavior based on your requirements. This enables you to intercept and customize the behavior when specific keys are pressed within a web application
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+To prevent the default key action behavior in the grid, you can utilize the [keyPressed](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_KeyPressed) event. This event is triggered for every key press, allowing you to customize the behavior based on the pressed key.
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+To prevent the default key action behavior in the grid, you can utilize the [KeyPressed](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_KeyPressed) event. This event is triggered for every key press, allowing you to customize the behavior based on the pressed key.
+
+{% endif %}
+
+The following example demonstrates how to prevent the default behavior of the **"ENTER"** key using the `keyPressed` event. 
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/accessibility/prevent-key/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Accessibility.cs" %}
+{% include code-snippet/grid/accessibility/prevent-key/prevent-key.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/grid/accessibility/prevent-key/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Accessibility.cs" %}
+{% include code-snippet/grid/accessibility/prevent-key/prevent-key.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
+### Custom shortcut keys to perform grid actions
+
+The Syncfusion ##Platform_Name## Grid component enables you to enhance the usability of keyboard shortcuts for various grid actions and navigation. In addition to the built-in keyboard navigation capabilities, you can implement custom keyboard shortcuts to execute specific actions.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+To achieve this, you can utilize the [keyPressed](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_KeyPressed) event of the grid. This event is triggered for every key press, allowing you to customize the behavior based on the pressed key.
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+To achieve this, you can utilize the [keyPressed](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_KeyPressed) event of the grid. This event is triggered for every key press, allowing you to customize the behavior based on the pressed key.
+
+{% endif %}
+
+The following example demonstrates how to perform grid actions using shortcut keys through the `keyPressed` event. Within the event, define the following custom shortcuts to perform various grid actions:
+
+* Pressing N adds a new record.
+* Pressing Ctrl + S save a record by invoking endEdit.
+* Pressing Ctrl + D deletes a record.
+* Pressing Ctrl + A selects all rows.
+* Pressing Ctrl + G groups the grid by a specified column.
+
+And prevented the default actions associated with the following keyboard shortcuts used for default grouping and editing action:
+
+* Ctrl + Space
+* Insert
+* F2 
+* Delete 
+* Enter
+
+You can add more custom shortcuts and actions as needed to enhance the functionality of your Syncfusion ##Platform_Name## Grid component.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/accessibility/shortcut-key/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Accessibility.cs" %}
+{% include code-snippet/grid/accessibility/shortcut-key/shortcut-key.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/grid/accessibility/shortcut-key/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Accessibility.cs" %}
+{% include code-snippet/grid/accessibility/shortcut-key/shortcut-key.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
 ## Ensuring accessibility
 
 The Grid component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing.
 
 The accessibility compliance of the Grid component is shown in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/grid.html) in a new window to evaluate the accessibility of the Grid component with accessibility tools.
 
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/accessibility/ensuring-accessibility/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Accessibility.cs" %}
+{% include code-snippet/grid/accessibility/ensuring-accessibility/ensuring-accessibility.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/grid/accessibility/ensuring-accessibility/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Accessibility.cs" %}
+{% include code-snippet/grid/accessibility/ensuring-accessibility/ensuring-accessibility.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
 {% previewsample "https://ej2.syncfusion.com/accessibility/grid.html" %}
 
 ## See also
 
-* [Accessibility in Syncfusion Grid control](../common/accessibility)
+* [Accessibility in Syncfusion Grid control](../common/accessibility)