Skip to content

Commit 225a78a

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent fdf5be5 commit 225a78a

File tree

21 files changed

+4105
-49
lines changed

21 files changed

+4105
-49
lines changed

‎docs-aspnet/_config-mvc.yml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -237,6 +237,11 @@ defaults:
237237
path: "html-helpers/data-management/treelist"
238238
values:
239239
title_prefix: "ASP.NET MVC TreeList Component"
240+
-
241+
scope:
242+
path: "html-helpers/data-management/propertygrid"
243+
values:
244+
title_prefix: "ASP.NET MVC PropertyGrid Component"
240245
-
241246
scope:
242247
path: "html-helpers/datasource"

‎docs-aspnet/_config.yml‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -620,6 +620,8 @@ navigation:
620620
title: "PivotGrid"
621621
"*pivotgridv2":
622622
title: "PivotGridV2"
623+
"*propertygrid":
624+
title: "PropertyGrid"
623625
"*scheduler":
624626
title: "Scheduler"
625627
"*scrollview":
@@ -800,6 +802,11 @@ defaults:
800802
path: "html-helpers/data-management/treelist"
801803
values:
802804
title_prefix: "ASP.NET Core TreeList Component"
805+
-
806+
scope:
807+
path: "html-helpers/data-management/propertygrid"
808+
values:
809+
title_prefix: "ASP.NET Core PropertyGrid Component"
803810
-
804811
scope:
805812
path: "html-helpers/datasource"

