From 9e2c980e0efa7dec3d4bc54e1d5d0848e2287b15 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Thu, 26 Jun 2025 09:48:23 +0300
Subject: [PATCH] docs(AI, TimePicker): ticket-related improvements
---
ai/mcp-server.md | 1 +
components/timepicker/events.md | 88 ++++++++++-----------------------
2 files changed, 26 insertions(+), 63 deletions(-)
diff --git a/ai/mcp-server.md b/ai/mcp-server.md
index 849c8bbf6..8afdcdc35 100644
--- a/ai/mcp-server.md
+++ b/ai/mcp-server.md
@@ -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).
diff --git a/components/timepicker/events.md b/components/timepicker/events.md
index d56375a7f..4e6af41cf 100644
--- a/components/timepicker/events.md
+++ b/components/timepicker/events.md
@@ -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
-
-
-
-
-@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
-model value: @thePickerValue
+TimePicker Value: @TimePickerValue
-
+
+
@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;
}
}
````
@@ -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
+
+TimePicker Value: @TimePickerValue
-
+
+
@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}";
}
}
````
@@ -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
-
-model value: @thePickerValue
-
-
-
-
-@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.