Skip to content

Commit 4dfc7da

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent e80895d commit 4dfc7da

File tree

29 files changed

+707
-224
lines changed

29 files changed

+707
-224
lines changed

‎docs-aspnet/_config-mvc.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ getting-started-core/*,
2929
backwards-compatibility/2018-backwards-compatibility.md,
3030
installation/json-serialization.md,
3131
installation/adding-client-side-resources/using-libman.md,
32+
vs-integration/snippets.md,
3233
vs-code-integration/*,
3334
knowledge-base/checkbox-list-post.md,
3435
knowledge-base/daterangepicker-bind-to-model-and-post.md,

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ The column menu allows users to quickly access column-related operations like so
1212

1313
To enable the column menu, use the `ColumnMenu(true)` method. As a result, the column headers of the Grid render a column menu, which allows the user to sort, filter, or change the visibility of a column. The column menu also detects when a specific column operation is disabled through the column definition and excludes the corresponding UI from rendering. For a runnable example, refer to the [demo on implementing a column menu in the Grid](https://demos.telerik.com/{{site.platform}}/grid/column-menu).
1414

15+
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)`.
16+
1517
## Sort
1618

1719
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.

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ Bound columns support many settings and amongst the most used are the following
2424
* Media
2525
* MinScreenWidth
2626
* MinResizableWidth
27+
* HideOnGroup - specifies whether the column/field that is used to group the data in the Grid should be hidden from the displayed columns. By default, it is set to `false`. If set to `true` the column will be hidden when the Grid is groupd via user interaction. The column will be displayed again if interaction to ungroup by it is performed.
2728

2829
## For Functionality
2930

‎docs-aspnet/html-helpers/editors/colorgradient/accessibility/keyboard-navigation.md‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,17 @@ position: 2
88

99
# Keyboard Navigation
1010

11-
The keyboard navigation of the ColorGradient is always available. It supports the following keyboard shortcuts:
11+
The {{site.product}} ColorGradient is a single-tab-stop component. The component implements inner navigation that you can activate by pressing the Enter key. When inner navigation is activated, the focus is trapped within the component. To return to the page navigation, press Esc. The keyboard navigation of the ColorGradient is always available.
1212

13-
| SHORTCUT | DESCRIPTION |
14-
|:--- |:--- |
13+
The {{site.product_short}} ColorGradient supports the following keyboard shortcuts:
14+
15+
| SHORTCUT | DESCRIPTION |
16+
|:--- |:--- |
17+
| **When ColorGradient wrapper is focused** | - | |
18+
| `Tab` | Navigates to the next focusable element after the ColorGradient. |
19+
| `Shift`+`Tab` | Navigates to the previous focusable element before the ColorGradient. |
20+
| `Enter` | Activates the inner ColorGradient navigation. |
21+
| **When ColorGradient inner navigation is activated** | - | |
1522
| `Space` or `Enter` | When the **Toggle** format button is focused, changes the format between RGB and HEX.|
1623
| `Tab` | Navigates to the next ColorGradient element.|
1724
| `Shift`+`Tab` | Navigates to the previous ColorGradient element.|

‎docs-aspnet/html-helpers/editors/flatcolorpicker/accessibility/keyboard-navigation.md‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,17 @@ position: 2
88

99
# Keyboard Navigation
1010

11-
The keyboard navigation of the FlatColorPicker is always enabled.
11+
The {{site.product}} FlatColorPicker is a single-tab-stop component. The component implements inner navigation that you can activate by pressing the Enter key. When inner navigation is activated, the focus is trapped within the component. To return to the page navigation, press Esc. The keyboard navigation of the FlatColorPicker is always available.
1212

13-
The Kendo UI FlatColorPicker supports the following keyboard shortcuts:
13+
The {{site.product_short}} FlatColorPicker supports the following keyboard shortcuts:
1414

1515
| SHORTCUT | DESCRIPTION |
1616
|:--- |:--- |
17+
| **When FlatColorPicker wrapper is focused** | - | |
18+
| `Tab` | Navigates to the next focusable element after the FlatColorPicker. |
19+
| `Shift`+`Tab` | Navigates to the previous focusable element before the FlatColorPicker. |
20+
| `Enter` | Activates the inner FlatColorPicker navigation. |
21+
| **When FlatColorPicker inner navigation is activated** | - | |
1722
| `Space/Enter` | When the Toggle format button is focused, changes the format between RGB and HEX. When a View button is focused, switches to Palette or Gradient view.|
1823
| `Tab` | navigates to the next FlatColorPicker element.|
1924
| `Shift`+`Tab` | navigates to the previous FlatColorPicker element.|

‎docs-aspnet/html-helpers/editors/signature/appearance.md‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
---
2+
title: Appearance
3+
page_title: Telerik UI Signature for {{ site.framework }} Documentation | Signature Appearance
4+
description: "Learn how to modify the appearance of the Telerik UI Signature for {{ site.framework }} component."
5+
slug: appearance_telerikui_signature_component
6+
position: 2
7+
---
8+
9+
# Signature Appearance
10+
11+
The Telerik UI Signature for {{ site.framework }} component enables you to change various appearance aspects about the component.
12+
13+
The following example demonstrates a Signature component with custom appearance settings.
14+
15+
```HtmlHelper
16+
@(Html.Kendo().Signature()
17+
.StrokeWidth(4)
18+
.BackgroundColor("#fad980")
19+
.Color("#212121")
20+
.Width(500)
21+
.Height(200)
22+
)
23+
```
24+
{% if site.core %}
25+
```TagHelper
26+
<kendo-signature stroke-width="4"
27+
background-color="#fad980"
28+
color="#212121"
29+
width="500"
30+
height="200">
31+
</kendo-signature>
32+
```
33+
{% endif %}
34+
35+
## Background Color
36+
37+
To modify the background color of the Signature container, use its [`BackgroundColor`](https://docs.telerik.com/{{ site.platform }}/api/Kendo.Mvc.UI.Fluent/SignatureBuilder#backgroundColor) configuration.
38+
39+
```HtmlHelper
40+
@(Html.Kendo().Signature()
41+
.BackgroundColor("#fad980"))
42+
```
43+
{% if site.core %}
44+
```TagHelper
45+
<kendo-signature backgroundColor="#fad980">
46+
</kendo-signature>
47+
```
48+
{% endif %}
49+
50+
## Stroke Color
51+
52+
You can also change the stroke color of the Signature by using its [`Color`](https://docs.telerik.com/{{ site.platform }}/api/Kendo.Mvc.UI.Fluent/SignatureBuilder#color) configuration.
53+
54+
```HtmlHelper
55+
@(Html.Kendo().Signature()
56+
.Color("#fad980"))
57+
```
58+
{% if site.core %}
59+
```TagHelper
60+
<kendo-signature color="#fad980">
61+
</kendo-signature>
62+
```
63+
{% endif %}
64+
65+
## Stroke Width
66+
67+
To update the stroke width of the Signature, utilize its [`StrokeWidth`](https://docs.telerik.com/{{ site.platform }}/api/Kendo.Mvc.UI.Fluent/SignatureBuilder#strokewidth) configuration.
68+
69+
```HtmlHelper
70+
@(Html.Kendo().Signature()
71+
.StrokeWidth(4))
72+
```
73+
{% if site.core %}
74+
```TagHelper
75+
<kendo-signature strokeWidth="4">
76+
</kendo-signature>
77+
```
78+
{% endif %}
79+
80+
## See Also
81+
82+
* [Demo Page for the Signature](https://demos.telerik.com/{{ site.platform }}/signature)
83+
* [API Reference of the Signature](https://docs.telerik.com/{{ site.platform }}/api/Kendo.Mvc.UI.Fluent/SignatureBuilder)
84+
* [Knowledge Base Section](/knowledge-base)

‎docs-aspnet/html-helpers/editors/signature/form-integration.md‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
---
2+
title: Form Integration
3+
page_title: Telerik UI Signature for {{ site.framework }} Documentation | Signature Form Integration
4+
description: "Learn how to integrate the Signature inside a Telerik UI Form for {{ site.framework }}."
5+
slug: form_integration_telerikui_signature_component
6+
position: 3
7+
---
8+
9+
# Signature Form Integration
10+
11+
The Telerik UI Signature for {{ site.framework }} allows you to integrate it inside a Telerik UI Form for {{ site.framework }}. Furthermore, you can validate the Signature before the form is submitted.
12+
13+
To integrate the Signature inside a Telerik UI Form for {{ site.framework }} component, add the [`Items.Editor`](https://docs.telerik.com/{{ site.platform }}/api/Kendo.Mvc.UI.Fluent/FormItemFactory#add) configuration of the form field to `Signature`.
14+
15+
```HtmlHelper
16+
@(Html.Kendo().Form<Kendo.Mvc.Examples.Models.Form.FormItemsViewModels>()
17+
.Name("exampleForm")
18+
.Items(items =>
19+
{
20+
items.AddGroup()
21+
.Label("Form")
22+
.Items(i =>
23+
{
24+
i.Add()
25+
.Field(f => f.Signature)
26+
.Label(l => l.Text("Signature:").Optional(true))
27+
.Editor(e => e.Signature());
28+
29+
});
30+
})
31+
)
32+
```
33+
{% if site.core %}
34+
```TagHelper
35+
<kendo-form name="exampleForm">
36+
<form-items>
37+
<form-item type="group">
38+
<item-label text="Form" />
39+
<form-items>
40+
<form-item field="Signature">
41+
<item-label text="Signature:" />
42+
<signature-editor></signature-editor>
43+
</form-item>
44+
</form-items>
45+
</form-item>
46+
</form-items>
47+
</kendo-form>
48+
```
49+
{% endif %}
50+
51+
## See Also
52+
53+
* [Form Integration of the Signature (Demo)](https://demos.telerik.com/{{ site.platform }}/signature/form-integration)
54+
* [API Reference of the Signature](https://docs.telerik.com/{{ site.platform }}/api/Kendo.Mvc.UI.Fluent/SignatureBuilder)

‎docs-aspnet/html-helpers/editors/signature/image-export.md‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
---
2+
title: Image Export
3+
page_title: Telerik UI Signature for {{ site.framework }} Documentation | Signature Image Export
4+
description: "Learn how to export the Telerik UI Signature for {{ site.framework }} component as a PNG file."
5+
slug: image_export_telerikui_signature_component
6+
position: 4
7+
---
8+
9+
# Signature Image Export
10+
11+
You can export the Telerik UI Signature for {{ site.framework }} to a PNG file through the Kendo UI [`saveAs`](/api/javascript/kendo/methods/saveas) method.
12+
13+
To achieve this functionality, retrieve the base64 value of the Signature by using the [`value`](/api/javascript/ui/signature/methods/value) method of the component.
14+
15+
```HtmlHelper
16+
<button id="export">Export as PNG</button>
17+
18+
@(Html.Kendo().Signature()
19+
.Name("signature")
20+
.Width(500)
21+
.Height(300)
22+
)
23+
24+
<script>
25+
let signature = $("#signature").getKendoSignature();
26+
$("#export").kendoButton({
27+
click: function() {
28+
kendo.saveAs({
29+
// Use the base64 value of the signature for the dataURI.
30+
dataURI: signature.value(),
31+
fileName: "signature.png"
32+
});
33+
}
34+
});
35+
</script>
36+
```
37+
{% if site.core %}
38+
```TagHelper
39+
<button id="export">Export as PNG</button>
40+
41+
<kendo-signature name="signature"
42+
width="500"
43+
height="300">
44+
</kendo-signature>
45+
46+
<script>
47+
let signature = $("#signature").getKendoSignature();
48+
$("#export").kendoButton({
49+
click: function() {
50+
kendo.saveAs({
51+
// Use the base64 value of the signature for the dataURI.
52+
dataURI: signature.value(),
53+
fileName: "signature.png"
54+
});
55+
}
56+
});
57+
</script>
58+
```
59+
{% endif %}
60+
61+
## See Also
62+
63+
* [Image Export of the Signature (Demo)](https://demos.telerik.com/{{ site.platform }}/signature/export-image)
64+
* [API Reference of the Signature](https://docs.telerik.com/{{ site.platform }}/api/Kendo.Mvc.UI.Fluent/SignatureBuilder)

0 commit comments

Comments
 (0)