Skip to content

Commit ba15af7

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent cbb7500 commit ba15af7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+1371
-69
lines changed

‎docs-aspnet/html-helpers/editors/datepicker/component-type.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
title: Component Types
3+
page_title: Telerik UI DatePicker Documentation | DatePicker Component Types | Telerik UI
4+
description: "Get started with the Telerik UI DatePicker and learn how to enable the modern component type."
5+
slug: htmlhelpers_datepicker_aspnetcore_componenttype
6+
position: 8
7+
---
8+
9+
# Component Types
10+
11+
As of R2 2020 version of the Telerik UI for {{ site.framework }} suite, the DatePicker widget introduces a new component type. It aims to enhance the existing rendering and deliver a fresh and modern look and feel.
12+
13+
By default, the DatePicker is initialized with the `classic` render mode. In order to set it to `modern`, configure the options of the widget as follows:
14+
15+
```
16+
@(Html.Kendo().DatePicker()
17+
.Name("datePicker")
18+
.ComponentType("modern")
19+
)
20+
```
21+
22+
As a result, the appearance of the widget is alternated.
23+
24+
![Comparison between the component types](../../../images/modern-classic-datepicker.png)
25+
26+
## See Also
27+
28+
* [Server-Side API](/api/datepicker)

‎docs-aspnet/html-helpers/editors/datetimepicker/component-type.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
title: Component Types
3+
page_title: Telerik UI DateTimePicker Documentation | DateTimePicker Component Types | Telerik UI
4+
description: "Get started with the Telerik UI DateTimePicker and learn how to enable the modern component type."
5+
slug: htmlhelpers_componenttype_datetimepicker_aspnetcore
6+
position: 5
7+
---
8+
9+
# Component Types
10+
11+
As of R2 2020 version of the Telerik UI for {{ site.framework }} suite, the DateTimePicker widget introduces a new component type. It aims to enhance the existing rendering and deliver a fresh and modern look and feel.
12+
13+
By default, the DateTimePicker is initialized with the `classic` render mode. In order to set it to `modern`, configure the options of the widget as follows:
14+
15+
```
16+
@(Html.Kendo().DateTimePicker()
17+
.Name("dateTimePicker")
18+
.ComponentType("modern")
19+
)
20+
```
21+
22+
As a result, the appearance of the widget is alternated.
23+
24+
![Comparison between the component types](../../../images/modern-classic-datetimepicker.png)
25+
26+
> The rendered selectors in the time picker of the Telerik UI DateTimePicker for {{ site.framework }} depend on the currently applied format. If the format is omitted, the default format from the application's culture is used.
27+
28+
## See Also
29+
30+
* [Server-Side API](/api/datetimepicker)

‎docs-aspnet/html-helpers/editors/timepicker/component-type.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
title: Component Types
3+
page_title: Telerik UI TimePicker Documentation | TimePicker Component Types | Telerik UI
4+
description: "Get started with the jQuery TimePicker by Telerik UI and learn how to enable the modern component type."
5+
slug: htmlhelpers_componenttype_datetimepicker_aspnetcore
6+
position: 5
7+
---
8+
9+
# Component Types
10+
11+
As of R2 2020 version of the Telerik UI TimePicker for {{ site.framework }} suite, the TimePicker widget introduces a new component type. It aims to enhance the existing rendering and deliver a fresh and modern look and feel.
12+
13+
By default, the TimePicker is initialized with the `classic` render mode. In order to set it to `modern`, configure the options of the widget as follows:
14+
15+
```
16+
@(Html.Kendo().TimePicker()
17+
.Name("timePicker")
18+
.ComponentType("modern")
19+
)
20+
```
21+
22+
As a result, the appearance of the widget is alternated.
23+
24+
![Comparison between the component types](../../../images/modern-classic-timepicker.png)
25+
26+
> The rendered selectors in the Telerik UI TimePicker for {{ site.framework }} depend on the currently applied format. If the format is omitted, the default format from the application's culture is used.
27+
28+
## See Also
29+
30+
* [Server-Side API](/api/timepicker)

