Skip to content

Commit 8f45862

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 3a04162 commit 8f45862

File tree

39 files changed

+2533
-443
lines changed

39 files changed

+2533
-443
lines changed

‎docs-aspnet/html-helpers/data-management/filter/accessibility/keyboard-navigation.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
title: Keyboard Navigation
3+
page_title: Keyboard Navigation
4+
description: "Get started with the Filter component and learn about the accessibility support it provides through its keyboard navigation functionality."
5+
slug: keynav_filter_aspnetcore
6+
position: 2
7+
---
8+
9+
# Keyboard Navigation
10+
11+
The keyboard navigation of the Filter component is always available.
12+
13+
The {{ site.product }} Filter component supports the following keyboard shortcuts:
14+
15+
| SHORTCUT | DESCRIPTION |
16+
|:--- |:--- |
17+
| `Enter` | Enables the inner navigation of the currently focused filter row or filter expression row |
18+
| `Esc` | Exits the inner navigation of the currently focused filter row or filter expression row |
19+
| `Left arrow` | Focuses the previous focusable element inside a filter row or filter expression row |
20+
| `Right arrow` | Focuses the next focusable element inside a filter row or filter expression row |
21+
| `Up arrow` | When the focus is on a filter row or filter expression row, the focus is moved to the previous filter row or filter expression row|
22+
| `Down arrow` | When the focus is on a filter row or filter expression row, the focus is moved to the next filter row or filter expression row|
23+
24+
For a complete example, refer to the [demo on keyboard navigation of the Filter](https://demos.telerik.com/{{site.platform}}/filter/keyboard-navigation).
25+
26+
## See Also
27+
28+
* [Keyboard Navigation by the Filter (Demo)](https://demos.telerik.com/{{site.platform}}/filter/keyboard-navigation)
29+
* [Accessibility in the Filter]({% slug accessibility_aspnetcore_filter %})

‎docs-aspnet/html-helpers/data-management/filter/accessibility/overview.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
title: Overview
3+
page_title: Filter Accessibility
4+
description: "Get started with the Filter component and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.1."
5+
slug: accessibility_aspnetcore_filter
6+
position: 1
7+
---
8+
9+
# Filter Accessibility
10+
11+
The Filter is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.1, and keyboard support.
12+
13+
For more information, refer to:
14+
* [Keyboard navigation by the {{site.product}} Filter]({% slug keynav_filter_aspnetcore %})
15+
* [Accessibility in Telerik UI for {{ site.framework }}]({% slug overview_accessibility %})
16+
17+
## WAI-ARIA
18+
19+
The component follows the WAI-ARIA Authoring Practices for implementing the keyboard navigation for its component role and is tested against the popular screen readers. For more information, refer to the article on [WAI-ARIA support in {{ site.product_short }}]({% slug overview_accessibility %}#wai-aria).
20+
21+
## Section 508
22+
23+
The Filter is compliant with the Section 508 requirements. For more information, refer to the article on [Section 508 support in {{ site.product }}]({% slug overview_accessibility %}#section-508).
24+
25+
## WCAG 2.1
26+
27+
The Filter supports the standards for providing accessible web content which are set by the [Web Content Accessibility Guidelines 2.1](https://www.w3.org/TR/WCAG/).
28+
29+
## See Also
30+
31+
* [Keyboard Navigation by the Filter (Demo)](https://demos.telerik.com/{{site.platform}}/filter/keyboard-navigation)
32+
* [Keyboard Navigation by the Filter]({% slug keynav_filter_aspnetcore %})

‎docs-aspnet/html-helpers/data-management/grid/columns/column-menu.md‎

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,29 @@ To enable the column menu, use the `ColumnMenu(true)` method. As a result, the c
1414

1515
> As of the R3 2022 release, the Grid also provides the option to set this property on individual Column level. You can disable the menu for a specific column by setting it to `.ColumnMenu(false)`.
1616
17+
## Column Reordering
18+
19+
As of {{ site.product }} R2 SP1 2023, the Grid's Column Menu provides an option to change the position of the target column by using **Move next** and **Move previous** buttons. The functionality requires that reordering for the columns is enabled.
20+
21+
```HtmlHelper
22+
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
23+
.Name("grid")
24+
.Reorderable(reorder => reorder.Columns(true))
25+
)
26+
```
27+
{% if site.core %}
28+
```TagHelper
29+
<kendo-grid name="grid">
30+
<reorderable enabled="true" columns="true"/>
31+
</kendo-grid>
32+
```
33+
{% endif %}
34+
35+
To see this functionality in action, check the [Grid Column Menu demo](https://demos.telerik.com/{{site.platform}}/grid/column-menu).
36+
37+
## Column Grouping
38+
39+
As of {{ site.product }} R2 SP1 2023, the Grid's Column Menu provides an option that allows users to select the target column for grouping or ungrouping the Grid. To display the option item in the Column Menu, enable grouping via the [`Groupable`](/api/kendo.mvc.ui.fluent/gridbuilder#groupable) configuration.
1740
## Sort
1841

1942
The column menu allows you to control the visibility of each Grid column. For this purpose, the column menu renders a child column menu with a checkbox for each Grid column.
@@ -30,7 +53,7 @@ The below example demonstrates how to sort the column titles in the child menu i
3053
```TagHelper
3154
<column-menu>
3255
<column-menu-columns sort="asc">
33-
56+
3457
</column-menu-columns>
3558
</column-menu>
3659
```
@@ -77,15 +100,15 @@ By default, the column menu of the Grid is initialized in the `classic` render m
77100
@(Html.Kendo().Grid()
78101
.Name("datePicker")
79102
.ColumnMenu(m=>{
80-
m.ComponentType("modern");
103+
m.ComponentType("modern");
81104
})
82105
)
83106
```
84107
{% if site.core %}
85108
```TagHelper
86109
<kendo-grid name="grid">
87110
<column-menu component-type="modern">
88-
111+
89112
</column-menu>
90113
</kendo-grid>
91114
```

‎docs-aspnet/html-helpers/data-management/grid/row-drag-drop.md‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@ position: 12
1010

1111
The Drag and Drop functionality allows you to reorder single or multiple Grid rows by dragging. Additionally, you can move rows between different Grids.
1212

13+
The {{site.prouct}} Grid supports two interaction modes:
14+
15+
- [Drag and Drop](#getting-started) - The user can click to drag a row and release the dragged row in the desired location.
16+
- [Click-Move-Click](#row-click-move-click) - The user can click to initiate the dragging interaction, move the pointer to the desired location and click again to release the dragged item.
17+
1318
## Getting Started
1419

1520
To enable the Drag and Drop feature:
@@ -109,6 +114,144 @@ You can move items from one instance of the Grid to another by handling the [`Ro
109114
110115
For a runnable example, refer to the [demo on drag and drop by the Grid](https://demos.telerik.com/{{ site.platform }}/grid/drag-drop).
111116
117+
## Row Click-Move-Click
118+
119+
As of {{site.product}} R2 SP1 2023, users can reorder the Grid's rows by using the click-move-click functionality provided by the `ClickMoveClick` option. To start moving the row, users can click the drag icon, and then click again to place the row in its new position.
120+
121+
{% if site.core %}
122+
```HtmlHelper
123+
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
124+
.Name("grid")
125+
.Columns(columns =>
126+
{
127+
columns.Template("").Draggable(true).Width(100);
128+
columns.Bound(p => p.ProductName).Title("Product").Width(200);
129+
columns.Bound(p => p.UnitPrice).Title("Price").Width(140);
130+
columns.Bound(p => p.Discontinued)
131+
.Title("In Stock")
132+
.ClientTemplate("<span class='k-badge k-badge-solid k-badge-solid-success k-badge-md k-rounded-md k-badge-inline'>Available</span>")
133+
.Width(130);
134+
})
135+
.Pageable()
136+
.Scrollable()
137+
.Sortable()
138+
.Navigatable()
139+
.Reorderable(reorder => reorder
140+
.Rows(rows => rows.ClickMoveClick(true))
141+
.Columns(true)
142+
)
143+
.HtmlAttributes(new { style = "height:430px;" })
144+
.DataSource(dataSource => dataSource
145+
.Ajax()
146+
.PageSize(20)
147+
.Model(m => m.Id("ProductID"))
148+
.Read(read => read.Action("Drag_Drop_Active_Read", "Grid"))
149+
)
150+
)
151+
```
152+
```TagHelper
153+
<kendo-grid name="grid" navigatable="true" style="height:430px;" width="550">
154+
<columns>
155+
<column template="" draggable="true">
156+
</column>
157+
<column field="ProductName" title="Product">
158+
</column>
159+
<column field="UnitPrice" title="Price">
160+
</column>
161+
<column field="Discontinued" title="In Stock" template="<span class='k-badge k-badge-solid k-badge-solid-success k-badge-md k-rounded-md k-badge-inline'>Available</span>">
162+
</column>
163+
</columns>
164+
<pageable enabled="true" />
165+
<scrollable enabled="true" />
166+
<sortable enabled="true" />
167+
<reorderable columns="true" >
168+
<rows click-move-click="true" />
169+
</reorderable>
170+
<datasource page="0" type="DataSourceTagHelperType.Ajax" page-size="20">
171+
<schema data="Data" total="Total" errors="Errors">
172+
<model id="ProductID">
173+
</model>
174+
</schema>
175+
<transport>
176+
<read url="@Url.Action("Drag_Drop_Active_Read","Grid")" />
177+
</transport>
178+
</datasource>
179+
</kendo-grid>
180+
````
181+
{% else %}
182+
```HtmlHelper
183+
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
184+
.Name("activeProductsGrid")
185+
.Columns(columns =>
186+
{
187+
columns.Template(@<text> </text>).Draggable(true).Width(100);
188+
columns.Bound(p => p.ProductName).Title("Product").Width(200);
189+
columns.Bound(p => p.UnitPrice).Title("Price").Width(140);
190+
columns.Bound(p => p.Discontinued)
191+
.Title("In Stock")
192+
.ClientTemplate("<span class='k-badge k-badge-solid k-badge-solid-success k-badge-md k-rounded-md k-badge-inline'>Available</span>")
193+
.Width(130);
194+
})
195+
.Pageable()
196+
.Scrollable()
197+
.Sortable()
198+
.Navigatable()
199+
.Reorderable(reorder => reorder
200+
.Rows(rows=>rows.ClickMoveClick(true))
201+
.Columns(true)
202+
)
203+
.HtmlAttributes(new { style = "height:430px;" })
204+
.DataSource(dataSource => dataSource
205+
.Ajax()
206+
.PageSize(20)
207+
.Model(m => m.Id("ProductID"))
208+
.Read(read => read.Action("Drag_Drop_Active_Read", "Grid"))
209+
)
210+
)
211+
```
212+
{% endif %}
213+
214+
215+
## Drag Handle
216+
217+
You can allow the user to reorder the Grid rows by dragging the row through a drag handle. To enable the drag handle, add a draggable column:
218+
219+
{% if site.core %}
220+
```HtmlHelper
221+
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
222+
.Name("grid")
223+
.Columns(columns =>
224+
{
225+
columns.Template("").Draggable(true).Width(100);
226+
columns.Bound(p => p.ProductName).Title("Product").Width(200);
227+
})
228+
)
229+
```
230+
```TagHelper
231+
<kendo-grid name="grid" navigatable="true" style="height:430px;" width="550">
232+
<columns>
233+
<column template="" draggable="true"></column>
234+
<column field="ProductName" title="Product"></column>
235+
</columns>
236+
</kendo-grid>
237+
````
238+
{% else %}
239+
```HtmlHelper
240+
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
241+
.Name("activeProductsGrid")
242+
.Columns(columns =>
243+
{
244+
columns.Template(@<text> </text>).Draggable(true).Width(100);
245+
columns.Bound(p => p.ProductName).Title("Product").Width(200);
246+
})
247+
)
248+
```
249+
{% endif %}
250+
251+
## RowReorder Event
252+
253+
The {{site.product}} Grid exposes a [RowReorder](/api/kendo.mvc.ui.fluent/grideventbuilder#rowreordersystemstring) event. The event fires when the user drops a row into a new location. It allows you to manipulate your data collection based on where the user dropped the element.
254+
112255
## Keyboard Navigation
113256

114257
You can reorder the rows through the keyboard when the `Navigatable()` method is enabled.
@@ -163,5 +306,6 @@ The example below demonstrates how to drag and drop the Grid rows by using the k
163306
## See Also
164307
165308
* [Row Drag and Drop by the Grid HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/row-drag-drop)
309+
* [Grid Events]({% slug grid_events %})
166310
* [Server-Side API](/api/grid)
167311
* [Grid Client-Side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid)

‎docs-aspnet/html-helpers/data-management/listview/getting-started-listview.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -230,13 +230,13 @@ Referencing existing component instances allows you to build on top of their con
230230
231231
1. Use the [ListView client-side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/listview#methods) to control the behavior of the widget. In this example, you will see how to turn on the [`selectable`](https://docs.telerik.com/kendo-ui/api/javascript/ui/listview/configuration/selectable) configuration with the use of the [`setOptions`](https://docs.telerik.com/kendo-ui/api/javascript/ui/widget/methods/setoptions) method. Then you can use the [`select`](https://docs.telerik.com/kendo-ui/api/javascript/ui/listview/methods/select) method to programmatically select one of the items.
232232
233-
```script
234-
<script>
235-
var listview = $("#listView").data("kendoListView");
236-
listview.setOptions({selectable: "single"}); // Turn on the selectable mode of the ListView.
237-
listview.select(listview.content.children().first()); // Select the first item.
238-
</script>
239-
```
233+
```script
234+
<script>
235+
var listview = $("#listView").data("kendoListView");
236+
listview.setOptions({selectable: "single"}); // Turn on the selectable mode of the ListView.
237+
listview.select(listview.content.children().first()); // Select the first item.
238+
</script>
239+
```
240240
241241
{% if site.core %}
242242
## Explore this Tutorial in REPL

‎docs-aspnet/html-helpers/data-management/pivotgridv2/accessibility/keyboard-navigation.md‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
---
2+
title: Keyboard Navigation
3+
page_title: PivotGridV2 Keyboard Navigation
4+
description: "Get started with the Telerik UI PivotGridV2 HtmlHelper for {{ site.framework }} and and learn about the accessibility support it provides through its keyboard navigation functionality."
5+
slug: keynav_aspnetcore_pivotgridv2
6+
position: 2
7+
---
8+
9+
# Keyboard Navigation
10+
11+
The keyboard navigation of the PivotGridV2 is always available.
12+
13+
For a complete example, refer to the [demo on using the keyboard navigation of the PivotGridV2](https://demos.telerik.com/{{ site.platform }}/pivotgridv2/keyboard-navigation).
14+
15+
The PivotGridV2 supports its keyboard navigation functionality through the `navigatable` option. When set to `true`, you can initially select a row or cell and then move within the PivotGridV2 by using the `Arrow` keys.
16+
17+
The following example demonstrates how to enable the key navigation in the PivotGridV2.
18+
19+
```HtmlHelper
20+
@(Html.Kendo().PivotGridV2()
21+
.Name("pivotgrid")
22+
.Navigatable(true)
23+
//additional configuration options
24+
)
25+
```
26+
{% if site.core %}
27+
```TagHelper
28+
<kendo-pivotgridv2 name="pivotgrid" navigatable="true">
29+
</kendo-pivotgridv2>
30+
```
31+
{% endif %}
32+
33+
The following example demonstrates how to enable the key navigation in the PivotConfiguratorV2.
34+
35+
```HtmlHelper
36+
@(Html.Kendo().PivotConfiguratorV2()
37+
.Name("configurator")
38+
.Navigatable(true)
39+
//additional configuration options
40+
)
41+
```
42+
{% if site.core %}
43+
```TagHelper
44+
<kendo-pivotconfiguratorv2 name="configurator" navigatable="true">
45+
</kendo-pivotconfiguratorv2>
46+
```
47+
{% endif %}
48+
## Shortcuts
49+
50+
The Telerik UI for {{ site.framework }} PivotGridV2 supports the following keyboard shortcuts:
51+
52+
| SHORTCUT | DESCRIPTION |
53+
|:--- |:--- |
54+
| `Right Arrow` | Moves the focus one cell to the right. If the focus is on the right-most cell in the row, the focus does not move. |
55+
| `Left Arrow` | Moves the focus one cell to the left. If the focus is on the left-most cell in the row, the focus does not move. |
56+
| `Up Arrow` | Moves the focus one cell up. If the focus is on the top-most cell in the column, the focus does not move. |
57+
| `Down Arrow` | Moves the focus one cell down. If the focus is on the bottom-most cell in the column, the focus does not move. |
58+
| `Home` | Moves the focus to the first focusable cell in the row. |
59+
| `End` | Moves the focus to the last focusable cell in the row. |
60+
| `Ctrl/Cmd + Home` | Moves the focus to the first cell in the first row. |
61+
| `Ctrl/Cmd + End` | Moves the focus to the last cell in the last row. |
62+
| `Enter/Space` | Toggles the expanded state of an expandable header when such is focused. |
63+
| `o` | The small Latin letter "o". Opens the configurator when available. |
64+
| `escape` | Closes the configurator when it contains the focus. |
65+
66+
The Telerik UI for {{ site.framework }} PivotConfiguratorV2 supports the following keyboard shortcuts:
67+
68+
| SHORTCUT | DESCRIPTION |
69+
|:--- |:--- |
70+
| `Escape` | Closes the Configurator and returns focus to the last focused PivotGrid table cell (or the first cell). |
71+
| `Tab` | Focuses the next focusable element or the first focusable element, if the focus is on the last focusable element. |
72+
| `Shift + Tab` | Focuses the previous focusable element or the last focusable element, if the focus is on the first focusable element. |
73+
| `Backspace/Delete` | Applicable when a Chip is focused. Removes the Chip, and the previous focusable element is focused. |
74+
| `Ctrl/Cmd + Shift + Left/Right Arrow` | Applicable when a Chip is focused. Switches the Chip with the next/previous one from the same section (if one is available). |
75+
| `Ctrl/Cmd + Shift + Up/Down Arrow` | Applicable when a Chip is focused. Moves a Chip from the Rows section to the Columns one or vice-versa. |
76+
| `Alt + Down Arrow` | Opens the Chip menu for the focused Chip. Focus goes to the first menu element is trapped in the menu popup. |
77+
78+
The Telerik UI for {{ site.framework }} PivotConfiguratorV2 Chip Menu supports the following keyboard shortcuts:
79+
80+
| SHORTCUT | DESCRIPTION |
81+
|:--- |:--- |
82+
| `Escape` | Closes the menu and returns the focus to the Chip that triggered it. |
83+
| `Tab` | Focuses the next focusable menu element or the first focusable element, if the focus is on the last focusable element. |
84+
| `Shift + Tab` | Focuses the previous focusable element or the last focusable element, if the focus is on the first focusable element. |
85+
| `Enter` | Triggers the default action associated with the focused menu item. |
86+
87+
## See Also
88+
89+
* [Keyboard Navigation by the PivotGridV2 (Demo)](https://demos.telerik.com/{{ site.platform }}/pivotgridv2/keyboard-navigation)
90+
* [Accessibility in the PivotGridV2]({% slug accessibility_aspnetcore_pivotgridv2 %})

0 commit comments

Comments
 (0)