Skip to content

Commit 39f7ff7

Browse files
marin-bratanovmarin-bratanov
committed
docs(common): input events articles
1 parent f555db9 commit 39f7ff7

File tree

6 files changed

+601
-1
lines changed

6 files changed

+601
-1
lines changed

‎_contentTemplates/common/issues-and-warnings.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,8 @@ Open the Client `.csproj` file and ensure that the following switch is present.
1212

1313
#static-asset-issue-in-client-project
1414
Static assets currently work only for Server-side project types because of [an issue in the framework](https://github.com/aspnet/AspNetCore/issues/10986). If you use a client-side model, you must reference the script from our CDN.
15-
#end
15+
#end
16+
17+
#valuechanged-lambda-required
18+
>note The lambda expression in the handler is required by the framework: [https://github.com/aspnet/AspNetCore/issues/12226](https://github.com/aspnet/AspNetCore/issues/12226).
19+
#

‎components/dateinput/events.md‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
---
2+
title: Events
3+
page_title: DateInput for Blazor | Events
4+
description: Events in the DateInput for Blazor
5+
slug: components/dateinput/events
6+
tags: telerik,blazor,DateInput,events
7+
published: true
8+
position: 20
9+
---
10+
11+
# Events
12+
13+
This article explsins the events available in the Telerik DateInput for Blazor:
14+
15+
* [OnChange](#onchange)
16+
* [ValueChanged](#valuechanged)
17+
18+
## OnChange
19+
20+
The `OnChange` event fires when the new value is commited by the user either by pressing `Enter`, or when the input loses focus.
21+
22+
The date input is a generic component, so you must provide either a `Value`, or a type to the `T` parameter of the component.
23+
24+
>caption Handle OnChange
25+
26+
````CSHTML
27+
@using Telerik.Blazor.Components.DateInput
28+
29+
<TelerikDateInput T="DateTime" OnChange="@MyOnChangeHandler"></TelerikDateInput>
30+
31+
<br />
32+
@result
33+
34+
@code {
35+
string result;
36+
37+
private void MyOnChangeHandler(object theUserInput)
38+
{
39+
// the handler receives an object that you may need to cast to the type of the component
40+
// if you do not provide a Value, you must provide the Type parameter to the component
41+
result = string.Format("The user entered: {0:dd/MMM/yyyy}", (DateTime)theUserInput);
42+
}
43+
}
44+
````
45+
46+
>tip The `OnChange` event is a custom event and does not interfere with bindings, so you can use it together with models and forms.
47+
48+
>caption Handle OnChange and use two-way binding
49+
50+
````CSHTML
51+
@using Telerik.Blazor.Components.DateInput
52+
53+
<TelerikDateInput @bind-Value="@theInputValue" OnChange="@MyOnChangeHandler"></TelerikDateInput>
54+
55+
<br />
56+
@result
57+
<br />
58+
model value: @theInputValue
59+
60+
@code {
61+
string result;
62+
63+
DateTime? theInputValue { get; set; } = DateTime.Now;
64+
65+
private void MyOnChangeHandler(object theUserInput)
66+
{
67+
// the handler receives an object that you may need to cast to the type of the component
68+
// if you do not provide a Value, you must provide the Type parameter to the component
69+
result = string.Format("The user entered: {0:dd/MMM/yyyy}", (theUserInput as DateTime?).Value);
70+
}
71+
}
72+
````
73+
74+
## ValueChanged
75+
76+
The `ValueChanged` event fires upon every change (for example, keystroke) in the input.
77+
78+
>caption Handle ValueChanged
79+
80+
````CSHTML
81+
@using Telerik.Blazor.Components.DateInput
82+
83+
<TelerikDateInput ValueChanged="@( (DateTime d) => MyValueChangeHandler(d) )"></TelerikDateInput>
84+
85+
<br />
86+
@result
87+
88+
@code {
89+
string result;
90+
91+
private void MyValueChangeHandler(DateTime theUserInput)
92+
{
93+
result = string.Format("The user entered: {0}", theUserInput);
94+
}
95+
}
96+
````
97+
98+
@[template](/_contentTemplates/common/issues-and-warnings.md#valuechanged-lambda-required)
99+
100+
>caption Handle ValueChanged and provide initial value
101+
102+
````CSHTML
103+
@using Telerik.Blazor.Components.DateInput
104+
105+
<TelerikDateInput Value="@theInputValue" ValueChanged="@( (DateTime d) => MyValueChangeHandler(d) )"></TelerikDateInput>
106+
107+
<br />
108+
@result
109+
<br />
110+
model value: @theInputValue
111+
112+
@code {
113+
string result;
114+
115+
DateTime theInputValue { get; set; } = DateTime.Now;
116+
117+
private void MyValueChangeHandler(DateTime theUserInput)
118+
{
119+
result = string.Format("The user entered: {0:dd/MMM/yyyy}", theUserInput);
120+
121+
//you have to update the model manually because handling the ValueChanged event does not let you use @bind-Value
122+
theInputValue = theUserInput;
123+
}
124+
}
125+
````
126+
127+
## See Also
128+
129+
* [ValueChanged and Validation]({%slug value-changed-validation-model%})

‎components/datepicker/events.md‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
---
2+
title: Events
3+
page_title: DatePicker for Blazor | Events
4+
description: Events in the DatePicker for Blazor
5+
slug: components/datepicker/events
6+
tags: telerik,blazor,DatePicker,events
7+
published: true
8+
position: 20
9+
---
10+
11+
# Events
12+
13+
This article explsins the events available in the Telerik DatePicker for Blazor:
14+
15+
* [OnChange](#onchange)
16+
* [ValueChanged](#valuechanged)
17+
18+
## OnChange
19+
20+
The `OnChange` event fires when the new value is commited by the user either by pressing `Enter`, or when the input loses focus.
21+
22+
The date picker is a generic component, so you must provide either a `Value`, or a type to the `T` parameter of the component.
23+
24+
>caption Handle OnChange
25+
26+
````CSHTML
27+
@using Telerik.Blazor.Components.DatePicker
28+
29+
<TelerikDatePicker T="DateTime" OnChange="@MyOnChangeHandler"></TelerikDatePicker>
30+
31+
<br />
32+
@result
33+
34+
@code {
35+
string result;
36+
37+
private void MyOnChangeHandler(object theUserInput)
38+
{
39+
// the handler receives an object that you may need to cast to the type of the component
40+
// if you do not provide a Value, you must provide the Type parameter to the component
41+
result = string.Format("The user entered: {0:dd/MMM/yyyy}", (DateTime)theUserInput);
42+
}
43+
}
44+
````
45+
46+
>tip The `OnChange` event is a custom event and does not interfere with bindings, so you can use it together with models and forms.
47+
48+
>caption Handle OnChange and use two-way binding
49+
50+
````CSHTML
51+
@using Telerik.Blazor.Components.DatePicker
52+
53+
<TelerikDatePicker @bind-Value="@thePickerValue" OnChange="@MyOnChangeHandler"></TelerikDatePicker>
54+
55+
<br />
56+
@result
57+
<br />
58+
model value: @thePickerValue
59+
60+
@code {
61+
string result;
62+
63+
DateTime? thePickerValue { get; set; } = DateTime.Now;
64+
65+
private void MyOnChangeHandler(object theUserInput)
66+
{
67+
// the handler receives an object that you may need to cast to the type of the component
68+
// if you do not provide a Value, you must provide the Type parameter to the component
69+
result = string.Format("The user entered: {0:dd/MMM/yyyy}", (theUserInput as DateTime?).Value);
70+
}
71+
}
72+
````
73+
74+
## ValueChanged
75+
76+
The `ValueChanged` event fires upon every change (for example, keystroke) in the input.
77+
78+
>caption Handle ValueChanged
79+
80+
````CSHTML
81+
@using Telerik.Blazor.Components.DatePicker
82+
83+
<TelerikDatePicker ValueChanged="@( (DateTime d) => MyValueChangeHandler(d) )"></TelerikDatePicker>
84+
85+
<br />
86+
@result
87+
88+
@code {
89+
string result;
90+
91+
private void MyValueChangeHandler(DateTime theUserInput)
92+
{
93+
result = string.Format("The user entered: {0}", theUserInput);
94+
}
95+
}
96+
````
97+
98+
@[template](/_contentTemplates/common/issues-and-warnings.md#valuechanged-lambda-required)
99+
100+
>caption Handle ValueChanged and provide initial value
101+
102+
````CSHTML
103+
@using Telerik.Blazor.Components.DatePicker
104+
105+
<TelerikDatePicker Value="@thePickerValue" ValueChanged="@( (DateTime d) => MyValueChangeHandler(d) )"></TelerikDatePicker>
106+
107+
<br />
108+
@result
109+
<br />
110+
model value: @thePickerValue
111+
112+
@code {
113+
string result;
114+
115+
DateTime thePickerValue { get; set; } = DateTime.Now;
116+
117+
private void MyValueChangeHandler(DateTime theUserInput)
118+
{
119+
result = string.Format("The user entered: {0:dd/MMM/yyyy}", theUserInput);
120+
121+
//you have to update the model manually because handling the ValueChanged event does not let you use @bind-Value
122+
thePickerValue = theUserInput;
123+
}
124+
}
125+
````
126+
127+
## See Also
128+
129+
* [ValueChanged and Validation]({%slug value-changed-validation-model%})

0 commit comments

Comments
 (0)