From ef3286316786b42fb85e8b647030e6852604122a Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Fri, 6 Dec 2024 11:33:44 +0530 Subject: [PATCH 1/3] Documentation(926603-dev): Revamp for Accessibility in ASP.NET CORE and MVC --- .../ensuring-accessibility.cs | 6 + .../ensuring-accessibility/razor | 21 ++++ .../ensuring-accessibility/tagHelper | 43 +++++++ .../accessibility/prevent-key/prevent-key.cs | 6 + .../grid/accessibility/prevent-key/razor | 14 +++ .../grid/accessibility/prevent-key/tagHelper | 15 +++ .../grid/accessibility/shortcut-key/razor | 67 ++++++++++ .../shortcut-key/shortcut-key.cs | 6 + .../grid/accessibility/shortcut-key/tagHelper | 70 +++++++++++ ej2-asp-core-mvc/grid/accessibility.md | 119 +++++++++++++++++- 10 files changed, 366 insertions(+), 1 deletion(-) create mode 100644 ej2-asp-core-mvc/code-snippet/grid/accessibility/ensuring-accessibility/ensuring-accessibility.cs create mode 100644 ej2-asp-core-mvc/code-snippet/grid/accessibility/ensuring-accessibility/razor create mode 100644 ej2-asp-core-mvc/code-snippet/grid/accessibility/ensuring-accessibility/tagHelper create mode 100644 ej2-asp-core-mvc/code-snippet/grid/accessibility/prevent-key/prevent-key.cs create mode 100644 ej2-asp-core-mvc/code-snippet/grid/accessibility/prevent-key/razor create mode 100644 ej2-asp-core-mvc/code-snippet/grid/accessibility/prevent-key/tagHelper create mode 100644 ej2-asp-core-mvc/code-snippet/grid/accessibility/shortcut-key/razor create mode 100644 ej2-asp-core-mvc/code-snippet/grid/accessibility/shortcut-key/shortcut-key.cs create mode 100644 ej2-asp-core-mvc/code-snippet/grid/accessibility/shortcut-key/tagHelper diff --git a/ej2-asp-core-mvc/code-snippet/grid/accessibility/ensuring-accessibility/ensuring-accessibility.cs b/ej2-asp-core-mvc/code-snippet/grid/accessibility/ensuring-accessibility/ensuring-accessibility.cs new file mode 100644 index 0000000000..f6f0126ac7 --- /dev/null +++ b/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(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/accessibility/ensuring-accessibility/razor b/ej2-asp-core-mvc/code-snippet/grid/accessibility/ensuring-accessibility/razor new file mode 100644 index 0000000000..78ab71786c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/accessibility/ensuring-accessibility/razor @@ -0,0 +1,21 @@ +@{ + List cols = new List(); + cols.Add(new { field = "OrderID", direction = "Ascending" }); + cols.Add(new { field = "ShipCity", direction = "Descending" }); +} +@Html.EJS().Grid("Grid").DataSource((IEnumerable)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 { "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() { new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "Freight", Type = "Sum", Format = "C2", GroupFooterTemplate = "Sum: ${Sum}" } }).Add(); + gridAggregation.Columns(new List() { new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "Freight", Type = "Sum", Format = "C2", FooterTemplate = "Sum: ${Sum}" } }).Add(); + gridAggregation.Columns(new List() { new Syncfusion.EJ2.Grids.GridAggregateColumn() { Field = "Freight", Type = "Max", GroupCaptionTemplate = "Max: ${Max}" } }).Add(); +}).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/accessibility/ensuring-accessibility/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/accessibility/ensuring-accessibility/tagHelper new file mode 100644 index 0000000000..343d6d4b5b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/accessibility/ensuring-accessibility/tagHelper @@ -0,0 +1,43 @@ +@{ + List cols = new List(); + cols.Add(new { field = "OrderID", direction = "Ascending" }); + cols.Add(new { field = "ShipCity", direction = "Descending" }); +} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/accessibility/prevent-key/prevent-key.cs b/ej2-asp-core-mvc/code-snippet/grid/accessibility/prevent-key/prevent-key.cs new file mode 100644 index 0000000000..f6f0126ac7 --- /dev/null +++ b/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(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/accessibility/prevent-key/razor b/ej2-asp-core-mvc/code-snippet/grid/accessibility/prevent-key/razor new file mode 100644 index 0000000000..1969e5a56a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/accessibility/prevent-key/razor @@ -0,0 +1,14 @@ +@Html.EJS().Grid("Grid").DataSource((IEnumerable)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() + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/accessibility/prevent-key/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/accessibility/prevent-key/tagHelper new file mode 100644 index 0000000000..43eac8fd86 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/accessibility/prevent-key/tagHelper @@ -0,0 +1,15 @@ + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/accessibility/shortcut-key/razor b/ej2-asp-core-mvc/code-snippet/grid/accessibility/shortcut-key/razor new file mode 100644 index 0000000000..f6bae01629 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/accessibility/shortcut-key/razor @@ -0,0 +1,67 @@ +@Html.EJS().Grid("Grid").DataSource((IEnumerable)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 { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/accessibility/shortcut-key/shortcut-key.cs b/ej2-asp-core-mvc/code-snippet/grid/accessibility/shortcut-key/shortcut-key.cs new file mode 100644 index 0000000000..f6f0126ac7 --- /dev/null +++ b/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(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/accessibility/shortcut-key/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/accessibility/shortcut-key/tagHelper new file mode 100644 index 0000000000..a976c9f697 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/accessibility/shortcut-key/tagHelper @@ -0,0 +1,70 @@ + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/grid/accessibility.md b/ej2-asp-core-mvc/grid/accessibility.md index d61f67b0c3..76c985ac3e 100644 --- a/ej2-asp-core-mvc/grid/accessibility.md +++ b/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 Command and Control keys on Mac devices can be interchanged. When this switch occurs, use the Command key in place of the Control key and the Control key in place of the Command 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 Command + Space and for expanding the visible groups use Ctrl + Down Arrow. +### 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) \ No newline at end of file +* [Accessibility in Syncfusion Grid component](../common/accessibility) \ No newline at end of file From 4f6de30f25bf91a3e2d07b6f184955ebc0c06754 Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Wed, 11 Dec 2024 10:08:35 +0530 Subject: [PATCH 2/3] modified md file --- ej2-asp-core-mvc/grid/accessibility.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ej2-asp-core-mvc/grid/accessibility.md b/ej2-asp-core-mvc/grid/accessibility.md index 76c985ac3e..df85ef8f0c 100644 --- a/ej2-asp-core-mvc/grid/accessibility.md +++ b/ej2-asp-core-mvc/grid/accessibility.md @@ -335,4 +335,4 @@ The accessibility compliance of the Grid component is shown in the following sam ## See also -* [Accessibility in Syncfusion Grid component](../common/accessibility) \ No newline at end of file +* [Accessibility in Syncfusion Grid control](../common/accessibility) \ No newline at end of file From 08b521fbe4c24eae9dc85bd956a27ace7cca0ec6 Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Wed, 11 Dec 2024 10:12:15 +0530 Subject: [PATCH 3/3] modified the md file --- ej2-asp-core-mvc/grid/accessibility.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ej2-asp-core-mvc/grid/accessibility.md b/ej2-asp-core-mvc/grid/accessibility.md index df85ef8f0c..78e9ec542a 100644 --- a/ej2-asp-core-mvc/grid/accessibility.md +++ b/ej2-asp-core-mvc/grid/accessibility.md @@ -335,4 +335,4 @@ The accessibility compliance of the Grid component is shown in the following sam ## See also -* [Accessibility in Syncfusion Grid control](../common/accessibility) \ No newline at end of file +* [Accessibility in Syncfusion Grid control](../common/accessibility)