‎docs-aspnet/html-helpers/scheduling/calendar/component-types.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
title: Component Types
3+
page_title: Telerik UI Calendar Documentation | Calendar Component Types | Telerik UI
4+
description: "Get started with the Telerik UI Calendar and learn how to enable the modern component type."
5+
slug: htmlhelpers_componenttype_calendar_aspnetcore
6+
position: 7
7+
---
8+
9+
# Component Types
10+
11+
As of R2 2020 version of the Telerik UI for {{ site.framework }} suite, the Calendar widget introduces a new component type. It aims to enhance the existing rendering and deliver a fresh and modern look and feel.
12+
13+
By default, the Calendar is initialized with the `classic` render mode. In order to set it to `modern`, configure the options of the widget as follows:
14+
15+
```
16+
@(Html.Kendo().Calendar()
17+
.Name("calendar")
18+
.ComponentType("modern")
19+
)
20+
```
21+
22+
As a result, the appearance of the widget is alternated.
23+
24+
![Comparison between the component types](../../../images/classic-modern-calendar-rendering.png)
25+
26+
## See Also
27+
28+
* [Server-Side API](/api/calendar)

‎docs-aspnet/images/classic-modern-calendar-rendering.png‎

63 KB
Loading

‎docs-aspnet/images/modern-classic-datepicker.png‎

28.3 KB
Loading

‎docs-aspnet/images/modern-classic-datetimepicker.png‎

42.6 KB
Loading

‎docs-aspnet/images/modern-classic-timepicker.png‎

27.3 KB
Loading

‎docs/api/javascript/ui/maskedtextbox.md‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,82 @@ Specifies the culture info used by the widget.
5050
});
5151
</script>
5252

53+
### label `String|Function|Object` *(default: null)*
54+
55+
Adds a label before the input. If the input has no `id` attribute, a generated `id` will be assigned. The `string` and the `function` parameters are setting the inner HTML of the label.
56+
57+
#### Example - create a label from a string
58+
59+
<input id="maskedtextbox" />
60+
<script>
61+
$("#maskedtextbox").kendoMaskedTextBox({
62+
label: "First name"
63+
});
64+
</script>
65+
66+
The function context (available via the `this` keyword) will be set to the widget instance.
67+
68+
#### Example - create a label from a function
69+
70+
<input id="maskedtextbox" />
71+
<script>
72+
$("#maskedtextbox").kendoMaskedTextBox({
73+
label: function() {
74+
return "First name";
75+
}
76+
});
77+
</script>
78+
79+
### label.content `String|Function` *(default: "")*
80+
81+
Sets the inner HTML of the label.
82+
83+
#### Example - create a label from a string
84+
85+
<input id="maskedtextbox" />
86+
<script>
87+
$("#maskedtextbox").kendoMaskedTextBox({
88+
label: {
89+
content: "First name"
90+
}
91+
});
92+
</script>
93+
94+
The function context (available via the `this` keyword) will be set to the widget instance.
95+
96+
#### Example - create a label from a function
97+
98+
<input id="maskedtextbox" />
99+
<script>
100+
$("#maskedtextbox").kendoMaskedTextBox({
101+
label: {
102+
content: function() {
103+
return "First name";
104+
}
105+
}
106+
});
107+
</script>
108+
109+
### label.floating `Boolean` *(default: false)*
110+
111+
If set to `true`, the widget will be wrapped in a container that will allow the floating label functionality.
112+
113+
> **Important:** The [value](/api/javascript/ui/maskedtextbox/methods/value) method **does not trigger** the `focusout` event of the input.
114+
This could affect the floating label functionality.
115+
You can overcome this behavior by manually invoking the `refresh` method of the Floating Label: `$("#maskedtextbox").data("kendoMaskedTextBox").floatingLabel.refresh();`
116+
117+
#### Example - create a floating label
118+
119+
<input id="maskedtextbox" />
120+
<script>
121+
$("#maskedtextbox").kendoMaskedTextBox({
122+
label: {
123+
content: "First name",
124+
floating: true
125+
}
126+
});
127+
</script>
128+
53129
### mask `String`*(default: "")*
54130

