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..78e9ec542a 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 control](../common/accessibility)