Skip to content

Commit 1560d22

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 6286896 commit 1560d22

File tree

9 files changed

+291
-108
lines changed

9 files changed

+291
-108
lines changed

‎docs-aspnet/getting-started-core/first-steps-cli.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,3 +160,5 @@ Install the appropriate [.Net Core SDK 2.0 or later](https://www.microsoft.com/n
160160
161161
* [Installing UI for ASP.NET Core by Using the CDN Services]({% slug cdnservices_core %})
162162
* [Installing UI for ASP.NET Core with NuGet]({% slug nuget_install_aspnetmvc6_aspnetmvc %})
163+
* [Migrating from MVC to Core MVC](https://docs.telerik.com/aspnet-core/installation/migrating)
164+
* [MS - Upgrade from ASP.NET Framework to ASP.NET Core](https://learn.microsoft.com/en-us/aspnet/core/migration/proper-to-2x/?view=aspnetcore-7.0)

‎docs-aspnet/getting-started-core/first-steps.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -244,3 +244,5 @@ Congratulations! You created a page that uses the [Telerik UI DatePicker]({% slu
244244

245245
* [Using the UI for ASP.NET Core CDN Services]({% slug cdnservices_core %})
246246
* [Switch from Trial to Commercial License]({% slug upgrade_aspnetcore %}#switching-to-a-developer-license)
247+
* [Migrating from MVC to Core MVC](https://docs.telerik.com/aspnet-core/installation/migrating)
248+
* [MS - Upgrade from ASP.NET Framework to ASP.NET Core](https://learn.microsoft.com/en-us/aspnet/core/migration/proper-to-2x/?view=aspnetcore-7.0)

‎docs-aspnet/getting-started-mvc/first-steps.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,3 +119,5 @@ Press `CTRL+F5` to build and run the application. You have a Grid and a DatePick
119119
* [Upgrade Telerik UI for ASP.NET MVC]({% slug upgrade_aspnetcore %})
120120
* [Collected Examples on ASP.NET MVC](https://github.com/telerik/kendo-examples-asp-net-mvc)
121121
* [Collected Examples on Telerik UI for ASP.NET MVC](https://github.com/telerik/ui-for-aspnet-mvc-examples)
122+
* [Migrating from MVC to Core MVC](https://docs.telerik.com/aspnet-core/installation/migrating)
123+
* [MS - Upgrade from ASP.NET Framework to ASP.NET Core](https://learn.microsoft.com/en-us/aspnet/core/migration/proper-to-2x/?view=aspnetcore-7.0)

‎docs-aspnet/html-helpers/editors/datetimepicker/getting-started.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ Optionally, you can structure the document by adding the desired HTML elements l
2626

2727
Use the DateTimePicker HtmlHelper {% if site.core %}or TagHelper{% endif %} to add the component to a page:
2828

29-
* The `Name()` configuration method is mandatory as its value is used for the `id` and the `name` attributes of the DateRangePicker element.
29+
* The `Name()` configuration method is mandatory as its value is used for the `id` and the `name` attributes of the DateTimePicker element.
3030

3131
* The `Culture()` configuration method specifies the culture info used by the widget. `Date` and `time` values typically vary by culture. For example, the `"d"` standard format string indicates that a date and time value is to be displayed using a short date pattern. For the invariant culture, this pattern is `"MM/dd/yyyy"`. For the `fr-FR` culture, it is `"dd/MM/yyyy"`. For the `ja-JP` culture, it is `"yyyy/MM/dd"`.
3232

@@ -56,7 +56,7 @@ Use the DateTimePicker HtmlHelper {% if site.core %}or TagHelper{% endif %} to a
5656

5757
## 3. Handle the DateTimePicker Events
5858

59-
The DateTimePicker [exposes various events](/api/kendo.mvc.ui.fluent/datetimepickereventbuilder) that you can handle and further customize the functionality of the component. In this tutorial, you will use the `Open`, `Close`, and `Change` events of the DateRangePicker.
59+
The DateTimePicker [exposes various events](/api/kendo.mvc.ui.fluent/datetimepickereventbuilder) that you can handle and further customize the functionality of the component. In this tutorial, you will use the `Open`, `Close`, and `Change` events of the DateTimePicker.
6060

6161
```HtmlHelper
6262
@using Kendo.Mvc.UI

‎docs-aspnet/html-helpers/editors/timepicker/events.md‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
---
2+
title: Events
3+
page_title: Events
4+
description: "Learn how to handle the events of the Telerik UI TimePicker component for {{ site.framework }}."
5+
slug: events_timepicker_aspnetcore
6+
position: 8
7+
---
8+
9+
# Events
10+
11+
You can subscribe to the `Open`, `Close`, and `Change` [TimePicker events](/api/kendo.mvc.ui.fluent/timepickereventbuilder) and further customize the functionality of the component.
12+
13+
For a complete example on basic TimePicker events, refer to the [demo on using the events of the DateRangePicker](https://demos.telerik.com/{{ site.platform }}/timepicker/events).
14+
15+
## Handling Events by Handler Name
16+
17+
The following example demonstrates how to subscribe to events by a handler name.
18+
19+
```HtmlHelper
20+
@(Html.Kendo().TimePicker()
21+
.Name("timepicker")
22+
.Events(e => e
23+
.Open("timepicker_open")
24+
.Close("timepicker_close")
25+
.Change("timepicker_change")
26+
)
27+
)
28+
```
29+
{% if site.core %}
30+
```TagHelper
31+
<kendo-timepicker name="timepicker"
32+
on-open="timepicker_open"
33+
on-close="timepicker_close"
34+
on-change="timepicker_open"/>
35+
```
36+
{% endif %}
37+
```JavaScript
38+
function timepicker_open() {
39+
// Handle the open event.
40+
}
41+
42+
function timepicker_close() {
43+
// Handle the close event.
44+
}
45+
46+
function timepicker_change() {
47+
// Handle the change event.
48+
}
49+
50+
```
51+
52+
### Handling Events by Template Delegate
53+
54+
The following example demonstrates how to subscribe to events by a template delegate.
55+
56+
```HtmlHelper
57+
@(Html.Kendo().TimePicker()
58+
.Name("timepicker")
59+
.Events(e => e
60+
.Open(@<text>
61+
function() {
62+
// Handle the open event inline.
63+
}
64+
</text>)
65+
.Change(@<text>
66+
function() {
67+
// Handle the change event inline.
68+
}
69+
</text>)
70+
.Close(@<text>
71+
function() {
72+
// Handle the close event inline.
73+
}
74+
</text>)
75+
)
76+
)
77+
```
78+
{% if site.core %}
79+
```TagHelper
80+
<kendo-timepicker name="timepicker"
81+
on-open='function(e)
82+
{
83+
// Handle the open event inline.
84+
}'
85+
on-change='function(e)
86+
{
87+
/ Handle the change event inline.
88+
}'/>
89+
on-close='function(e)
90+
{
91+
/ Handle the close event inline.
92+
}'/>
93+
```
94+
{% endif %}
95+
96+
## Next Steps
97+
98+
* [Using the TimePicker Events (Demo)](https://demos.telerik.com/aspnet-core/timepicker/events)
99+
100+
## See Also
101+
102+
* [Using the API of the TimePicker HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/timepicker/api)
103+
* [TimePicker Server-Side API](/api/timepicker)
104+
* [TimePicker Client-Side API](https://docs.telerik.com/kendo-ui/api/javascript/ui/timepicker)

‎docs-aspnet/html-helpers/editors/timepicker/getting-started.md‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
---
2+
title: Getting Started
3+
page_title: Getting Started
4+
description: "Make your first steps with the Telerik UI for {{ site.framework }} TimePicker component by following a complete step-by-step tutorial."
5+
slug: timepicker_getting_started
6+
position: 1
7+
---
8+
9+
# Getting Started with the TimePicker
10+
11+
This tutorial explains how to set up a basic Telerik UI for {{ site.framework }} TimePicker and highlights the major steps in the configuration of the component.
12+
13+
You will initialize a TimePicker control with a number of tools. Next, you will handle some of the TimePicker events. {% if site.core %}Finally, you can run the sample code in [Telerik REPL](https://netcorerepl.telerik.com/) and continue exploring the components.{% endif %}
14+
15+
![Sample Telerik UI for {{ site.framework }} TimePicker](./images/timepicker-getting-started.png)
16+
17+
@[template](/_contentTemplates/core/getting-started-prerequisites.md#repl-component-gs-prerequisites)
18+
19+
## 1. Prepare the CSHTML File
20+
21+
@[template](/_contentTemplates/core/getting-started-directives.md#gs-adding-directives)
22+
23+
Optionally, you can structure the document by adding the desired HTML elements like headings, divs, paragraphs, and apply some basic styles.
24+
25+
## 2. Initialize the TimePicker
26+
27+
Use the TimePicker HtmlHelper {% if site.core %}or TagHelper{% endif %} to add the component to a page:
28+
29+
* The `Name()` configuration method is mandatory as its value is used for the `id` and the `name` attributes of the TimePicker element.
30+
31+
* The `DateInput()` configuration method specifies if the TimePicker will use the [DateInput]{% slug htmlhelpers_dateinput_aspnetcore %}) component for value editing.
32+
33+
* The `Value()` configuration method specifies the initially selected time.
34+
35+
```HtmlHelper
36+
37+
@using Kendo.Mvc.UI
38+
39+
@(Html.Kendo().TimePicker()
40+
.Name("timepicker")
41+
.Value("10:00 AM")
42+
.DateInput()
43+
)
44+
```
45+
46+
{% if site.core %}
47+
```TagHelper
48+
@addTagHelper *, Kendo.Mvc
49+
50+
<kendo-timepicker name="timepicker" value="new DateTime(1900, 1, 1, 10, 00, 0)" date-input="true">
51+
</kendo-timepicker>
52+
53+
```
54+
{% endif %}
55+
56+
## 3. Handle the TimePicker Events
57+
58+
The TimePicker [exposes various events](/api/kendo.mvc.ui.fluent/timepickereventbuilder) that you can handle and further customize the functionality of the component. In this tutorial, you will use the `Open`, `Close`, and `Change` events of the TimePicker to log a message in the Browser's console.
59+
60+
```HtmlHelper
61+
@using Kendo.Mvc.UI
62+
63+
@(Html.Kendo().TimePicker()
64+
.Name("timepicker")
65+
.Value("10:00 AM")
66+
.DateInput()
67+
.Events(e =>
68+
{
69+
e.Change("change").Open("open").Close("close");
70+
})
71+
)
72+
73+
<script>
74+
function open() {
75+
console.log("Open");
76+
}
77+
78+
function close() {
79+
console.log("Close");
80+
}
81+
82+
function change() {
83+
console.log("Change :: " + kendo.toString(this.value(), 't'));
84+
}
85+
</script>
86+
```
87+
{% if site.core %}
88+
```TagHelper
89+
90+
@addTagHelper *, Kendo.Mvc
91+
92+
<kendo-timepicker name="timepicker" value="new DateTime(1900, 1, 1, 10, 00, 0)" date-input="true" on-change="change" on-open="open" on-close="close">
93+
</kendo-timepicker>
94+
95+
<script>
96+
function open() {
97+
console.log("Open");
98+
}
99+
100+
function close() {
101+
console.log("Close");
102+
}
103+
104+
function change() {
105+
console.log("Change :: " + kendo.toString(this.value(), 't'));
106+
}
107+
</script>
108+
```
109+
{% endif %}
110+
111+
For more examples, refer to the [demo on using the events of the TimePicker](https://demos.telerik.com/{{ site.platform }}/timepicker/events).
112+
113+
## 4. (Optional) Reference Existing TimePicker Instances
114+
115+
To use the [client-side API of the TimePicker](https://docs.telerik.com/kendo-ui/api/javascript/ui/timepicker) and build on top of its initial configuration, you need a reference to the TimePicker instance. Once you get a valid reference, you can call the respective API methods:
116+
117+
1. Use the `.Name()` (`id` attribute) of the component instance to get a reference.
118+
119+
```script
120+
<script>
121+
var timePickerReference = $("#timepicker").data("kendoTimePicker"); // timePickerReference is a reference to the existing instance of the helper.
122+
</script>
123+
```
124+
125+
1. Use the [client-side API of the TimePicker](https://docs.telerik.com/kendo-ui/api/javascript/ui/timepicker) to control the behavior of the widget. In this example, you will use the [`enable`](https://docs.telerik.com/kendo-ui/api/javascript/ui/timepicker/methods/enable) method to disable the TimePicker.
126+
127+
```script
128+
<script>
129+
$(document).ready(function () {
130+
var timepicker = $("#timepicker").data("kendoTimePicker");
131+
132+
timepicker.enable(false);
133+
})
134+
</script>
135+
```
136+
137+
For more information on referencing specific helper instances, see the [Methods and Events]({% slug methodevents_core %}) article.
138+
139+
{% if site.core %}
140+
141+
## Explore this Tutorial in REPL
142+
143+
You can continue experimenting with the code sample above by running it in the Telerik REPL server playground:
144+
145+
* [Sample code with the TimePicker HtmlHelper](https://netcorerepl.telerik.com/QxOzlvvH41DZ6oLL00)
146+
147+
* [Sample code with the TimePicker TagHelper](https://netcorerepl.telerik.com/mHOzlbFR41l9KNn444)
148+
{% endif %}
149+
150+
## Next Steps
151+
152+
* [Configuring the Floating Label of the TimePicker]({% slug htmlhelpers_timepicker_floatinglabel_aspnetcore %})
153+
* [Customizing the Appearance of the TimePicker]({% slug appearance_timepicker %})
154+
* [Using Validation with the TimePicker]({% slug htmlhelpers_timepicker_aspnetcore_validation %})
155+
156+
## See Also
157+
158+
* [Using the API of the TimePicker for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/timepicker/api)
159+
* [Client-Side API of the TimePicker](https://docs.telerik.com/kendo-ui/api/javascript/ui/timepicker)
160+
* [Server-Side API of the TimePicker](/api/timepicker)
161+
* [Knowledge Base Section](/knowledge-base)

‎docs-aspnet/html-helpers/editors/timepicker/images/timepicker-getting-started.png‎

1.49 KB
Loading

0 commit comments

Comments
 (0)