55131
Specifies the input mask. The following mask rules are supported:
@@ -269,6 +345,10 @@ Gets the unmasked value of the MaskedTextBox.
269345

270346
Gets or sets the value of the MaskedTextBox.
271347

348+
> **Important:** This method **does not trigger** the `focusout` event of the input.
349+
This could affect the [floating label functionality](/api/javascript/ui/maskedtextbox/configuration/label.floating).
350+
You can overcome this behavior by manually invoking the `refresh` method of the Floating Label: `$("#maskedtextbox").data("kendoMaskedTextBox").floatingLabel.refresh();`
351+
272352
#### Parameters
273353

274354
##### value `String`

‎docs/api/javascript/ui/numerictextbox.md‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,81 @@ Compare with the [`decimals`](/api/javascript/ui/numerictextbox#configuration-de
9595
});
9696
</script>
9797

98+
### label `String|Function|Object` *(default: null)*
99+
100+
Adds a label before the input. If the input has no `id` attribute, a generated `id` will be assigned. The `string` and the `function` parameters are setting the inner HTML of the label.
101+
102+
#### Example - create a label from a string
103+
104+
<input id="numerictextbox" />
105+
<script>
106+
$("#numerictextbox").kendoNumericTextBox({
107+
label: "First name"
108+
});
109+
</script>
110+
111+
The function context (available via the `this` keyword) will be set to the widget instance.
112+
113+
#### Example - create a label from a function
114+
115+
<input id="numerictextbox" />
116+
<script>
117+
$("#numerictextbox").kendoNumericTextBox({
118+
label: function() {
119+
return "First name";
120+
}
121+
});
122+
</script>
123+
124+
### label.content `String|Function` *(default: "")*
125+
126+
Sets the inner HTML of the label.
127+
128+
#### Example - create a label from a string
129+
130+
<input id="numerictextbox" />
131+
<script>
132+
$("#numerictextbox").kendoNumericTextBox({
133+
label: {
134+
content: "First name"
135+
}
136+
});
137+
</script>
138+
139+
The function context (available via the `this` keyword) will be set to the widget instance.
140+
141+
#### Example - create a label from a function
142+
143+
<input id="numerictextbox" />
144+
<script>
145+
$("#numerictextbox").kendoNumericTextBox({
146+
label: {
147+
content: function() {
148+
return "First name";
149+
}
150+
}
151+
});
152+
</script>
153+
154+
### label.floating `Boolean` *(default: false)*
155+
156+
If set to `true`, the widget will be wrapped in a container that will allow the floating label functionality.
157+
158+
> **Important:** The [value](/api/javascript/ui/numerictextbox/methods/value) method **does not trigger** the `focusout` event of the input.
159+
This could affect the floating label functionality.
160+
You can overcome this behavior by manually invoking the `refresh` method of the Floating Label: `$("#numerictextbox").data("kendoNumericTextBox").floatingLabel.refresh();`
161+
#### Example - create a floating label
162+
163+
<input id="numerictextbox" />
164+
<script>
165+
$("#numerictextbox").kendoNumericTextBox({
166+
label: {
167+
content: "First name",
168+
floating: true
169+
}
170+
});
171+
</script>
172+
98173
### max `Number`*(default: null)*
99174

100175
Specifies the largest value the user can enter.
@@ -456,6 +531,10 @@ The step value to set.
456531

457532
Gets or sets the value of the NumericTextBox.
458533

534+
> **Important:** This method **does not trigger** the `focusout` event of the input.
535+
This could affect the [floating label functionality](/api/javascript/ui/numerictextbox/configuration/label.floating).
536+
You can overcome this behavior by manually invoking the `refresh` method of the Floating Label: `$("#numerictextbox").data("kendoNumericTextBox").floatingLabel.refresh();`
537+
459538
#### Parameters
460539

461540
##### value `Number | String`

0 commit comments

Comments
 (0)