Skip to content

docs(AI, TimePicker): ticket-related improvements #3064

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 26, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions ai/mcp-server.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ The Telerik Blazor [MCP Server](https://modelcontextprotocol.io/introduction) le

To use the Telerik Blazor MCP server, you need:

* [Node.js](https://nodejs.org/en) 18 or a newer version.
* A [compatible MCP client (IDE, code editor or app)](https://modelcontextprotocol.io/clients) that supports *MCP tools*. Using the latest version of the MCP client is recommended.
* A [Telerik user account](https://www.telerik.com/account/).
* An active [DevCraft or Telerik UI for Blazor license](https://www.telerik.com/purchase/blazor-ui) or a [Telerik UI for Blazor trial](https://www.telerik.com/blazor-ui).
Expand Down
88 changes: 25 additions & 63 deletions components/timepicker/events.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,49 +22,30 @@ This article explains the events available in the Telerik TimePicker for Blazor:

The `ValueChanged` event fires upon every change (for example, keystroke) in the input, and upon clicking the `Set` or `Now` buttons in the dropdown.

>caption Handle ValueChanged
The event handler receives the new value as an argument and you must update the component `Value` programmatically for the user changes to take effect.

````RAZOR
@result
<br />

<TelerikTimePicker ValueChanged="@( (DateTime d) => MyValueChangeHandler(d) )"></TelerikTimePicker>

@code {
string result;

private void MyValueChangeHandler(DateTime theUserInput)
{
result = string.Format("The user entered: {0}", theUserInput);
}
}
````

@[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async)

@[template](/_contentTemplates/common/issues-and-warnings.md#valuechanged-lambda-required)

>caption Handle ValueChanged and provide initial value
>caption Handle the TimePicker ValueChanged event

````RAZOR
@result
@Result
<br />
model value: @thePickerValue
TimePicker Value: @TimePickerValue
<br />

<TelerikTimePicker Value="@thePickerValue" ValueChanged="@( (DateTime d) => MyValueChangeHandler(d) )"></TelerikTimePicker>
<TelerikTimePicker Value="@TimePickerValue"
ValueChanged="@( (DateTime d) => TimePickerValueChanged(d) )">
</TelerikTimePicker>

@code {
string result;
private string Result { get; set; } = string.Empty;

DateTime thePickerValue { get; set; } = DateTime.Now;
private DateTime TimePickerValue { get; set; } = DateTime.Now;

private void MyValueChangeHandler(DateTime theUserInput)
private void TimePickerValueChanged(DateTime newValue)
{
result = $"The user entered: {theUserInput}";
Result = $"The user entered: {newValue}";

//you have to update the model manually because handling the ValueChanged event does not let you use @bind-Value
thePickerValue = theUserInput;
TimePickerValue = newValue;
}
}
````
Expand All @@ -75,22 +56,27 @@ The `OnChange` event represents a user action - confirmation of the current valu

The time picker is a generic component, so you must provide either a `Value`, or a type to the `T` parameter of the component.

>caption Handle OnChange
>caption Handle the TimePicker OnChange event

````RAZOR
@result
@Result
<br />
TimePicker Value: @TimePickerValue
<br />

<TelerikTimePicker T="DateTime" OnChange="@MyOnChangeHandler"></TelerikTimePicker>
<TelerikTimePicker @bind-Value="@TimePickerValue"
OnChange="OnTimePickerChange">
</TelerikTimePicker>

@code {
string result;
private string Result { get; set; } = string.Empty;

private DateTime TimePickerValue { get; set; } = DateTime.Now;

private void MyOnChangeHandler(object theUserInput)
private void OnTimePickerChange(object currentValue)
{
// the handler receives an object that you may need to cast to the type of the component
// if you do not provide a Value, you must provide the Type parameter to the component
result = string.Format("The user entered: {0:HH:mm:ss}", (DateTime)theUserInput);
// Cast the event argument to the actual value type
Result = $"The user entered: {(DateTime)currentValue}";
}
}
````
Expand All @@ -99,30 +85,6 @@ The time picker is a generic component, so you must provide either a `Value`, or

>tip The `OnChange` event is a custom event and does not interfere with bindings, so you can use it together with models and forms.

>caption Handle OnChange and use two-way binding

````RAZOR
@result
<br />
model value: @thePickerValue
<br />

<TelerikTimePicker @bind-Value="@thePickerValue" OnChange="@MyOnChangeHandler"></TelerikTimePicker>

@code {
string result;

DateTime? thePickerValue { get; set; } = DateTime.Now;

private void MyOnChangeHandler(object theUserInput)
{
// the handler receives an object that you may need to cast to the type of the component
// if you do not provide a Value, you must provide the Type parameter to the component
result = string.Format("The user entered: {0}", (theUserInput as DateTime?).Value);
}
}
````

## OnOpen

The `OnOpen` event fires before the TimePicker popup renders.
Expand Down
Loading