‎docs-aspnet/accessibility/accessibility-compliance-table.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -350,6 +350,12 @@
350350
<td>AA</td>
351351
<td><a href="https://demos.telerik.com/{{ site.platform }}/accessibility/popover">Demo</a></td>
352352
</tr>
353+
<tr>
354+
<td>PropertyGrid</td>
355+
<td>Yes</td>
356+
<td>AA</td>
357+
<td><a href="https://demos.telerik.com/{{ site.platform }}/accessibility/propertygrid">Demo</a></td>
358+
</tr>
353359
<tr>
354360
<td>QRCode</td>
355361
<td>Yes</td>

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

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
---
2+
title: Keyboard Navigation
3+
page_title: Keyboard Navigation
4+
description: "Get started with the {{ site.product_short }} PropertyGrid by Telerik UI and learn about the component keyboard navigation functionality."
5+
slug: keynav_aspnetcore_propertygrid
6+
position: 2
7+
---
8+
9+
# Keyboard Navigation
10+
11+
By default, the keyboard navigation of the PropertyGrid component is disabled.
12+
13+
Enable the PropertyGrid keyboard navigation functionality through the `Navigatable()` method. When the option is set to `true`, you can initially select a cell and then move within the PropertyGrid by using the `Arrow` keys. The navigation occurs at a cell level. To select the row of the currently focused cell, press `Space`.
14+
15+
The following example demonstrates how to enable the component keyboard navigation.
16+
17+
```HtmlHelper
18+
@(Html.Kendo().PropertyGrid<PropertyViewModel>()
19+
.Name("propertyGrid")
20+
/* Other configuration. */
21+
.Navigatable(true)
22+
)
23+
```
24+
{% if site.core %}
25+
```TagHelper
26+
@addTagHelper *, Kendo.Mvc
27+
28+
<kendo-propertygrid name="propertyGrid" navigatable="true">
29+
<!-- Other configuration -->
30+
</kendo-propertygrid>
31+
```
32+
{% endif %}
33+
34+
For a complete example, refer to the [demo on using the keyboard navigation of the PropertyGrid](https://demos.telerik.com/{{ site.platform }}/propertygrid/keyboard-navigation).
35+
36+
The PropertyGrid supports the following keyboard shortcuts:
37+
38+
* Actions Applied to the Data Table
39+
40+
| SHORTCUT | DESCRIPTION |
41+
|:--- |:--- |
42+
| `Access key + w` | Focuses the component. |
43+
| `Arrow Keys` | Navigate over the cells. |
44+
| `Space` | Selects the row holding the currently highlighted cell. |
45+
| `Enter ` or `F2` | Puts the cell in edit mode. |
46+
| `Esc` | Cancels the edit or, if an element inside a cell is focused, returns the focus to the table. |
47+
| `Ctrl + Home` | Focuses the first focusable element inside the body. |
48+
| `Ctrl + End` | Focuses the last focusable element inside the body. |
49+
| `Alt + Right Arrow` | Expands the currently selected item, either a group or a composite item. |
50+
| `Alt + Left Arrow` | Collapses the currently selected item, either a group or a composite item. |
51+
| `Home` | Focuses the first focusable cell in the row. |
52+
| `End` | Focuses the last focusable cell in the row. |
53+
54+
* Actions Applied to the ToolBar
55+
56+
| SHORTCUT | DESCRIPTION |
57+
|:--- |:--- |
58+
| `Access key + w` | Focuses the component. |
59+
| `F10` | Focuses the ToolBar. |
60+
| `Right Arrow` | Focuses the next focusable item. |
61+
| `Left Arrow` | Focuses the previous focusable item. |
62+
| `Enter` | Selects the focused button, or enters the inner template navigation if the template contains focusable items, or opens the CommandOverflow menu when an overflow anchor is focused.|
63+
| `Space` | Selects the focused button. |
64+
| `Home` | Focuses the first focusable item. |
65+
| `End` | Focuses the last focusable item. |
66+
| `Esc` | If the inner template navigation is activated, moves the focus back to the PropertyGrid ToolBar item.|
67+
68+
69+
## See Also
70+
71+
* [Keyboard Navigation by the PropertyGrid HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/keyboard-navigation)
72+
* [Accessibility in {{ site.product }}]({% slug overview_accessibility %})

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
title: Overview
3+
page_title: Accessibility
4+
description: "Get started with the {{ site.product_short }} PropertyGrid by Telerik UI and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2."
5+
slug: accessibility_aspnetcore_propertygrid
6+
position: 1
7+
---
8+
9+
# PropertyGrid Accessibility
10+
11+
The PropertyGrid is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.
12+
13+
For more information, refer to:
14+
* [Accessibility in {{ site.product }}]({% slug overview_accessibility %})
15+
* [Keyboard navigation by the {{ site.product_short }} PropertyGrid]({% slug keynav_aspnetcore_propertygrid %})
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 PropertyGrid is compliant with the Section 508 requirements. For more information, refer to the article on [Section 508 support in Telerik UI for {{ site.framework }}]({% slug overview_accessibility %}#section-508).
24+
25+
## WCAG 2.2
26+
27+
The PropertyGrid supports the standards for providing accessible web content which are set by the [Web Content Accessibility Guidelines 2.2](https://www.w3.org/TR/WCAG/). For more information, refer to the article on [WCAG 2.2 compliance in {{ site.product_short }}]({% slug overview_accessibility %}#wcag-22).
28+
29+
## See Also
30+
31+
* [Keyboard Navigation by the PropertyGrid HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/propertygrid/keyboard-navigation)
32+
* [Keyboard Navigation by the {{ site.product_short }} PropertyGrid]({% slug keynav_aspnetcore_propertygrid %})
33+
* [Accessibility Compliance in {{ site.product }}]({% slug compliance_accessibility %})

‎docs-aspnet/html-helpers/data-management/propertygrid/columns.md‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
---
2+
title: Columns
3+
page_title: Columns
4+
description: "Get started with the Telerik UI for {{ site.framework }} PropertyGrid and learn how to configure its columns."
5+
slug: htmlhelpers_columns_propertygrid
6+
position: 2
7+
---
8+
9+
# Columns
10+
11+
Each PropertyGrid item has a field and value options that are displayed in columns.
12+
13+
## Column Settings
14+
15+
You can control the width of the columns through the `FieldColumn()` and `ValueColumn()` configurations.
16+
17+
```HtmlHelper
18+
@(Html.Kendo().PropertyGrid<PropertyViewModel>()
19+
.Name("propertyGrid")
20+
.Columns(columns =>
21+
{
22+
columns.FieldColumn(fieldCol => fieldCol.Width(200));
23+
columns.ValueColumn(valueCol => valueCol.Width(250));
24+
})
25+
... //Additional configuration
26+
)
27+
```
28+
{% if site.core %}
29+
```TagHelper
30+
@addTagHelper *, Kendo.Mvc
31+
32+
<kendo-propertygrid name="propertyGrid">
33+
<columns>
34+
<field-column width="200" />
35+
<value-column width="250" />
36+
</columns>
37+
<!-- Additional configuration -->
38+
</kendo-propertygrid>
39+
40+
```
41+
{% endif %}
42+
43+
When both columns have widths (the numeric values are treated as pixels) and their sum exceeds the width of the PropertyGrid, a horizontal scrollbar appears.
44+
The example below shows how to enable the PropetyGrid horizontal scrollbar.
45+
46+
```HtmlHelper
47+
@(Html.Kendo().PropertyGrid<PropertyViewModel>()
48+
.Name("propertyGrid")
49+
.Width(300)
50+
.Columns(columns =>
51+
{
52+
columns.FieldColumn(fieldCol => fieldCol.Width(200));
53+
columns.ValueColumn(valueCol => valueCol.Width(250));
54+
})
55+
... //Additional configuration
56+
)
57+
```
58+
{% if site.core %}
59+
```TagHelper
60+
@addTagHelper *, Kendo.Mvc
61+
62+
<kendo-propertygrid name="propertyGrid" width="300">
63+
<columns>
64+
<field-column width="200" />
65+
<value-column width="250" />
66+
</columns>
67+
<!-- Additional configuration -->
68+
</kendo-propertygrid>
69+
70+
```
71+
{% endif %}
72+
73+
When all columns have widths and their sum is less than the width of the PropertyGrid (either the width set through the `Width()` option or the width of its container), the column widths are ignored and the browser expands the columns.
74+
75+
```HtmlHelper
76+
@(Html.Kendo().PropertyGrid<PropertyViewModel>()
77+
.Name("propertyGrid")
78+
.Width(700)
79+
.Columns(columns =>
80+
{
81+
columns.FieldColumn(fieldCol => fieldCol.Width(200));
82+
columns.ValueColumn(valueCol => valueCol.Width(250));
83+
})
84+
... //Additional configuration
85+
)
86+
```
87+
{% if site.core %}
88+
```TagHelper
89+
@addTagHelper *, Kendo.Mvc
90+
91+
<kendo-propertygrid name="propertyGrid" width="700">
92+
<columns>
93+
<field-column width="200" />
94+
<value-column width="250" />
95+
</columns>
96+
<!-- Additional configuration -->
97+
</kendo-propertygrid>
98+
99+
```
100+
{% endif %}
101+
102+
## Column Resizing
103+
104+
The PropertyGrid supports column resizing. To allow the user to resize the columns through the component context menu, set up the following options:
105+
106+
* Enable the `Resizable()` option.
107+
* Enable the `ContextMenu()` option.
108+
109+
Right-click on a specified table cell of the PropertyGrid to open the context menu, then select the **Resize Column** option to open the resize column menu dialog.
110+
111+
```HtmlHelper
112+
@(Html.Kendo().PropertyGrid<PropertyViewModel>()
113+
.Name("propertyGrid")
114+
.Width(300)
115+
.Resizable(true)
116+
.ContextMenu(true)
117+
.Columns(columns =>
118+
{
119+
columns.FieldColumn(fieldCol => fieldCol.Width(200));
120+
columns.ValueColumn(valueCol => valueCol.Width(250));
121+
})
122+
... //Additional configuration
123+
)
124+
```
125+
{% if site.core %}
126+
```TagHelper
127+
@addTagHelper *, Kendo.Mvc
128+
129+
<kendo-propertygrid name="propertyGrid" width="300" resizable="true">
130+
<context-menu enabled="true"></context-menu>
131+
<columns>
132+
<field-column width="200" />
133+
<value-column width="250" />
134+
</columns>
135+
<!-- Additional configuration -->
136+
</kendo-propertygrid>
137+
138+
```
139+
{% endif %}
140+
141+
## See Also
142+
143+
* [Server-Side API of the PropertyGrid HtmlHelper](/api/propertygrid)
144+
{% if site.core %}
145+
* [Server-Side API of the PropertyGrid TagHelper](/api/taghelpers/propertygrid)
146+
{% endif %}
147+
* [Client-Side API of the PropertyGrid](https://docs.telerik.com/kendo-ui/api/javascript/ui/propertygrid)

‎docs-aspnet/html-helpers/data-management/propertygrid/events.md‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
---
2+
title: Events
3+
page_title: Events
4+
description: "Learn how to handle the events of the Telerik UI PropertyGrid component for {{ site.framework }}."
5+
slug: htmlhelpers_events_propertygrid
6+
position: 5
7+
---
8+
9+
# Events
10+
11+
The Telerik UI PropertyGrid for {{ site.framework }} [exposes various events](/api/kendo.mvc.ui.fluent/propertygridventbuilder) that allow you to control the behavior of the UI component.
12+
13+
For a complete example on basic PropertyGrid events, refer to the [demo on using the events of the PropertyGrid](https://demos.telerik.com/{{ site.platform }}/propertygrid/events).
14+
15+
## Handling by Handler Name
16+
17+
The following example demonstrates how to subscribe to events by a handler name.
18+
19+
```HtmlHelper
20+
@model PropertyViewModel
21+
22+
@(Html.Kendo().PropertyGrid<PropertyViewModel>()
23+
.Name("propertyGrid")
24+
.Events(e => e.Edit("onEdit"))
25+
... //Additional configuration
26+
)
27+
```
28+
{% if site.core %}
29+
```TagHelper
30+
@addTagHelper *, Kendo.Mvc
31+
@model PropertyViewModel
32+
33+
<kendo-propertygrid name="propertyGrid" on-edit="onEdit">
34+
<!-- Additional configuration -->
35+
</kendo-propertygrid>
36+
```
37+
{% endif %}
38+
```Scripts
39+
<script>
40+
function onEdit(e){
41+
// Handle the PropertyGrid Edit event that triggers when the user edits a data item.
42+
};
43+
</script>
44+
```
45+
46+
## Handling by Template Delegate
47+
48+
The following example demonstrates how to subscribe to events by a template delegate.
49+
50+
```HtmlHelper
51+
@model PropertyViewModel
52+
53+
@(Html.Kendo().PropertyGrid<PropertyViewModel>()
54+
.Name("propertyGrid")
55+
.Events(e => e.Edit(@<text>
56+
function() {
57+
// Handle the PropertyGrid Edit event inline.
58+
}
59+
</text>)
60+
)
61+
... //Additional configuration
62+
)
63+
```
64+
{% if site.core %}
65+
```TagHelper
66+
@addTagHelper *, Kendo.Mvc
67+
@model PropertyViewModel
68+
69+
<kendo-propertygrid name="propertyGrid"
70+
on-edit="function() {
71+
// Handle the PropertyGrid Edit event inline.
72+
}">
73+
</kendo-propertygrid>
74+
```
75+
{% endif %}
76+
77+
## Next Steps
78+
79+
* [Using the PropertyGrid Events (Demo)](https://demos.telerik.com/{{ site.platform }}/propertygrid/events)
80+
81+
## See Also
82+
83+
* [Using the API of the PropertyGrid for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/propertygrid/api)
84+
* [Client-Side API of the PropertyGrid](https://docs.telerik.com/kendo-ui/api/javascript/ui/propertygrid)
85+
* [Server-Side API of the PropertyGrid](/api/propertygrid)
86+
{% if site.core %}
87+
* [Server-Side API of the PropertyGrid TagHelper](/api/taghelpers/propertygrid)
88+
{% endif %}

0 commit comments

Comments
 (0)