-
-
- Submit
-
+````RAZOR DropDownList.razor
+@using System.Linq.Expressions
+
+@typeparam TItem
+@typeparam TValue
+
+
@code {
- Person person = new Person();
+ [Parameter]
+ public List? Data { get; set; }
- IEnumerable teams = new List
- {
- new MyDdlModel {MyTextField = "Team 1", MyValueField = 1},
- new MyDdlModel {MyTextField = "Team 2", MyValueField = 2},
- new MyDdlModel {MyTextField = "Team 3", MyValueField = 3},
- new MyDdlModel {MyTextField = "CEO", MyValueField = 4}
- };
+ [Parameter]
+ public TValue? Value { get; set; }
- IEnumerable roles = new List
- {
- new MyDdlModelString { Text = "Developer", Value = "Dev" },
- new MyDdlModelString { Text = "QA", Value = "QA" },
- new MyDdlModelString { Text = "Support", Value = "Support" }
- };
+ [Parameter]
+ public EventCallback ValueChanged { get; set; }
+
+ [Parameter]
+ public Expression>? ValueExpression { get; set; }
+
+ [Parameter]
+ public string Id { get; set; } = string.Empty;
- void HandleValidSubmit()
+ [Parameter]
+ public string TextField { get; set; } = string.Empty;
+
+ [Parameter]
+ public string ValueField { get; set; } = string.Empty;
+
+ private async Task TextBoxValueChanged(TValue? newValue)
{
- Console.WriteLine("OnValidSubmit");
+ Value = newValue;
+
+ if (ValueChanged.HasDelegate)
+ {
+ await ValueChanged.InvokeAsync(newValue);
+ }
}
}
````
-````C# Person
+````C# Customer.cs
using System.ComponentModel.DataAnnotations;
-public class Person
+public class Customer
{
- [Required(ErrorMessage = "Team is mandatory.")]//the value field in the combobox model must be null for this to have effect
- [Range(1, 3, ErrorMessage = "Please select an actual team.")] //limits the fourth option just to showcase this is honored
- public int? Team { get; set; }
+ public int Id { get; set; }
[Required]
- [StringLength(10, ErrorMessage = "Enter less than 10 symbols")]
- public string Role { get; set; }
-}
-````
-````C# MyDdlModel
-public class MyDdlModel
-{
- public int? MyValueField { get; set; }
- public string MyTextField { get; set; }
+ public string Name { get; set; } = string.Empty;
+
+ [Required]
+ public int? CountryId { get; set; }
}
+
````
-````C# MyDdlModelString
-public class MyDdlModelString
+````C# Country.cs
+public class Country
{
- public string Value { get; set; }
- public string Text { get; set; }
+ public int Id { get; set; }
+
+ public string Name { get; set; } = string.Empty;
}
````
## See also
* [Knowledge Base article: How to handle the ValueChanged event and use forms and validation. ](slug:value-changed-validation-model)
+* [Form Validation](slug:form-validation)
+* [FormItem Template](slug:form-formitems-template)
diff --git a/knowledge-base/value-changed-validation-model.md b/knowledge-base/value-changed-validation-model.md
index e9f09b1928..7cc77e9a39 100644
--- a/knowledge-base/value-changed-validation-model.md
+++ b/knowledge-base/value-changed-validation-model.md
@@ -97,4 +97,4 @@ from model: @person.theTbValue
## See also
-* [Knowledge Base article: Validate a Telerik component as child control and apply invalid border ](slug:inputs-kb-validate-child-component)
+* [Validate a Telerik component as child control and apply invalid border ](slug:inputs-kb-validate-child-component)
From e9bec3e3e3aaba86f4fbafd985371a149316d8d8 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Fri, 13 Jun 2025 10:54:19 +0300
Subject: [PATCH 28/97] kb(MediaQuery): Add KB about Json exception (#3014)
* kb(MediaQuery): Add KB about Json exception
* Update knowledge-base/mediaquery-initmediaquery-jsonexception.md
Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
* Update knowledge-base/mediaquery-initmediaquery-jsonexception.md
Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
* Update knowledge-base/mediaquery-initmediaquery-jsonexception.md
Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
---------
Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
---
.../chart-newtonsoft-seialization-settings.md | 5 +
...-breaks-datasourcerequest-serialization.md | 4 +
...mediaquery-initmediaquery-jsonexception.md | 108 ++++++++++++++++++
3 files changed, 117 insertions(+)
create mode 100644 knowledge-base/mediaquery-initmediaquery-jsonexception.md
diff --git a/knowledge-base/chart-newtonsoft-seialization-settings.md b/knowledge-base/chart-newtonsoft-seialization-settings.md
index c33d96f71a..1babd83418 100644
--- a/knowledge-base/chart-newtonsoft-seialization-settings.md
+++ b/knowledge-base/chart-newtonsoft-seialization-settings.md
@@ -199,3 +199,8 @@ public class ChartDataController : ControllerBase
## Notes
The approach used internally by the Chart may change in the future. For example, at the time of writing, the new `System.Net.Http.Json` is not yet ready for use, but it may be used in the future. Thus, the approach described in this article may become unnecessary or wrong.
+
+## See Also
+
+* [DataSourceRequest Filters not Working When You Add Reporting or Newtonsoft.Json](slug:common-kb-newtonsoft-breaks-datasourcerequest-serialization)
+* [InitMediaQueryWidget Throws JsonException](slug:mediaquery-kb-initmediaquery-jsonexception)
diff --git a/knowledge-base/common-newtonsoft-breaks-datasourcerequest-serialization.md b/knowledge-base/common-newtonsoft-breaks-datasourcerequest-serialization.md
index 59d8705419..a8daa0fde9 100644
--- a/knowledge-base/common-newtonsoft-breaks-datasourcerequest-serialization.md
+++ b/knowledge-base/common-newtonsoft-breaks-datasourcerequest-serialization.md
@@ -112,3 +112,7 @@ There are three other paths forward you can consider:
Telerik supports serialization of the `DataSourceRequest` as part of the [`Telerik.DataSource` package](slug:common-features-datasource-package) (which is used by UI for Blazor) with the `System.Text.Json` serializer only.
+## See Also
+
+* [Chart not Working with Newtonsoft.Json Properties](slug:chart-kb-newtonsoft-seialization-settings)
+* [InitMediaQueryWidget Throws JsonException](slug:mediaquery-kb-initmediaquery-jsonexception)
diff --git a/knowledge-base/mediaquery-initmediaquery-jsonexception.md b/knowledge-base/mediaquery-initmediaquery-jsonexception.md
new file mode 100644
index 0000000000..b9d270f77f
--- /dev/null
+++ b/knowledge-base/mediaquery-initmediaquery-jsonexception.md
@@ -0,0 +1,108 @@
+---
+title: InitMediaQueryWidget Throws JsonException
+description: Learn how to troubleshoot and find the cause for a JsonException that may be thrown by the Telerik InitMediaQueryWidget method.
+type: troubleshooting
+page_title: InitMediaQueryWidget Throws JsonException Due to Invalid Cast
+slug: mediaquery-kb-initmediaquery-jsonexception
+tags: blazor, mediaquery, serialization
+ticketid: 1676092, 1680874
+res_type: kb
+---
+
+## Environment
+
+
+
+
+
Product
+
+ MediaQuery for Blazor
+
+
+
+
+
+## Description
+
+A Blazor app may throw a runtime JSON serialization exception on startup that is similar to:
+
+```C#.skip-repl
+Microsoft.JSInterop.JSException: An exception occurred executing JS interop: DeserializeUnableToConvertValue, System.Boolean Path: $ | LineNumber: 0 | BytePositionInLine: 4.. See InnerException for more details.
+
+ ---> System.Text.Json.JsonException: DeserializeUnableToConvertValue, System.Boolean Path: $ | LineNumber: 0 | BytePositionInLine: 4.
+ ---> System.InvalidOperationException: InvalidCast, Null, boolean
+ at System.Text.Json.ThrowHelper.ThrowInvalidOperationException_ExpectedBoolean(JsonTokenType )
+ at System.Text.Json.Utf8JsonReader.GetBoolean()
+
+ ...
+
+ at Microsoft.JSInterop.JSRuntime..MoveNext()
+ at Telerik.Blazor.Components.TelerikMediaQuery.InitMediaQueryWidget()
+ at Telerik.Blazor.Components.TelerikMediaQuery.OnAfterRenderAsync(Boolean firstRender)
+```
+
+or
+
+```C#.skip-repl
+Microsoft.JSInterop.JSException: An exception occurred executing JS interop: The JSON value could not be converted to System.Boolean. Path: $ | LineNumber: 0 | BytePositionInLine: 4.. See InnerException for more details.
+
+ ---> System.Text.Json.JsonException: The JSON value could not be converted to System.Boolean. Path: $ | LineNumber: 0 | BytePositionInLine: 4.
+ ---> System.InvalidOperationException: Cannot get the value of a token type 'Null' as a boolean.
+ at System.Text.Json.ThrowHelper.ThrowInvalidOperationException_ExpectedBoolean(JsonTokenType tokenType)
+ at System.Text.Json.Utf8JsonReader.GetBoolean()
+ ...
+
+ at Microsoft.JSInterop.JSRuntime..MoveNext()
+ at Telerik.Blazor.Components.TelerikMediaQuery.InitMediaQueryWidget()
+ at Telerik.Blazor.Components.TelerikMediaQuery.OnAfterRenderAsync(Boolean firstRender)
+```
+
+## Cause
+
+The [`TelerikRootComponent`](slug:rootcomponent-overview) creates a few [MediaQuery](slug:mediaquery-overview) components. These MediaQuery instances are responsible for the [adaptive behavior of all Telerik dropdowns and popups](slug:adaptive-rendering). During initialization, each Telerik MediaQuery component performs a JSInterop call in `OnAfterRenderAsync` that returns a boolean value back to the .NET runtime. This bool value shows whether the current browser viewport size matches the MediaQuery `Media` parameter value.
+
+An JSON exception in the above algorithm indicates that the received value cannot be converted to boolean type. This can happen if the application is using a third-party package or middleware (for example, Serilog) that overrides the .NET serialization mechanism. As a result, the .NET runtime may receive `null` instead of `true` or `false`.
+
+## Solution
+
+The recommended approach is to modify the app configuration or third-party tooling, so that the .NET serialization works by default.
+
+## Suggested Workaround
+
+In some cases, it may be possible to avoid the JSON error by rendering all Razor components in the app with a delay in `OnAfterRenderAsync`:
+
+>caption MainLayout.razor
+
+````RAZOR.skip-repl
+@inherits LayoutComponentBase
+
+@if (ShouldRenderApp)
+{
+
+ @Body
+
+}
+
+@code {
+ private bool ShouldRenderApp { get; set; }
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ if (firstRender)
+ {
+ await Task.Delay(1);
+
+ ShouldRenderApp = true;
+ StateHasChanged();
+ }
+
+ await base.OnAfterRenderAsync(firstRender);
+ }
+}
+````
+
+## See Also
+
+* [DataSourceRequest Filters not Working When You Add Reporting or Newtonsoft.Json](slug:common-kb-newtonsoft-breaks-datasourcerequest-serialization)
+* [Chart not Working with Newtonsoft.Json Properties](slug:chart-kb-newtonsoft-seialization-settings)
+* [Troubleshooting JavaScript Errors](slug:troubleshooting-js-errors)
From 337dc10d05965762d70b1d7e8827d503add09bef Mon Sep 17 00:00:00 2001
From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com>
Date: Fri, 13 Jun 2025 13:07:32 +0300
Subject: [PATCH 29/97] chore(TabStrip): add kb for adding and removing tabs
(#2998)
* chore(TabStrip): add kb for adding and removing tabs
* chore: polish the example and update article content
* polish KB article
---------
Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
---
components/tabstrip/tabs-collection.md | 5 +
knowledge-base/tabstrip-dynamic-tabs.md | 186 ++++++++++++++++++++++--
2 files changed, 182 insertions(+), 9 deletions(-)
diff --git a/components/tabstrip/tabs-collection.md b/components/tabstrip/tabs-collection.md
index 49d4ece1c6..a69aaf9b61 100644
--- a/components/tabstrip/tabs-collection.md
+++ b/components/tabstrip/tabs-collection.md
@@ -70,6 +70,11 @@ To deactivate all tabs, set the ActiveTabId parameter to `string.Empty`.
}
````
+## Add and Remove Tabs
+
+If you are iterating through a collection to render the tabs and you need to allow the users to add and remove tabs, you may use the `ActiveTabId` parameter to set the active tab after adding and removing tabs. See details and example in this article: [Add and Remove Tabs](slug:tabstrip-kb-add-remove-tabs).
+
+
## See Also
* [TabStrip Events](slug:tabstrip-events)
diff --git a/knowledge-base/tabstrip-dynamic-tabs.md b/knowledge-base/tabstrip-dynamic-tabs.md
index b2ae2f693b..d8b8895053 100644
--- a/knowledge-base/tabstrip-dynamic-tabs.md
+++ b/knowledge-base/tabstrip-dynamic-tabs.md
@@ -1,11 +1,11 @@
---
-title: Dynamic Tabs
-description: How to create Dynamic Tabs in TabStip.
+title: Add and Remove TabStrip Tabs
+description: Learn how to dynamically add and remove tabs
type: how-to
-page_title: Dynamic Tabs
-slug: tabstrip-kb-dynamic-tabs
-position:
-tags:
+page_title: How to Add and Remove TabStrip Tabs
+slug: tabstrip-kb-add-remove-tabs
+tags: telerik,blazor,tabstrip,add tabs,remove tabs
+ticketid:
res_type: kb
---
@@ -20,12 +20,180 @@ res_type: kb
-
## Description
-How to create Dynamic Tabs in TabStip? How to add and remove tabs dynamically? How to get information about the currently active tab? How to set the content of the tabs dynamically?
+I have a collection of items representing separate tabs. I am iterating through that collection to render a tab for each item as shown in the [Tabs Collection article](slug:tabstrip-tabs-collection). I want to allow the user to add and remove tabs. How to achieve that?
+
+This KB article also answers the following questions:
+* How to implement add and remove tab functionality with the Telerik TabStrip component.
+* How to remove a tab using an "X" button in the tab header.
+* How to add a new tab with a "+" button, similar to browser tab controls.
+* How to position the add ("+") button next to the last tab header.
## Solution
-An example is available in the following project: [https://github.com/telerik/blazor-ui/tree/master/tabstrip/DynamicTabs](https://github.com/telerik/blazor-ui/tree/master/tabstrip/DynamicTabs).
\ No newline at end of file
+1. [Render the TabStrip tabs in a loop](slug:tabstrip-tabs-collection).
+1. Use a [`HeaderTemplate`](slug:tabstrip-header-template) for the tabs to add Remove buttons. You can display the buttons conditionally based on the tab count.
+1. Declare a button for adding new tabs.
+1. Use custom styling and JavaScript to position the Add button next to the last tab header.
+
+>caption Adding and removing TabStrip tabs at runtime
+
+````RAZOR
+@inject IJSRuntime JS
+
+
+
+
+
+ @foreach (Tab tab in Tabs)
+ {
+
+
+
+ @tab.Title
+ @if (Tabs.Count > 1)
+ {
+
+ }
+
+
+
+ Content for @tab.Title
+
+
+ }
+
+
+
+
+
+@* Move JavaScript code to a JS file *@
+
+
+
+@code {
+ private List Tabs = new List()
+ {
+ new Tab { Title = "Tab 1" },
+ new Tab { Title = "Tab 2" },
+ new Tab { Title = "Tab 3" }
+ };
+
+ private string ActiveTabId { get; set; } = string.Empty;
+
+ private bool ShouldPositionAddButton { get; set; }
+
+ private int LastTabNumber { get; set; } = 3;
+
+ private void AddTab()
+ {
+ Tab tabToAdd = new Tab { Id = Guid.NewGuid().ToString(), Title = $"New Tab {++LastTabNumber}" };
+
+ Tabs.Add(tabToAdd);
+
+ //In this example, we are always activating the newly added tab. Adjust the logic to activate a different tab if needed.
+ ActiveTabId = tabToAdd.Id;
+
+ ShouldPositionAddButton = true;
+ }
+
+ private void RemoveTab(Tab tab)
+ {
+ if (Tabs.Count <= 1)
+ {
+ return;
+ }
+
+ // Activate the tab after or before the removed one if it's active
+ if (ActiveTabId == tab.Id)
+ {
+ int removedTabIndex = Tabs.FindIndex(x => x.Id == tab.Id);
+ if (removedTabIndex == Tabs.Count - 1)
+ {
+ ActiveTabId = Tabs.ElementAt(removedTabIndex - 1).Id;
+ }
+ else
+ {
+ ActiveTabId = Tabs.ElementAt(removedTabIndex + 1).Id;
+ }
+ }
+
+ Tabs.Remove(tab);
+
+ ShouldPositionAddButton = true;
+ }
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ if (firstRender || ShouldPositionAddButton)
+ {
+ ShouldPositionAddButton = false;
+ await JS.InvokeVoidAsync("positionAddTabButton");
+ }
+
+ await base.OnAfterRenderAsync(firstRender);
+ }
+
+ public class Tab
+ {
+ public string Id { get; set; } = Guid.NewGuid().ToString();
+
+ public string Title { get; set; } = string.Empty;
+ }
+
+}
+````
+
+## See Also
+
+* [Dynamic Tab Collection](slug:tabstrip-tabs-collection)
+* [TabStrip Tab `HeaderTemplate`](slug:tabstrip-header-template)
From a713c27baef6430025315769cb25d28df83f3a48 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Fri, 13 Jun 2025 13:12:24 +0300
Subject: [PATCH 30/97] docs(Form): Minor FluentValidation improvements
---
components/form/validation.md | 2 +-
.../form-fluent-validation-cannot-validate-instances-of-type.md | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/components/form/validation.md b/components/form/validation.md
index 5061a05afc..f092d624ff 100644
--- a/components/form/validation.md
+++ b/components/form/validation.md
@@ -231,7 +231,7 @@ You can use third-party validation libraries that integrate with the standard `E
The example below:
* Requires the [`Blazored.FluentValidation` NuGet package](https://www.nuget.org/packages/Blazored.FluentValidation). Also refer to the [FluentValidation documentation](https://docs.fluentvalidation.net/en/latest/blazor.html).
-* Shows how to pass `ValueExpression` from the parent component to custom child components in a [Form item template](slug:form-formitems-template) or a [Grid editor template](slug:grid-templates-editor). If the `ValueExpression` is not passed correctly, the app will throw [exception similar to: `Cannot validate instances of type 'ComponentName'. This validator can only validate instances of type 'ModelClassName'`](slug:form-kb-fluent-validation-cannot-validate-instances-of-type).
+* Shows how to pass `ValueExpression` from a parent component to optional custom child components in a [Form item template](slug:form-formitems-template) or a [Grid editor template](slug:grid-templates-editor). If the `ValueExpression` is not passed correctly, the app will throw [exception similar to: `Cannot validate instances of type 'ComponentName'. This validator can only validate instances of type 'ModelClassName'`](slug:form-kb-fluent-validation-cannot-validate-instances-of-type).
>caption Using FluentValidation
diff --git a/knowledge-base/form-fluent-validation-cannot-validate-instances-of-type.md b/knowledge-base/form-fluent-validation-cannot-validate-instances-of-type.md
index 930ca7ead5..2e16beb57e 100644
--- a/knowledge-base/form-fluent-validation-cannot-validate-instances-of-type.md
+++ b/knowledge-base/form-fluent-validation-cannot-validate-instances-of-type.md
@@ -44,7 +44,7 @@ The issue is not related to or caused by Telerik UI for Blazor. The same behavio
## Solution
-1. Define a public parameter of type `Expression>`, which receives the correct expression from the parent component. `T` is the value type, which the custom child component is editing. The parameter name must be consistent with the other two related parameter names that deal the two-way value binding:
+1. Define a public parameter of type `Expression>` in the child component. The purpose of this parameter is to receive the correct expression from the parent component. `T` is the value type, which the custom child component is editing. The parameter name must be consistent with the other two related parameter names that deal the two-way value binding:
* `Foo`
* `FooChanged`
* `FooExpression`
From 4a84b3606d793e4e3b1cd101b03bb17ede2bbcab Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Fri, 13 Jun 2025 13:48:45 +0300
Subject: [PATCH 31/97] docs(Grid, TreeList): Improve TableWidth documentation
in the State articles (#3020)
---
_contentTemplates/grid/state.md | 30 ++++++++++++++++++++++++++----
components/grid/state.md | 2 +-
components/treelist/state.md | 2 +-
3 files changed, 28 insertions(+), 6 deletions(-)
diff --git a/_contentTemplates/grid/state.md b/_contentTemplates/grid/state.md
index 5c64aefa3c..9eaaadb693 100644
--- a/_contentTemplates/grid/state.md
+++ b/_contentTemplates/grid/state.md
@@ -716,14 +716,17 @@
+ Reorderable="true"
+ Resizable="true">
Reorder Price and Quantity
- Make Id Column Last
+ Resize Columns
- Reset Column Order
+ Reset Column Configuration
@@ -784,13 +787,32 @@
}
}
- private async Task ResetColumnOrder()
+ private async Task ResizeColumns()
+ {
+ if (GridRef != null)
+ {
+ var gridState = GridRef.GetState();
+ int newColumnWidth = 160;
+
+ foreach (GridColumnState columnState in gridState.ColumnStates)
+ {
+ columnState.Width = $"{newColumnWidth}px";
+ }
+
+ gridState.TableWidth = $"{newColumnWidth * gridState.ColumnStates.Count}px";
+
+ await GridRef.SetStateAsync(gridState);
+ }
+ }
+
+ private async Task ResetColumns()
{
if (GridRef != null)
{
var gridState = GridRef.GetState();
gridState.ColumnStates = new List();
+ gridState.TableWidth = null;
await GridRef.SetStateAsync(gridState);
}
diff --git a/components/grid/state.md b/components/grid/state.md
index 049bc989f1..fb6c7f7b6d 100644
--- a/components/grid/state.md
+++ b/components/grid/state.md
@@ -43,7 +43,7 @@ The Grid state is a generic [class `GridState`](slug:Telerik.Blazor.Compo
| `SelectedItems` | `ICollection` | The currently [selected data item(s)](slug:grid-selection-overview). |
| `Skip` | `int?` | The number of scrolled data items when using [virtual row scrolling](slug:components/grid/virtual-scrolling). In other words, this is the number of rows above the currently visible ones. |
| `SortDescriptors` | `ICollection` | The currently applied [sorts](slug:components/grid/features/sorting). |
-| `TableWidth` | `string` | The sum of all visible column widths. This property changes together with `ColumnStates`. The `OnStateChanged` event does not fire separately for it. |
+| `TableWidth` | `string` | The sum of all visible column widths. The initial value is always `null` regardless of the column configuration. The `TableWidth` value changes during column resizing together with `ColumnStates` and the`OnStateChanged` event does not fire separately for it. When you resize a column programmatically, and all other columns already have widths, you must update the `TableWidth` too, otherwise the other columns will resize unexpectedly. |
\* `TItem` is the Grid model type.
diff --git a/components/treelist/state.md b/components/treelist/state.md
index 4c16a7bb6e..30b0aa8272 100644
--- a/components/treelist/state.md
+++ b/components/treelist/state.md
@@ -42,7 +42,7 @@ The TreeList state is a generic [class `TreeListState`](slug:Telerik.Blaz
| `SelectedItems` | `ICollection` | The currently [selected data item(s)](slug:treelist-selection-overview). |
| `Skip` | `int?` | The number of scrolled data items when using [virtual row scrolling](slug:treelist-virtual-scrolling). In other words, this is the number of rows above the currently visible ones. |
| `SortDescriptors` | `ICollection` | The currently applied [sorts](slug:treelist-sorting). |
-| `TableWidth` | `string` | The sum of all visible column widths. This property changes together with `ColumnStates`. The `OnStateChanged` event does not fire separately for it. |
+| `TableWidth` | `string` | The sum of all visible column widths. The initial value is always `null` regardless of the column configuration. The `TableWidth` value changes during column resizing together with `ColumnStates` and the`OnStateChanged` event does not fire separately for it. When you resize a column programmatically, and all other columns already have widths, you must update the `TableWidth` too, otherwise the other columns will resize unexpectedly. |
\* `TItem` is the TreeList model type.
From 6a466b8adaef538b76938f16a5cf0c25062d901d Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Fri, 13 Jun 2025 15:27:48 +0300
Subject: [PATCH 32/97] docs(ToggleButton): Do not set Selected in OnClick
(#3022)
---
components/togglebutton/events.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/components/togglebutton/events.md b/components/togglebutton/events.md
index 340425b286..da7215faa6 100644
--- a/components/togglebutton/events.md
+++ b/components/togglebutton/events.md
@@ -23,7 +23,7 @@ The `OnClick` event fires when the user clicks or taps the button, or presses `E
The event handler receives argument of type [MouseEventArgs](https://docs.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.web.mouseeventargs).
-The `OnClick` event fires before `SelectedChanged`.
+The `OnClick` event fires before `SelectedChanged`. Do not change the `Selected` parameter value in the `OnClick` event if the `OnClick` handler is asynchronous. Control the `Selected` parameter value in the [`SelectedChanged` event](#selectedchanged).
>caption Handle the Toggle Button OnClick event
From f6a926f31a99ac99fff0309b80e90aa8e6f91217 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Fri, 13 Jun 2025 15:44:08 +0300
Subject: [PATCH 33/97] Use approved third-party action with a specific commit
---
.github/workflows/pull_request.yml | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/.github/workflows/pull_request.yml b/.github/workflows/pull_request.yml
index ced11ef259..f94ca53131 100644
--- a/.github/workflows/pull_request.yml
+++ b/.github/workflows/pull_request.yml
@@ -12,7 +12,7 @@ jobs:
steps:
- name: Create branch comment
if: ${{ github.base_ref == 'master' && contains(join(github.event.pull_request.labels.*.name, ''), 'merge-to-production') }}
- uses: peter-evans/create-or-update-comment@v1
+ uses: peter-evans/create-or-update-comment@71345be0265236311c031f5c7866368bd1eff043
with:
issue-number: ${{github.event.number}}
body: |
From 921141f25c894e19623fc8872c47b8835fb3ba36 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Fri, 13 Jun 2025 17:29:58 +0300
Subject: [PATCH 34/97] docs(DockManager): Add missing UnpinnedSize and
UnpinnedSizeChanged (#3026)
* docs(DockManager): Add missing UnpinnedSize and UnpinnedSizeChanged
* Update events.md
* polishing
---
components/dockmanager/events.md | 23 ++++++++++++++++++++---
components/dockmanager/overview.md | 1 +
2 files changed, 21 insertions(+), 3 deletions(-)
diff --git a/components/dockmanager/events.md b/components/dockmanager/events.md
index aba596d3ac..1ce9a6502f 100644
--- a/components/dockmanager/events.md
+++ b/components/dockmanager/events.md
@@ -16,6 +16,7 @@ This article explains the events available in the Telerik DockManager for Blazor
* [OnUndock](#ondock)
* [VisibleChanged](#visiblechanged)
* [SizeChanged](#sizechanged)
+* [UnpinnedSizeChanged](#unpinnedsizechanged)
* [OnPaneResize](#onpaneresize)
* [State Events](#state-events)
* [OnPin](#onpin)
@@ -53,9 +54,13 @@ The `VisibleChanged` event is fired when the user tries to hide a given pane. Yo
The `SizeChanged` event is triggered when the `Size` parameter of the corresponding pane is changed.
+## UnpinnedSizeChanged
+
+The `UnpinnedSizeChanged` event is triggered when the `UnpinnedSize` parameter of the corresponding pane is changed.
+
## OnPaneResize
-The `OnPaneResize` event is fired when any pane is resized. It lets you respond to that change if needed - for example, call the `.Refresh()` method of a chart or otherwise repaint a child component in the content. You can also use it to, for example, update the saved [state](slug:dockmanager-state) for your users.
+The `OnPaneResize` event is fired when a pane is resized, except unpinned panes. It lets you respond to that change if needed - for example, call the `.Refresh()` method of a chart or otherwise repaint a child component in the content. You can also use it to, for example, update the saved [state](slug:dockmanager-state) for your users.
The event handler receives as an argument an `DockManagerPaneResizeEventArgs` object that contains:
@@ -119,9 +124,13 @@ The event handler receives as an argument an `DockManagerUnpinEventArgs` object
Pane 1. Undocking is allowed. Docking over it is cancelled.
+ UnpinnedSizeChanged is handled.
+ Current UnpinnedSize: @Pane1UnpinnedSize
@@ -195,8 +204,9 @@ The event handler receives as an argument an `DockManagerUnpinEventArgs` object
@code {
- private TelerikDockManager DockManagerRef { get; set; }
+ private TelerikDockManager? DockManagerRef { get; set; }
+ private string Pane1UnpinnedSize { get; set; } = "360px";
private bool Pane4Visible { get; set; } = true;
private bool FloatingPaneVisible { get; set; } = true;
@@ -246,6 +256,13 @@ The event handler receives as an argument an `DockManagerUnpinEventArgs` object
DockManagetEventLog.Insert(0, $"Pane {args.PaneId} was resized to {args.Size}.");
}
+ private void Pane1UnpinnedSizeChanged(string newUnpinnedSize)
+ {
+ Pane1UnpinnedSize = newUnpinnedSize;
+
+ DockManagetEventLog.Insert(0, $"Pane Pane 1 was resized to {newUnpinnedSize} while unpinned.");
+ }
+
private void OnPaneUnpin(DockManagerUnpinEventArgs args)
{
if (args.PaneId == "Pane4")
@@ -282,4 +299,4 @@ The event handler receives as an argument an `DockManagerUnpinEventArgs` object
## See Also
-* [DockManager Overview](slug:dockmanager-overview)
\ No newline at end of file
+* [DockManager Overview](slug:dockmanager-overview)
diff --git a/components/dockmanager/overview.md b/components/dockmanager/overview.md
index 64eb0507e6..bfa6c429c2 100644
--- a/components/dockmanager/overview.md
+++ b/components/dockmanager/overview.md
@@ -130,6 +130,7 @@ The following table lists the Dock Manager parameters. Also check the [DockManag
| `Size` | `string` | Determines the size of the splitter pane. |
| `Unpinnable` | `bool` (`false`) | Determines whether the pane can be unpinned. |
| `Unpinned` | `bool` (`true`) | Determines whether the pane is unpinned. |
+| `UnpinnedSize` | `string` | Determines the size of the splitter pane when it is unpinned. |
| `Visible` | `bool` (`true`) | Determines whether the tab/pane is rendered. |
### DockManagerSplitPane Parameters
From 1876a2a5da390a8a9d15e4f4025287ed037ebf3d Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Fri, 13 Jun 2025 17:30:16 +0300
Subject: [PATCH 35/97] docs: Update PR-to-production action (#3025)
* docs: Update PR-to-production action
* add empty lines
* Update .github/workflows/pull_request_closed.yml
---
.github/workflows/pull_request_closed.yml | 20 +++++++++-----------
1 file changed, 9 insertions(+), 11 deletions(-)
diff --git a/.github/workflows/pull_request_closed.yml b/.github/workflows/pull_request_closed.yml
index 7bdf9b9208..0960834d23 100644
--- a/.github/workflows/pull_request_closed.yml
+++ b/.github/workflows/pull_request_closed.yml
@@ -1,15 +1,17 @@
name: Pull Request Closed
+
on:
pull_request:
branches: [master]
types: [closed]
+
jobs:
cherry_pick:
if: ${{github.event.pull_request.merged == true}}
runs-on: ubuntu-22.04
steps:
- name: Should create PR to production?
- uses: peter-evans/find-comment@v1
+ uses: peter-evans/find-comment@3eae4d37986fb5a8592848f6a574fdf654e61f9e
id: fc
with:
issue-number: ${{github.event.number}}
@@ -39,7 +41,7 @@ jobs:
echo "##[set-output name=branch;]$(echo ${BRANCH_NAME})"
- name: Failed cherry-pick
if: ${{ failure() }}
- uses: peter-evans/create-or-update-comment@v1
+ uses: peter-evans/create-or-update-comment@71345be0265236311c031f5c7866368bd1eff043
with:
issue-number: ${{github.event.number}}
body: |
@@ -47,18 +49,14 @@ jobs:
- name: pull-request
id: pr
if: steps.fc.outputs.comment-id != ''
- uses: repo-sync/pull-request@v2
+ uses: actions/checkout@v3
with:
- destination_branch: "production"
- source_branch: ${{ steps.cp.outputs.branch }}
- github_token: ${{ secrets.GITHUB_TOKEN }}
- pr_title: "Merge ${{ steps.cp.outputs.branch }} into production"
- pr_body: |
- *This is automatically generated PR*
- PR from master branch: #${{github.event.number}}. Once the change is merged, upload the changes to LIVE.
+ token: '${{ secrets.GITHUB_TOKEN }}'
+ run: |
+ gh pr create --base production --head ${{ steps.cp.outputs.branch }} --title "Merge ${{ steps.cp.outputs.branch }} into production" --body "Automatically generated PR from master branch: #${{github.event.number}}. Once the change is merged, upload the changes to LIVE."
- name: Post PR link
if: steps.pr.outputs.pr_url != ''
- uses: peter-evans/create-or-update-comment@v1
+ uses: peter-evans/create-or-update-comment@71345be0265236311c031f5c7866368bd1eff043
with:
issue-number: ${{github.event.number}}
body: |
From cb0ba416dd3e1816d2fc019aee5ca539048aee6c Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Fri, 13 Jun 2025 17:33:37 +0300
Subject: [PATCH 36/97] docs(Grid,TreeList): Add information about deleting
items in edit mode (#3024)
* docs(Grid): Add information about deleting items in edit mode
* docs(TreeList): Add information about deleting items in edit mode
---
components/grid/editing/incell.md | 2 ++
components/grid/editing/inline.md | 2 ++
components/grid/editing/overview.md | 9 +++++++--
components/treelist/editing/incell.md | 2 ++
components/treelist/editing/inline.md | 2 ++
components/treelist/editing/overview.md | 9 +++++++--
6 files changed, 22 insertions(+), 4 deletions(-)
diff --git a/components/grid/editing/incell.md b/components/grid/editing/incell.md
index 570f0a1c36..07a8552ba4 100644
--- a/components/grid/editing/incell.md
+++ b/components/grid/editing/incell.md
@@ -72,6 +72,8 @@ This section explains what happens when the user tries to perform another data o
* If the validation is satisfied, then editing completes and the component fires `OnUpdate`.
* If the validation is not satisfied, then editing aborts and the component fires `OnCancel`.
+Deleting items that are currently in edit mode [fires `OnDelete` with a cloned data item instance](slug:grid-editing-overview#delete-operations).
+
### Selection
To enable [row selection](slug:grid-selection-row) with in-cell edit mode, use a [checkbox column](slug:components/grid/columns/checkbox). More information on that can be read in the [Row Selection](slug:grid-selection-row#selection-and-editing-modes) article.
diff --git a/components/grid/editing/inline.md b/components/grid/editing/inline.md
index 047e99ba57..96490aee54 100644
--- a/components/grid/editing/inline.md
+++ b/components/grid/editing/inline.md
@@ -54,6 +54,8 @@ This section explains what happens when the component is already in add or edit
If the component is already in add or edit mode, and the user tries to perform another data operation, then editing aborts and the component fires `OnCancel`.
+Deleting items that are currently in edit mode [fires `OnDelete` with a cloned data item instance](slug:grid-editing-overview#delete-operations).
+
## Examples
### Basic
diff --git a/components/grid/editing/overview.md b/components/grid/editing/overview.md
index ead20360ca..87a3cf9ffd 100644
--- a/components/grid/editing/overview.md
+++ b/components/grid/editing/overview.md
@@ -35,6 +35,7 @@ The Grid CRUD operations rely on the following algorithm:
Adding or editing rows in the Grid sets the following requirements on the Grid model:
* The Grid model class must have a parameterless constructor. Otherwise, use the [Grid `OnModelInit` event](slug:grid-events#onmodelinit) to provide a data item instance [when the Grid needs to create one](#item-instances). Optinally, you can also [set some default values](slug://grid-kb-default-value-for-new-row).
+* There must be a non-editable property that serves as a unique identifier.
* All editable properties must be `public` and have setters. These properties must not be `readonly`.
* All complex properties used in the Grid must be instantiated in the [Grid `OnModelInit` event](slug:grid-events#onmodelinit).
* Self-referencing or inherited properties must not cause `StackOverflowException` or `AmbiguousMatchException` during [programmatic model instance creation](#item-instances).
@@ -79,6 +80,8 @@ Delete operations provide the same user experience in all Grid edit modes and re
Delete operations can work even if the Grid `EditMode` parameter value is `None`.
+If the Grid contains Delete command buttons that display and operate in edit mode, these buttons will fire the [`OnDelete` event](#events) with a [cloned data item instance](#item-instances) in the [event argument](#gridcommandeventargs). To find the original data item in the Grid data source, use the item ID or [override the `Equals()` method of the Grid model class](slug://grid-kb-editing-in-hierarchy).
+
>tip See the delete operations in action in the complete examples for Grid [inline](slug:grid-editing-inline#examples), [in-cell](slug:grid-editing-incell#examples), and [popup](slug:grid-editing-popup#examples) editing. Also check how to [customize the Delete Confirmation Dialog](slug:grid-kb-customize-delete-confirmation-dialog).
## Commands
@@ -97,7 +100,9 @@ Users execute commands in the following ways:
* By clicking on editable cells in [in-cell edit mode](slug:grid-editing-incell) and then anywhere else on the page.
* By using the [Grid keyboard navigation](https://demos.telerik.com/blazor-ui/grid/keyboard-navigation).
-Command buttons can only reside in a [Grid Command Column](slug:components/grid/columns/command) or the [Grid ToolBar](slug:components/grid/features/toolbar). You can also [trigger add and edit operations programmatically](slug:grid-kb-add-edit-state) from anywhere on the web page through the [Grid State](slug:grid-state).
+Command buttons can only reside in a [Grid Command Column](slug:components/grid/columns/command) or the [Grid ToolBar](slug:components/grid/features/toolbar). Each command button in the command column is visible only in display mode or only in edit mode, depending on the button's `ShowInEdit` boolean parameter value.
+
+You can also [trigger add and edit operations programmatically](slug:grid-kb-add-edit-state) from anywhere on the web page through the [Grid State](slug:grid-state).
## Events
@@ -110,7 +115,7 @@ The following table describes the Grid events, which are related to adding, dele
| `OnAdd` | No | Fires on `Add` [command button](slug://components/grid/columns/command) click, before the Grid enters add mode. This event preceeds `OnCreate` or `OnCancel`. | [New](#item-instances) | Grid remains in read mode. |
| `OnCancel` | No | Fires on `Cancel` command invocation. | [New or cloned](#item-instances) | Grid remains in add or edit mode. |
| `OnCreate` | To add new items. | Fires on `Save` command invocation for new items. This event succeeds `OnAdd`. | [New](#item-instances) | Grid remains in add mode. |
-| `OnDelete` | To [delete items](#delete-operations). | Fires on `Delete` command button click. | Original | Grid won't rebind. Deletion depends on the app itself. |
+| `OnDelete` | To [delete items](#delete-operations). | Fires on `Delete` command button click. | [Original or cloned](#item-instances) | Grid won't rebind. Deletion depends on the app itself. |
| `OnEdit` | No | Fires on `Edit` command invocation, before the Grid actually enters edit mode. This event preceeds `OnUpdate` or `OnCancel`. | Original | Grid remains in read mode. |
| `OnModelInit` | [Depends on the Grid model type](slug:grid-events#onmodelinit) | Fires when the Grid requires a [new model instance](#item-instances), which is immediately before `OnAdd` or immediately after `OnEdit`. Use this event when the Grid model type is an [interface, abstract class, or has no parameterless constructor](slug:grid-events#onmodelinit). | No event arguments | Not cancellable |
| `OnUpdate` | To edit existing items. | Fires on `Save` command invocation for existing items. This event succeeds `OnEdit`. | [Cloned](#item-instances) | Grid remains in edit mode. |
diff --git a/components/treelist/editing/incell.md b/components/treelist/editing/incell.md
index 105f325630..532e33ccde 100644
--- a/components/treelist/editing/incell.md
+++ b/components/treelist/editing/incell.md
@@ -72,6 +72,8 @@ This section explains what happens when the user tries to perform another data o
* If the validation is satisfied, then editing completes and the component fires `OnUpdate`.
* If the validation is not satisfied, then editing aborts and the component fires `OnCancel`.
+Deleting items that are currently in edit mode [fires `OnDelete` with a cloned data item instance](slug:treelist-editing-overview#delete-operations).
+
### Selection
To enable [row selection](slug:treelist-selection-row) with in-cell edit mode, use a [checkbox column](slug:treelist-columns-checkbox). More information on that can be read in the [Row Selection](slug:treelist-selection-row#selection-and-editing-modes) article.
diff --git a/components/treelist/editing/inline.md b/components/treelist/editing/inline.md
index c3179862a5..049e007cc5 100644
--- a/components/treelist/editing/inline.md
+++ b/components/treelist/editing/inline.md
@@ -54,6 +54,8 @@ This section explains what happens when the component is already in add or edit
If the component is already in add or edit mode, and the user tries to perform another data operation, then editing aborts and the component fires `OnCancel`.
+Deleting items that are currently in edit mode [fires `OnDelete` with a cloned data item instance](slug:treelist-editing-overview#delete-operations).
+
## Example
The example below shows how to:
diff --git a/components/treelist/editing/overview.md b/components/treelist/editing/overview.md
index 30d3d38ca7..def09dfe60 100644
--- a/components/treelist/editing/overview.md
+++ b/components/treelist/editing/overview.md
@@ -35,6 +35,7 @@ The TreeList CRUD operations rely on the following algorithm:
Adding or editing rows in the TreeList sets the following requirements on the TreeList model:
* The TreeList model class must have a parameterless constructor. Otherwise, use the [TreeList `OnModelInit` event](slug:treelist-events#onmodelinit) to provide a data item instance [when the TreeList needs to create one](#item-instances). Optinally, you can also [set some default values](slug://grid-kb-default-value-for-new-row).
+* There must be a non-editable property that serves as a unique identifier.
* All editable properties must be `public` and have setters. These properties must not be `readonly`.
* Self-referencing or inherited properties must not cause `StackOverflowException` or `AmbiguousMatchException` during [programmatic model instance creation](#item-instances).
@@ -78,6 +79,8 @@ Delete operations provide the same user experience in all TreeList edit modes an
Delete operations can work even if the TreeList `EditMode` parameter value is `None`.
+If the TreeList contains Delete command buttons that display and operate in edit mode, these buttons will fire the [`OnDelete` event](#events) with a [cloned data item instance](#item-instances) in the [event argument](#treelistcommandeventargs). To find the original data item in the TreeList data source, use the item ID or [override the `Equals()` method of the TreeList model class](slug:grid-kb-save-load-state-localstorage).
+
>tip See the delete operations in action in the complete examples for TreeList [inline](slug:treelist-editing-inline#example), [in-cell](slug:treelist-editing-incell#example) and [popup](slug:treelist-editing-popup#example) editing. Also check how to [customize the Delete Confirmation Dialog](slug:grid-kb-customize-delete-confirmation-dialog).
## Commands
@@ -96,7 +99,9 @@ Users execute commands in the following ways:
* By clicking on editable cells in [in-cell edit mode](slug:treelist-editing-incell) and then anywhere else on the page.
* By using the [TreeList keyboard navigation](https://demos.telerik.com/blazor-ui/treelist/keyboard-navigation).
-Command buttons can only reside in a [TreeList Command Column](slug:treelist-columns-command) or the [TreeList ToolBar](slug:treelist-toolbar). You can also [trigger add and edit operations programmatically](slug:grid-kb-add-edit-state) from anywhere on the web page through the [TreeList State](slug:treelist-state).
+Command buttons can only reside in a [TreeList Command Column](slug:treelist-columns-command) or the [TreeList ToolBar](slug:treelist-toolbar). Each command button in the command column is visible only in display mode or only in edit mode, depending on the button's `ShowInEdit` boolean parameter value
+
+You can also [trigger add and edit operations programmatically](slug:grid-kb-add-edit-state) from anywhere on the web page through the [TreeList State](slug:treelist-state).
## Events
@@ -109,7 +114,7 @@ The following table describes the TreeList events, which are related to adding,
| `OnAdd` | No | Fires on `Add` [command button](slug://treelist-columns-command) click, before the TreeList enters add mode. This event preceeds `OnCreate` or `OnCancel`. | [New](#item-instances) | TreeList remains in read mode. |
| `OnCancel` | No | Fires on `Cancel` command invocation. | [New or cloned](#item-instances) | TreeList remains in add or edit mode. |
| `OnCreate` | To add new items. | Fires on `Save` command invocation for new items. This event succeeds `OnAdd`. | [New](#item-instances) | TreeList remains in add mode. |
-| `OnDelete` | To [delete items](#delete-operations). | Fires on `Delete` command button click. | Original | TreeList won't rebind. Deletion depends on the app itself. |
+| `OnDelete` | To [delete items](#delete-operations). | Fires on `Delete` command button click. | [Original or cloned](#item-instances) | TreeList won't rebind. Deletion depends on the app itself. |
| `OnEdit` | No | Fires on `Edit` command invocation, before the TreeList actually enters edit mode. This event preceeds `OnCreate` or `OnCancel`. | Original | TreeList remains in read mode. |
| `OnModelInit` | [Depends on the TreeList model type](slug:treelist-events#onmodelinit) | Fires when the TreeList requires a [new model instance](#item-instances), which is immediately before `OnAdd` or immediately after `OnEdit`. Use this event when the TreeList model type is an [interface, abstract class, or has no parameterless constructor](slug:treelist-events#onmodelinit). | No event arguments | Not cancellable |
| `OnUpdate` | To edit existing items. | Fires on `Save` command invocation for existing items. This event succeeds `OnEdit`. | [Cloned](#item-instances) | TreeList remains in edit mode. |
From aec7bf42a0623b7a481e1f17126e7b729cd48b28 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Fri, 13 Jun 2025 17:45:20 +0300
Subject: [PATCH 37/97] docs(ButtonGroup): Add more examples to Buttons page
(#3021)
---
components/buttongroup/buttons.md | 111 +++++++++++++++++++++++++-----
1 file changed, 95 insertions(+), 16 deletions(-)
diff --git a/components/buttongroup/buttons.md b/components/buttongroup/buttons.md
index 5e446dd68d..0197395542 100644
--- a/components/buttongroup/buttons.md
+++ b/components/buttongroup/buttons.md
@@ -10,12 +10,45 @@ position: 5
# ButtonGroup Buttons
-The ButtonGroup component supports two types of buttons that have different behavior:
+The ButtonGroup component supports two types of buttons that have different behaviors:
-* [`ButtonGroupToggleButton`](#buttongroup-togglebutton)
* [`ButtonGroupButton`](#buttongroup-button)
+* [`ButtonGroupToggleButton`](#buttongroup-togglebutton)
+
+You can add the desired button instances by declaring the dedicated button tags. Additionally, you can individually configure their [appearance](slug:buttongroup-appearance), [enabled/disabled state](#disabled-state) and [visibility](#visibility) through the parameters of each button tag.
+
+## ButtonGroup Button
+
+The `ButtonGroupButton` does not change its visual state when clicked. It behaves as a regular button and does not support selection.
+
+The `ButtonGroupButton` inherits the parameters and behavior of the [Telerik UI for Blazor Button](slug:components/button/overview) component.
+
+>caption Using Buttons in a group
+
+````RAZOR
+
+ Button 1
+ Button 2
+ Button 3
+
-You can add the desired button instances by declaring the dedicated button tags. Additionally, you can individually configure their [appearance](slug:buttongroup-appearance), [enabled/disabled state](#disabled-state) and [visibility](#visibility) through the parameters each button tag exposes.
+@code {
+ private void OnButton1Click()
+ {
+ // ...
+ }
+
+ private void OnButton2Click()
+ {
+ // ...
+ }
+
+ private void OnButton3Click()
+ {
+ // ...
+ }
+}
+````
## ButtonGroup ToggleButton
@@ -23,11 +56,39 @@ The `ButtonGroupToggleButton` becomes selected when clicked and deselects when a
The `ButtonGroupToggleButton` inherits the parameters and behavior of the [`TelerikToggleButton`](slug:togglebutton-overview) component.
-## ButtonGroup Button
+>caption Using ToogleButtons in a group
-The `ButtonGroupButton` does not change its visual state when clicked. It behaves as a regular button and does not support selection.
+````RAZOR
+
+ Toggle Button 1
+ Toggle Button 2
+ Toggle Button 3
+
-The `ButtonGroupButton` inherits the parameters and behavior of the [Telerik UI for Blazor Button](slug:components/button/overview) component.
+@code {
+ private bool ToggleButton1Selected { get; set; } = true;
+ private bool ToggleButton2Selected { get; set; }
+ private bool ToggleButton3Selected { get; set; }
+
+ private void OnToggleButton1Click()
+ {
+ // ...
+ }
+
+ private void OnToggleButton2Click()
+ {
+ // ...
+ }
+
+ private void OnToggleButton3Click()
+ {
+ // ...
+ }
+}
+````
## Disabled State
@@ -37,13 +98,18 @@ To disable a button, set its `Enabled` attribute to `false`.
````RAZOR
- Enabled
- Disabled
- Enabled
- Disabled
+ Enabled Button
+ Disabled Button
+ Enabled ToggleButton
+ Enabled ToggleButton
+ Disabled ToggleButton
-````
+@code {
+ private bool ToggleButton1Selected { get; set; } = true;
+ private bool ToggleButton2Selected { get; set; }
+}
+````
## Visibility
@@ -53,13 +119,26 @@ You can set the `Visible` parameter of individual buttons to `false` to hide the
````RAZOR
- First
- Hidden
- Third
- Fourth
+ Button
+ Button Hidden
+ ToggleButton
+ ToggleButton Hidden
+
+
+
+
+Show Hidden Buttons
+
+@code {
+ private bool ShowHiddenButtons { get; set; }
+
+ private bool ToggleButton1Selected { get; set; } = true;
+ private bool ToggleButton2Selected { get; set; }
+}
````
## See Also
- * [Live Demo: Button Types](https://demos.telerik.com/blazor-ui/buttongroup/button-types)
\ No newline at end of file
+ * [Live Demo: Button Types](https://demos.telerik.com/blazor-ui/buttongroup/button-types)
From 985eb6974e03e4cbe875925d661093cf13f8302d Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Fri, 13 Jun 2025 17:45:30 +0300
Subject: [PATCH 38/97] docs(QRCode): Improve Size and border Width
documentation (#3023)
---
components/barcodes/qrcode/overview.md | 21 +++++++++------------
1 file changed, 9 insertions(+), 12 deletions(-)
diff --git a/components/barcodes/qrcode/overview.md b/components/barcodes/qrcode/overview.md
index 69e97a3d06..1ce01892c7 100644
--- a/components/barcodes/qrcode/overview.md
+++ b/components/barcodes/qrcode/overview.md
@@ -16,19 +16,16 @@ The generated image from the component is a machine-readable label that contains
## Creating Blazor QRCode
-1. Add the `TelerikQRCode` tag to add the component to your razor page.
+1. Use the `TelerikQRCode` tag to add the component to your razor page.
+1. Set the `Value` parameter, according to the [encoding recommendations](slug:qrcode-encoding).
+1. Set the `Size` parameter, depending on the expected scanning distance and the required data capacity.
+1. (optional) Define a [QRCode overlay type](slug:qrcode-qr-code-types)).
-1. Set the `Value` property.
-
-1. Set its `Size` property.
-
-1. Optionally, choose a `QRCode Type` (one of the [types we support](slug:qrcode-qr-code-types)).
-
->caption A basic configuration of the Telerik QRCode
+>caption Basic Telerik QRCode
````RAZOR
-
+
````
@@ -58,7 +55,7 @@ The Blazor Barcode provides various parameters that allow you to configure the c
| `QRCodeEncoding` | `enum` | The encoding mode used to encode the value. |
| `QRCodeErrorCorrection` | `enum` | The error correction level used to encode the value. |
| `Value` | `string` | Defines the initial value of the QRCode. |
-| `Size` | `string` | Specifies the size (`Width` and `Height`) of a QR code in pixels (i.e. "200px") as the QRCode is a square. You can read more details for the dimension properties in the [Dimensions article](slug:common-features/dimensions). Setting both `Size` and `Width` and/or `Height` will throw an error. Setting different values to `Width` and `Height` will also cause an issue. |
+| `Size` | `string` | Specifies the size (`Width` and `Height`) of a QR code in pixels (i.e. "200px") as the QRCode is a square. You can read more details for the dimension properties in the [Dimensions article](slug:common-features/dimensions). Setting both `Size` and `Width` and/or `Height` will throw an error. Setting different values to `Width` and `Height` will also cause an issue. To set an optimal `Size`, consider the expected scanning distance and data capacity. |
| `Width` | `string` | Sets the width of the QRCode. If `Height` is set and the `Size` property is not set, the same value as `Width` should be set to `Height`. |
| `Height` | `string` | Sets the height of the QRCode. If `Height` is set and the `Size` property is not set, the same value as `Height` should be set to `Width`. |
| `Class` | `string` | The CSS class that will be rendered on the main wrapping element of the QRCode component. |
@@ -84,7 +81,7 @@ The nested `QRCodeBorder` tag exposes parameters that enable you to customize th
| Parameter | Type | Description |
| ----------- | ----------- | ----------- |
| `Color` | `string` | The color of the border. Accepts a valid CSS color string, including HEX and RGB. |
-| `Width` | `double` | The width of the border in pixels. By default the border width is set to zero which means that the border will not be visible. |
+| `Width` | `double` | The width of the border in pixels. The default value is `0` and the border is not visible. The QR Code border is part of the component `Size`. Thus, a wider border may require a larger `Size`. |
## Next Steps
From 9134df6589072c50f9b0bd9f1eea34d15451b5e2 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Mon, 16 Jun 2025 10:29:18 +0300
Subject: [PATCH 39/97] Attempt to fix pull_request_closed action
---
.github/workflows/pull_request_closed.yml | 10 +++++-----
1 file changed, 5 insertions(+), 5 deletions(-)
diff --git a/.github/workflows/pull_request_closed.yml b/.github/workflows/pull_request_closed.yml
index 0960834d23..f0c61e3133 100644
--- a/.github/workflows/pull_request_closed.yml
+++ b/.github/workflows/pull_request_closed.yml
@@ -49,18 +49,18 @@ jobs:
- name: pull-request
id: pr
if: steps.fc.outputs.comment-id != ''
- uses: actions/checkout@v3
- with:
- token: '${{ secrets.GITHUB_TOKEN }}'
+ env:
+ GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
run: |
- gh pr create --base production --head ${{ steps.cp.outputs.branch }} --title "Merge ${{ steps.cp.outputs.branch }} into production" --body "Automatically generated PR from master branch: #${{github.event.number}}. Once the change is merged, upload the changes to LIVE."
+ GHPR_OUTPUT=$(gh pr create --base production --head ${{ steps.cp.outputs.branch }} --title "Merge ${{ steps.cp.outputs.branch }} into production" --body "Automatically generated PR from master branch: #${{github.event.number}}. Once the change is merged, upload the changes to LIVE.")
+ echo "##[set-output name=ghproutput;]$(echo $GHPR_OUTPUT)"
- name: Post PR link
if: steps.pr.outputs.pr_url != ''
uses: peter-evans/create-or-update-comment@71345be0265236311c031f5c7866368bd1eff043
with:
issue-number: ${{github.event.number}}
body: |
- Here you are the link to your PR to production: [${{steps.pr.outputs.pr_number}}](${{steps.pr.outputs.pr_url}})
+ Here you are the link to your PR to production: ${{ steps.pr.outputs.ghproutput }}
delete_branch:
needs: [cherry_pick]
From ccc7f48a73df8ad35ef934b02ac8cbf5e833dd78 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Mon, 16 Jun 2025 10:31:51 +0300
Subject: [PATCH 40/97] kb(ButtonGroup): Add See Also (#3028)
---
knowledge-base/buttongroup-vertical.md | 16 ++++++++++------
1 file changed, 10 insertions(+), 6 deletions(-)
diff --git a/knowledge-base/buttongroup-vertical.md b/knowledge-base/buttongroup-vertical.md
index abf628b279..d7a8434c66 100644
--- a/knowledge-base/buttongroup-vertical.md
+++ b/knowledge-base/buttongroup-vertical.md
@@ -13,12 +13,12 @@ res_type: kb
## Environment
-
-
-
Product
-
ButtonGroup for Blazor
-
-
+
+
+
Product
+
ButtonGroup for Blazor
+
+
## Description
@@ -89,3 +89,7 @@ after
````
+
+## See Also
+
+* [ButtonGroup Overview](slug:buttongroup-overview)
From 4479e4b5b0fdeb5bf14eb30c9952dfd577ba2a86 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Mon, 16 Jun 2025 10:34:30 +0300
Subject: [PATCH 41/97] Fix action output name
---
.github/workflows/pull_request_closed.yml | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/.github/workflows/pull_request_closed.yml b/.github/workflows/pull_request_closed.yml
index f0c61e3133..db2476df89 100644
--- a/.github/workflows/pull_request_closed.yml
+++ b/.github/workflows/pull_request_closed.yml
@@ -55,7 +55,7 @@ jobs:
GHPR_OUTPUT=$(gh pr create --base production --head ${{ steps.cp.outputs.branch }} --title "Merge ${{ steps.cp.outputs.branch }} into production" --body "Automatically generated PR from master branch: #${{github.event.number}}. Once the change is merged, upload the changes to LIVE.")
echo "##[set-output name=ghproutput;]$(echo $GHPR_OUTPUT)"
- name: Post PR link
- if: steps.pr.outputs.pr_url != ''
+ if: steps.pr.outputs.ghproutput != ''
uses: peter-evans/create-or-update-comment@71345be0265236311c031f5c7866368bd1eff043
with:
issue-number: ${{github.event.number}}
From 989148bf51ae41db03ef0f00fb95ed0a1d401352 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Mon, 16 Jun 2025 10:39:15 +0300
Subject: [PATCH 42/97] kb(Icons): Add See Also (#3030)
---
knowledge-base/icon-new-names.md | 1 +
1 file changed, 1 insertion(+)
diff --git a/knowledge-base/icon-new-names.md b/knowledge-base/icon-new-names.md
index c38c5bd76e..a34f11e887 100644
--- a/knowledge-base/icon-new-names.md
+++ b/knowledge-base/icon-new-names.md
@@ -1005,3 +1005,4 @@ Here is a list of the renamed icons:
## See Also
* [Breaking Changes in Telerik UI for Blazor 4.0](slug:changes-in-4-0-0)
+* [Built-in Telerik SVG and Font Icons](slug:common-features-icons)
From e0ae70467c94f08cb5dabfa172c88ff962c0d2c9 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Mon, 16 Jun 2025 16:36:29 +0300
Subject: [PATCH 43/97] doc(Gauges): Document label Position parameter (#3033)
* doc(Gauges): Document label Position parameter
* Update components/gauges/arc/labels.md
Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com>
---------
Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com>
---
components/gauges/arc/labels.md | 41 +++++++++++++++++++++++++---
components/gauges/circular/labels.md | 41 +++++++++++++++++++++++++---
2 files changed, 74 insertions(+), 8 deletions(-)
diff --git a/components/gauges/arc/labels.md b/components/gauges/arc/labels.md
index 48ece6bda1..0455af3ed6 100644
--- a/components/gauges/arc/labels.md
+++ b/components/gauges/arc/labels.md
@@ -13,13 +13,10 @@ position: 20
You can customize the appearance of the labels rendered on the [scale](slug:arc-gauge-scale) of the Arc Gauge by using the ``, child tag of the ``, and the parameters it exposes:
* [Format](#format)
-
* [Center Template](#center-template)
-
+* [Position](#position)
* [Color](#color)
-
* [Visible](#visible)
-
* [Additional Customization](#additional-customization)
## Format
@@ -87,6 +84,42 @@ The center template allows you to take control of the rendering of the central s
````
+## Position
+
+The `Position` parameter is of enum type `ArcGaugeScaleLabelsPosition` and determines whether the Gauge labels are on the inside (default) or outside of the Gauge graphic. Labels on the inside allow for a visually larger component within the same available space.
+
+>caption Setting Arc Gauge label position
+
+````RAZOR
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+````
+
## Color
The `Color` (`string`) parameter controls the color of the labels. It accepts **CSS**, **HEX** and **RGB** colors.
diff --git a/components/gauges/circular/labels.md b/components/gauges/circular/labels.md
index d5eca523e7..5551dc9714 100644
--- a/components/gauges/circular/labels.md
+++ b/components/gauges/circular/labels.md
@@ -13,13 +13,10 @@ position: 15
You can customize the appearance of the labels rendered on the [scale](slug:circular-gauge-scale) of the Circular Gauge by using the ``, child tag of the ``, and the parameters it exposes:
* [Format](#format)
-
* [Center Template](#center-template)
-
+* [Position](#position)
* [Color](#color)
-
* [Visible](#visible)
-
* [Additional Customization](#additional-customization)
## Format
@@ -91,6 +88,42 @@ The center template allows you to take control of the rendering of the central s
````
+## Position
+
+The `Position` parameter is of enum type `CircularGaugeScaleLabelsPosition` and determines whether the Gauge labels are on the inside (default) or outside of the Gauge graphic. Labels on the inside allow for a visually larger component on the same available space.
+
+>caption Setting Circular Gauge label position
+
+````RAZOR
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+````
+
## Color
The `Color` (`string`) parameter controls the color of the labels. It accepts **CSS**, **HEX** and **RGB** colors.
From 39fbe5cf53b5cefecd9a4e1f0512070f13f36a91 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Mon, 16 Jun 2025 17:23:52 +0300
Subject: [PATCH 44/97] docs(Editor): Improve schema overview (#3036)
* docs(Editor): Improve schema overview
* Update overview.md
---
components/editor/overview.md | 4 ++--
.../editor/prosemirror-schema/overview.md | 17 ++++++++++++-----
2 files changed, 14 insertions(+), 7 deletions(-)
diff --git a/components/editor/overview.md b/components/editor/overview.md
index dab5623375..dfd07c5433 100644
--- a/components/editor/overview.md
+++ b/components/editor/overview.md
@@ -56,7 +56,7 @@ The Blazor HTML Editor has a `Value` parameter, similar to other input component
An empty string is a valid initial Editor `Value`, but after the user interacts with the component, the minimal component `Value` is at least an empty element (usually `""`). Note that [the Editor and the browser treat empty paragraphs differently](slug:editor-kb-missing-br-tags-in-value).
-The Editor manages its content and `Value` depending on a [customizable schema](#prosemirror-schema-and-plugins), which defines the allowed HTML tags and attributes. The component strips all other tags and attributes for compliance and security reasons.
+The Editor manages its content and `Value` depending on a [customizable schema](#prosemirror-schema-and-plugins). The component strips all other tags and attributes for compliance and security reasons.
## Security
@@ -90,7 +90,7 @@ The Telerik UI for [Blazor Editor](https://www.telerik.com/blazor-ui/editor) use
## ProseMirror Schema and Plugins
-The Editor uses a built-in ProseMirror Schema containing some of the most common HTML tags and a set of predefined ProseMirror Plugins for its basic functionalities. You can customize the default ProseMirror [Schema](slug:editor-prosemirror-schema-overview) and [Plugins](slug:editor-prosemirror-plugins) to achieve the desired functionality in the Editor for Blazor.
+The Editor uses a built-in [ProseMirror Schema](https://prosemirror.net/docs/guide/#schema) that includes most of the common HTML tags and a set of predefined [ProseMirror Plugins](https://prosemirror.net/docs/ref/#state.Plugin_System) for its basic functionalities. Find out how to customize the default ProseMirror [Schema](slug:editor-prosemirror-schema-overview) and [Plugins](slug:editor-prosemirror-plugins) to achieve the desired functionality in the Editor for Blazor.
## Editor Parameters
diff --git a/components/editor/prosemirror-schema/overview.md b/components/editor/prosemirror-schema/overview.md
index e1f61d5a7e..4402551f6a 100644
--- a/components/editor/prosemirror-schema/overview.md
+++ b/components/editor/prosemirror-schema/overview.md
@@ -10,17 +10,24 @@ position: 0
# ProseMirror Schema Overview
-The Telerik UI for Blazor Editor component is based on the ProseMirror library. ProseMirror provides a set of tools and concepts for building rich textual editors, using user interface inspired by the What-You-See-Is-What-You-Get (WYSIWYG).
+The Telerik UI for Blazor Editor component is based on the [ProseMirror library](https://prosemirror.net/). ProseMirror provides a set of tools and concepts for building rich textual editors, using user interface inspired by the What-You-See-Is-What-You-Get (WYSIWYG).
## Schema Concept
-ProseMirror defines its own data structure, the `Node`, to represent content documents. The ProseMirror document is a tree-like structure comprised of nodes. A document is an instance of `Node` with children that are also instances of `Node`.
+ProseMirror defines its own data structure, the [`Node`](https://prosemirror.net/docs/ref/#model.Node), to represent content documents. The [ProseMirror document](https://prosemirror.net/docs/guide/#doc) is a tree-like structure comprised of nodes. A document is an instance of `Node` with children that are also instances of `Node`.
-Each ProseMirror `document` conforms to a specific schema. Document schemas allow you to edit documents with a custom structure without writing your own editor from scratch.
+Each ProseMirror `document` conforms to a specific [schema](https://prosemirror.net/docs/guide/#schema). Document schemas allow you to edit documents with a custom structure without writing your own editor from scratch.
-The schema describes all nodes that may occur in the document, the way they are nested, and any marks applied to them. A mark is a piece of information that can be attached to a node. For example, emphasized text, text in code block or a link. It has a type and optionally a set of attributes that provide further information (such as the target of the link).
+The Prosemirror schema describes:
-For more details, refer to the ProseMirror schema guide.
+* All HTML elements and attributes that may occur in the document.
+* What tag nesting is allowed.
+* What is the order or the HTML attributes.
+* What marks can be applied to a HTML node. A mark is a piece of information that can be attached to a node. For example, emphasized text, text in code block or a link. It has a type and optionally a set of attributes that provide further information (such as the target of the link).
+
+As a result, the Editor may automatically modify its initial `Value` on first user interaction.
+
+For more details, refer to the [ProseMirror schema guide](https://prosemirror.net/docs/guide/#schema).
## Editor Schema
From 4df790bd024078dac297c755591dbe985ecb2c50 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Mon, 16 Jun 2025 17:24:04 +0300
Subject: [PATCH 45/97] docs(AI): Improve MCP settings information (#3034)
---
ai/mcp-server.md | 17 +++++++++--------
1 file changed, 9 insertions(+), 8 deletions(-)
diff --git a/ai/mcp-server.md b/ai/mcp-server.md
index 8f1e365ca7..129191d0fe 100644
--- a/ai/mcp-server.md
+++ b/ai/mcp-server.md
@@ -29,7 +29,10 @@ Use the documentation of your AI-powered MCP client to add the Telerik MCP serve
* Type: `stdio` (standard input/output transport)
* Command: `npx`
* Arguments: `-y`
-* Server name: `telerik_blazor_assistant` (depends on your preferences)
+* Server name: `telerikBlazorAssistant` (depends on your preferences)
+
+> * Do not use hyphens (`-`) or underscores (`_`) in the MCP server name in the MCP `.json` file, due to potential compatibility issues with some MCP clients such as Visual Studio or Windsurf.
+> * Some MCP clients expect the MCP servers to be listed under a `servers` JSON key, while others expect `mcpServers`.
You also need to add your [Telerik licence key](slug:installation-license-key) as an `env` parameter in the `mcp.json` file. There are two options:
@@ -40,9 +43,7 @@ You also need to add your [Telerik licence key](slug:installation-license-key) a
For detailed instructions, refer to [Use MCP servers in Visual Studio](https://learn.microsoft.com/en-us/visualstudio/ide/mcp-servers).
-> Visual Studio 17.14 seems to impose the following requirements:
-> * Do not use hyphens (`-`) in the MCP server name in `.mcp.json`. For example, `"telerik_blazor_assistant"` and `"telerikblazorassistant"` work, but `"telerik-blazor-assistant"` does not.
-> * The Copilot Chat window must be open and active when you open a solution.
+> Visual Studio 17.14 seems to require the Copilot Chat window to be open and active when you open a solution. Otherwise the Telerik MCP server is not used.
To enable the Telerik MCP Server in a specific Blazor app, add a `.mcp.json` file to the solution folder.
@@ -51,7 +52,7 @@ To enable the Telerik MCP Server in a specific Blazor app, add a `.mcp.json` fil
````JSON.skip-repl
{
"servers": {
- "telerik_blazor_assistant": {
+ "telerikBlazorAssistant": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@progress/telerik-blazor-mcp"],
@@ -78,7 +79,7 @@ To enable the Telerik MCP Server in a specific workspace or Blazor app, add a `.
````JSON.skip-repl
{
"servers": {
- "telerik_blazor_assistant": {
+ "telerikBlazorAssistant": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@progress/telerik-blazor-mcp"],
@@ -100,7 +101,7 @@ To [add the Telerik MCP Server globally for VS Code, edit the VS Code `settings.
"chat.mcp.discovery.enabled": true,
"mcp": {
"servers": {
- "telerik_blazor_assistant": {
+ "telerikBlazorAssistant": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@progress/telerik-blazor-mcp"],
@@ -124,7 +125,7 @@ To [enable the Telerik MCP Server in a specific workspace](https://code.visualst
````JSON.skip-repl
{
"mcpServers": {
- "telerik_blazor_assistant": {
+ "telerikBlazorAssistant": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@progress/telerik-blazor-mcp"],
From 7e5a60024aad5a83a47f4242d8a0275f0aea0263 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Mon, 16 Jun 2025 17:28:48 +0300
Subject: [PATCH 46/97] docs(Common): Enhance licensing troubleshooting (#3037)
---
installation/license-key.md | 7 ++++++-
1 file changed, 6 insertions(+), 1 deletion(-)
diff --git a/installation/license-key.md b/installation/license-key.md
index aadc791333..2aa392a861 100644
--- a/installation/license-key.md
+++ b/installation/license-key.md
@@ -63,7 +63,12 @@ The new license key includes information about all previous purchases. This proc
## Using Telerik Packages in Referenced Projects
-Telerik UI for Blazor may be used in a referenced project in a multi-project app. For example, in the **Client** project of a WebAssembly app that uses server-side pre-rendering. In such cases, you can briefly see a yellow banner in the browser, which says "We couldn't verify your license key for Telerik UI for Blazor. Please see the build log for details and resolution steps".
+Telerik UI for Blazor may be used in a referenced project in a multi-project app, for example:
+
+* In the **Client** project of a Blazor Web App with **WebAssembly** or **Auto** render mode.
+* In a Razor class library project, which is used by a main web project.
+
+In such cases, you may see a yellow banner in the browser, which says "We couldn't verify your license key for Telerik UI for Blazor. Please see the build log for details and resolution steps".
There are two alternative ways to avoid the warning banner:
From 0405f44cb608cf904bebe8355a577dd0d9d6ad1d Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Tue, 17 Jun 2025 11:53:53 +0300
Subject: [PATCH 47/97] docs(Common): Update obsolete NuGet server information
(#3041)
* docs(Common): Update obsolete NuGet server information
* Update installation/nuget.md
---
installation/nuget.md | 8 +-------
1 file changed, 1 insertion(+), 7 deletions(-)
diff --git a/installation/nuget.md b/installation/nuget.md
index 21b3ab31e8..fa85d0039f 100644
--- a/installation/nuget.md
+++ b/installation/nuget.md
@@ -186,13 +186,7 @@ The firewall must allow some of the requests to be redirected from `nuget.teleri
## Obsolete Telerik NuGet URL
-In addition to feed URL `https://nuget.telerik.com/v3/index.json`, there is also an obsolete NuGet v2 server at `https://nuget.telerik.com/nuget`, which is no longer recommended.
-
-> The NuGet v2 server at `https://nuget.telerik.com/nuget` will be sunset in November 2024.
->
-> The new v3 protocol offers faster package searches and restores, improved security, and more reliable infrastructure.
->
-> To redirect your feed to the NuGet v3 protocol, all you have to do is to change your NuGet package source URL to `https://nuget.telerik.com/v3/index.json`.
+The NuGet v2 server at `https://nuget.telerik.com/nuget` was sunset in November 2024 and is no longer available. The v3 protocol offers faster package searches and restores, improved security, and more reliable infrastructure. To redirect your feed to the NuGet v3 protocol, all you have to do is to change your NuGet package source URL to `https://nuget.telerik.com/v3/index.json`.
## Troubleshooting
From 62e3bdc5a34f3d9643357a91c3fb0940efc67782 Mon Sep 17 00:00:00 2001
From: IvanDanchev
Date: Tue, 17 Jun 2025 05:34:39 -0400
Subject: [PATCH 48/97] kb(Grid): prevent checkbox column click (#3027)
* kb(Grid): prevent checkbox column click
* kb(Grid): add PR review suggestions
---
.../grid-checkbox-column-prevent-click.md | 128 ++++++++++++++++++
1 file changed, 128 insertions(+)
create mode 100644 knowledge-base/grid-checkbox-column-prevent-click.md
diff --git a/knowledge-base/grid-checkbox-column-prevent-click.md b/knowledge-base/grid-checkbox-column-prevent-click.md
new file mode 100644
index 0000000000..a6fcdca7f8
--- /dev/null
+++ b/knowledge-base/grid-checkbox-column-prevent-click.md
@@ -0,0 +1,128 @@
+---
+title: Grid CheckBox column prevent accidental click
+description: How to prevent an accidental click in the CheckBox column of the Grid
+type: how-to
+page_title: Grid CheckBox column prevent accidental click
+slug: grid-kb-checkbox-column-prevent-click
+position:
+tags: grid, checkbox, prevent, click, deselection
+res_type: kb
+---
+
+## Environment
+
+
+
+
+
Product
+
Grid for Blazor
+
+
+
+
+
+## Description
+
+An accidental click outside the checkbox in the Grid's CheckBox column deselects the currently selected rows. How to prevent that from happening and ensure that only a click on the checkbox deselects the respective row?
+
+## Solution
+
+You can prevent the click event of the cells in the CheckBox column of the Grid with JavaScript.
+
+1. Call a JavaScript function in the `OnAfterRenderAsync` method and in the `OnRead` event handler of the Grid.
+2. In the function, attach a `click` event handler to the `td` Html elements in the CheckBox column and prevent the event conditionally
+
+```razor
+@using Telerik.DataSource.Extensions;
+@inject IJSRuntime JS;
+
+
+
+
+
+
+
+
+
+@code {
+ private List GridData { get; set; }
+
+ private IEnumerable SelectedRows { get; set; } = Enumerable.Empty();
+
+ private string LastOnRead { get; set; }
+
+ protected override void OnInitialized()
+ {
+ GenerateData();
+ SelectedRows = new List() { GridData.ElementAt(2) };
+
+ base.OnInitialized();
+ }
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ if (firstRender)
+ {
+ await Task.Delay(1);
+ await JS.InvokeVoidAsync("handleDeselection");
+ }
+ await base.OnAfterRenderAsync(firstRender);
+ }
+
+ private async Task OnGridRead(GridReadEventArgs args)
+ {
+ var result = GridData.ToDataSourceResult(args.Request);
+ args.Data = result.Data;
+ args.Total = result.Total;
+
+ var now = DateTime.Now;
+ LastOnRead = now.ToLongTimeString() + "." + now.Millisecond;
+
+ await Task.Delay(1);
+ await JS.InvokeVoidAsync("handleDeselection");
+ }
+
+ private void GenerateData()
+ {
+ GridData = new List();
+
+ for (int i = 1; i <= 100; i++)
+ {
+ GridData.Add(new SampleModel() { Id = i, Text = $"Item{i}" });
+ }
+ }
+
+ public class SampleModel
+ {
+ public int Id { get; set; }
+ public string Text { get; set; }
+ }
+}
+```
From 82e0fbd99645db1c49c4a273d6fbfdc2b54131df Mon Sep 17 00:00:00 2001
From: Kendo Bot
Date: Tue, 17 Jun 2025 16:58:23 +0300
Subject: [PATCH 49/97] Added new kb article
autocomplete-copy-text-itemtemplate (#3018)
* Added new kb article autocomplete-copy-text-itemtemplate
* chore(Autocomplete): add suggestions
---------
Co-authored-by: KB Bot
Co-authored-by: Hristian Stefanov
---
.../autocomplete-copy-text-itemtemplate.md | 106 ++++++++++++++++++
1 file changed, 106 insertions(+)
create mode 100644 knowledge-base/autocomplete-copy-text-itemtemplate.md
diff --git a/knowledge-base/autocomplete-copy-text-itemtemplate.md b/knowledge-base/autocomplete-copy-text-itemtemplate.md
new file mode 100644
index 0000000000..d19bd3d57c
--- /dev/null
+++ b/knowledge-base/autocomplete-copy-text-itemtemplate.md
@@ -0,0 +1,106 @@
+---
+title: How to Copy Text from an ItemTemplate
+description: Learn how to allow users to copy text from the ItemTemplate in the AutoComplete for Blazor component.
+type: how-to
+page_title: How to Enable Text Copy in AutoComplete Dropdown Blazor
+slug: autocomplete-kb-copy-text-itemtemplate
+tags: blazor, autocomplete, itemtemplate, clipboard, copy, paste
+res_type: kb
+ticketid: 1689288
+---
+
+## Environment
+
+
+
+
+
Product
+
AutoComplete for Blazor
+
DropDownList for Blazor
+
ComboBox for Blazor
+
MultiSelect for Blazor
+
+
+
+
+## Description
+
+I want to allow users to copy the text from the dropdown list in the [AutoComplete component](slug:autocomplete-overview).
+
+## Solution
+
+To enable text copying from the dropdown list in the AutoComplete, use the `ItemTemplate` to display the desired text alongside a button that uses JavaScript and the Clipboard API for copying. Here’s an example implementation:
+
+````RAZOR
+@inject IJSRuntime JS
+
+
+
+
+
+ @{
+ var text = context.ToString();
+ }
+
+ @text
+
+
+
+
+
+@code {
+ private string Role { get; set; }
+ private List AutoCompleteData { get; set; }
+ private List SourceData { get; set; } = new()
+ {
+ "Manager", "Developer", "QA", "Technical Writer", "Support Engineer", "Sales Agent", "Architect", "Designer"
+ };
+
+ protected override void OnInitialized()
+ {
+ AutoCompleteData = SourceData;
+ }
+
+ private void OnCheckBoxChangeHandler()
+ {
+ AutoCompleteData = new List(SourceData);
+ }
+
+ private async Task CopyToClipboard(string text)
+ {
+ try
+ {
+ var isSupported = await JS.InvokeAsync("eval", "!!(navigator.clipboard && navigator.clipboard.writeText)");
+ if (isSupported)
+ {
+ await JS.InvokeVoidAsync("navigator.clipboard.writeText", text);
+ }
+ else
+ {
+ Console.WriteLine("Clipboard API not supported in this browser.");
+ // Optionally show a notification to the user
+ }
+ }
+ catch (Exception ex)
+ {
+ Console.Error.WriteLine($"Clipboard copy failed: {ex.Message}");
+ // Optionally show a fallback UI message to the user
+ }
+ }
+}
+````
+
+## See Also
+
+* [AutoComplete Documentation](slug:autocomplete-overview)
+* [Clipboard API Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API)
+* [Blazor JavaScript Interoperability](https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability)
From 6d696396cf83679aa0fdeeae8343a4717b741584 Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Wed, 18 Jun 2025 14:10:47 +0300
Subject: [PATCH 50/97] docs(kb): add kb for automatically select (#3032)
* docs(kb): add kb for automatically select
* chore: modify solution section
---
.../combobox-auto-select-on-blur.md | 185 ++++++++++++++++++
1 file changed, 185 insertions(+)
create mode 100644 knowledge-base/combobox-auto-select-on-blur.md
diff --git a/knowledge-base/combobox-auto-select-on-blur.md b/knowledge-base/combobox-auto-select-on-blur.md
new file mode 100644
index 0000000000..d8742793b2
--- /dev/null
+++ b/knowledge-base/combobox-auto-select-on-blur.md
@@ -0,0 +1,185 @@
+---
+title: How to Automatically Select Preselected Item on Blur
+description: Learn how to configure the Telerik ComboBox for Blazor to automatically select the first matching item when the input loses focus.
+type: how-to
+page_title: How to Automatically Select Preselected Item on Blur
+slug: combobox-kb-autoselect-on-blur
+tags: telerik, blazor, combobox, blur, auto-select
+res_type: kb
+---
+
+## Environment
+
+
+
+
+
Product
+
ComboBox for Blazor
+
+
+
+
+## Description
+
+The article asnwers to the following question:
+
+* How to configure the ComboBox to automatically select the first matching item when the input loses focus (e.g., when the user tabs away or clicks outside)?
+* How to auto-select a ComboBox item based on user input when focus is lost?
+* Can the ComboBox select a suggested item on blur without pressing Enter?
+* How to set the ComboBox value when the user leaves the input field?
+
+## Solution
+To automatically select the first matching item in the ComboBox when the input loses focus, use a combination of the ComboBox [`OnRead` event](slug:components/combobox/events#onread) and JavaScript interop. The provided example demonstrates how to:
+
+1. Use the `OnRead` event to filter data and store the first matching item.
+2. Attach a JavaScript event handler to detect when the user blurs the ComboBox input.
+3. Invoke a .NET method from JavaScript to set the ComboBox value to the first matching item when focus is lost.
+4. Update the ComboBox selection programmatically and refresh the UI.
+
+>caption Auto-select the first matching item on blur
+
+````RAZOR
+@using Telerik.DataSource.Extensions
+
+@implements IDisposable
+
+@inject IJSRuntime js
+
+
ComboBoxFirstItem: @ComboBoxFirstItem?.Text
+
+
Selected value: @ComboBoxValue
+
+
+
+
+
+
+
+
+
+
+@* Move JavaScript to a separate JS file *@
+
+
+@code {
+ private DotNetObjectReference<__Main>? DotNetRef { get; set; }
+
+ private List ComboBoxData { get; set; } = new();
+ private int ComboBoxValue { get; set; }
+ private ListItem? ComboBoxFirstItem { get; set; }
+
+ [JSInvokable("OnComboBoxTab")]
+ public void OnComboBoxTab(string newStringValue)
+ {
+ if (ComboBoxFirstItem is not null && ComboBoxFirstItem.Text.Contains(newStringValue))
+ {
+ ComboBoxValue = ComboBoxFirstItem.Id;
+ ComboBoxFirstItem = default;
+
+ StateHasChanged();
+ }
+ }
+
+ private void ComboBoxValueChanged(int newValue)
+ {
+ ComboBoxValue = newValue;
+ ComboBoxFirstItem = default;
+ }
+
+ private async Task OnComboBoxRead(ReadEventArgs args)
+ {
+ var result = await ComboBoxData.ToDataSourceResultAsync(args.Request);
+
+ args.Data = result.Data;
+ args.Total = result.Total;
+
+ if (args.Request.Filters.Count > 0)
+ {
+ ComboBoxFirstItem = args.Data.Cast().First();
+ }
+ else
+ {
+ ComboBoxFirstItem = default;
+ }
+ }
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ if (firstRender)
+ {
+ await Task.Delay(1); // ensure HTML is ready
+ await js.InvokeVoidAsync("saveDotNetRef", DotNetRef);
+ await js.InvokeVoidAsync("attachComboKeyDown", "#combo-1");
+ }
+
+ await base.OnAfterRenderAsync(firstRender);
+ }
+
+ protected override void OnInitialized()
+ {
+ DotNetRef = DotNetObjectReference.Create(this);
+
+ for (int i = 1; i <= 24; i++)
+ {
+ ComboBoxData.Add(new ListItem()
+ {
+ Id = i,
+ Text = $"Item {i}"
+ });
+ }
+ }
+
+ public void Dispose()
+ {
+ DotNetRef?.Dispose();
+ _ = js.InvokeVoidAsync("detachComboKeyDown", "#combo-1");
+ }
+
+ public class ListItem
+ {
+ public int Id { get; set; }
+ public string Text { get; set; } = string.Empty;
+ }
+}
+````
+## See Also
+
+- [ComboBox Events](slug:components/combobox/events)
\ No newline at end of file
From 455b30ca1e0a8fe862cb84ba484b63b060e8b780 Mon Sep 17 00:00:00 2001
From: IvanDanchev
Date: Wed, 18 Jun 2025 09:03:45 -0400
Subject: [PATCH 51/97] docs(FileSelect): add info about Name Html encoding
(#3043)
* docs(FileSelect): add info about Name Html encoding
* docs(FileSelect): add PR review suggestion
---
components/fileselect/events.md | 2 +-
components/upload/events.md | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/components/fileselect/events.md b/components/fileselect/events.md
index 9ca1be2164..b0659c79e4 100644
--- a/components/fileselect/events.md
+++ b/components/fileselect/events.md
@@ -27,7 +27,7 @@ The `FileSelectFileInfo` type contains the following properties:
Property | Type | Description
---------|----------|---------
`Id` | `string` | The unique file identifier.
-`Name`|`string` | The file name.
+`Name`|`string` | The encoded file name, including the extension. One method to decode it is [`System.Net.WebUtility.HtmlDecode()`](https://learn.microsoft.com/en-us/dotnet/api/system.net.webutility.htmldecode). The file can be renamed in the [`OnSelect` event handler](#onselect).
`Size` |`long` | The file size in bytes.
`Extension` |`string` | The file extension.
`InvalidExtension` | `bool` | A Boolean flag that shows if the file type is invalid.
diff --git a/components/upload/events.md b/components/upload/events.md
index 144016293b..40569274fc 100644
--- a/components/upload/events.md
+++ b/components/upload/events.md
@@ -61,7 +61,7 @@ The `UploadFileInfo` object has the following properties:
| `InvalidExtension` | `bool` | Defines if the file violates the [`AllowedExtensions` value](slug:upload-overview#upload-parameters). |
| `InvalidMaxFileSize` | `bool` | Defines if the file violates the [`MaxFileSize` value](slug:upload-overview#upload-parameters). |
| `InvalidMinFileSize` | `bool` | Defines if the file violates the [`MinFileSize` value](slug:upload-overview#upload-parameters). |
-| `Name` | `string` | The **encoded** file name, including the extension. One method to decode it is [`System.Net.WebUtility.HtmlDecode()`](https://learn.microsoft.com/en-us/dotnet/api/system.net.webutility.htmldecode). The file name received by the controller (endpoint) is **not encoded**. The [file can be renamed](#renaming-a-file) in the [`OnSelect`](#onselect) and [`OnUpload`](#onupload) handlers. |
+| `Name` | `string` | The encoded file name, including the extension. One method to decode it is [`System.Net.WebUtility.HtmlDecode()`](https://learn.microsoft.com/en-us/dotnet/api/system.net.webutility.htmldecode). The file name received by the controller (endpoint) is not encoded. The [file can be renamed](#renaming-a-file) in the [`OnSelect`](#onselect) and [`OnUpload`](#onupload) event handlers. |
| `Progress` | `int` | The uploaded percentage of the file in the [`OnProgress` event](#onprogress). |
| `Size` | `long` | The file size in bytes. |
| `Status` | [`UploadFileStatus` enum](slug:Telerik.Blazor.UploadFileStatus) | The current status of the file in the context of the Upload component (`Selected`, `Uploading`, `Uploaded`, `Failed`). |
From eb5c1387c8e697220b7a7688fec484aff997d902 Mon Sep 17 00:00:00 2001
From: Kendo Bot
Date: Wed, 18 Jun 2025 16:40:18 +0300
Subject: [PATCH 52/97] Added new kb article grid-popup-in-cell (#3016)
* Added new kb article grid-popup-in-cell
* chore(Grid): add suggestions
---------
Co-authored-by: KB Bot
Co-authored-by: Hristian Stefanov
---
knowledge-base/grid-popup-in-cell.md | 127 +++++++++++++++++++++++++++
1 file changed, 127 insertions(+)
create mode 100644 knowledge-base/grid-popup-in-cell.md
diff --git a/knowledge-base/grid-popup-in-cell.md b/knowledge-base/grid-popup-in-cell.md
new file mode 100644
index 0000000000..709c9064a1
--- /dev/null
+++ b/knowledge-base/grid-popup-in-cell.md
@@ -0,0 +1,127 @@
+---
+title: How to Display a Popup in a Grid Cell
+description: Learn how to display a popup beside an icon embedded in a cell of the Grid for Blazor.
+type: how-to
+page_title: How to Display Popup Next to Icon in Grid for Blazor
+slug: grid-kb-popup-in-cell
+tags: blazor, grid, popup, template
+res_type: kb
+ticketid: 1689992, 1640846
+---
+
+## Environment
+
+
+
+
+
Product
+
Grid for Blazor
+
+
+
+
+## Description
+
+I want to display a popup beside an icon embedded within a cell in the [Grid for Blazor](slug:grid-overview). The popup should appear when the icon is clicked.
+
+## Solution
+
+To display a popup within a Grid cell:
+
+1. Add a button that triggers the popup for each row by using a `GridCommandColumn` or a column [`Template`](slug:grid-templates-column).
+
+2. Anchor the [`Popover`](slug:popover-overview) to the button via `AnchorSelector`.
+
+Here is an example implementation:
+
+````RAZOR
+
+
+
+ @{
+ var dataItem = (SampleModel)context;
+ }
+
+
+
+
+
+
+
+
+
+ Popover for @ModelInPopup?.Name
+
+
+
+ Hide
+
+
+
+
+@code {
+ private List GridData { get; set; } = new();
+ private TelerikPopover? PopoverRef { get; set; }
+
+ private string PopoverAnchorSelector { get; set; } = "#button1";
+
+ private SampleModel? ModelInPopup { get; set; }
+
+ private async Task OnPopupShowButtonClick(GridCommandEventArgs args)
+ {
+ ModelInPopup = (SampleModel)args.Item;
+
+ PopoverRef?.Hide();
+ PopoverAnchorSelector = $"#button{ModelInPopup.Id}";
+ await Task.Delay(1);
+
+ PopoverRef?.Show();
+ }
+
+ protected override void OnInitialized()
+ {
+ var rnd = new Random();
+ for (int i = 1; i <= 7; i++)
+ {
+ GridData.Add(new SampleModel()
+ {
+ Id = i,
+ Name = $"Name {i}",
+ GroupName = $"Group {i % 3 + 1}",
+ Price = rnd.Next(1, 100) * 1.23m,
+ Quantity = rnd.Next(0, 1000),
+ StartDate = DateTime.Now.AddDays(-rnd.Next(60, 1000)),
+ IsActive = i % 4 > 0
+ });
+ }
+ }
+ public class SampleModel
+ {
+ public int Id { get; set; }
+ public int? ParentId { get; set; }
+ public string Name { get; set; } = string.Empty;
+ public string GroupName { get; set; } = string.Empty;
+ public decimal Price { get; set; }
+ public int Quantity { get; set; }
+ public object Icon { get; set; } = SvgIcon.File;
+ public DateTime StartDate { get; set; }
+ public DateTime EndDate { get; set; }
+ public bool IsActive { get; set; }
+ }
+}
+````
+
+## See Also
+
+* [Grid Overview Documentation](slug:grid-overview)
+* [Popover Overview Documentation](slug:popover-overview)
From 907b1e12294d71c735239a52d6180327ed8ddfb0 Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Thu, 19 Jun 2025 16:26:47 +0300
Subject: [PATCH 53/97] chore: add copilot instruction file (#3047)
* chore: add copilot instruction file
* chore: add more guidelines
---
.github/copilot-instructions.md | 552 ++++++++++++++++++++++++++++++++
1 file changed, 552 insertions(+)
create mode 100644 .github/copilot-instructions.md
diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
new file mode 100644
index 0000000000..eb5cfec430
--- /dev/null
+++ b/.github/copilot-instructions.md
@@ -0,0 +1,552 @@
+# Blazor Code Style Guide
+
+This guide outlines best practices for Razor component development and documentation in Blazor.
+
+## Razor File Structure
+
+Use the following top-down order in `.razor` files:
+
+1. `@page`
+2. `@using`
+3. `@namespace`
+4. `@inherits`
+5. `@implements`
+6. `@inject`
+
+Insert `
+
+Tired of reading docs? With our new AI Coding Assistants, you can add, configure, and troubleshoot Telerik UI for Blazor components—right inside your favorite AI-powered IDE: Visual Studio, VS Code, Cursor, and more. Start building faster, smarter, and with contextual intelligence powered by our docs/APIs:Try AI Assistants
+
## Creating Blazor Chart
1. Add the `` tag to your razor page.
diff --git a/components/dropdownlist/overview.md b/components/dropdownlist/overview.md
index e40d20d5d8..931cde03f9 100644
--- a/components/dropdownlist/overview.md
+++ b/components/dropdownlist/overview.md
@@ -12,6 +12,14 @@ position: 0
The Blazor DropDownList component allows the user to choose an option from a predefined set of choices presented in a dropdown list popup. The developer can control the [data](slug:components/dropdownlist/databind), sizes, and various appearance options like class and [templates](slug:components/dropdownlist/templates).
+
+
+Tired of reading docs? With our new AI Coding Assistants, you can add, configure, and troubleshoot Telerik UI for Blazor components—right inside your favorite AI-powered IDE: Visual Studio, VS Code, Cursor, and more. Start building faster, smarter, and with contextual intelligence powered by our docs/APIs:Try AI Assistants
+
## Creating Blazor DropDownList
1. Use the `TelerikDropDownList` tag to add the Blazor dropdown list to your razor page.
diff --git a/components/grid/overview.md b/components/grid/overview.md
index 1fdb9de86b..0e8fa946cc 100644
--- a/components/grid/overview.md
+++ b/components/grid/overview.md
@@ -12,6 +12,14 @@ position: 0
This article provides a quick introduction to get your first Blazor data grid component up and running in a few seconds. There is a video tutorial and a list of the key features.
+
+
+Tired of reading docs? With our new AI Coding Assistants, you can add, configure, and troubleshoot Telerik UI for Blazor components—right inside your favorite AI-powered IDE: Visual Studio, VS Code, Cursor, and more. Start building faster, smarter, and with contextual intelligence powered by our docs/APIs:Try AI Assistants
+
The Telerik Blazor Data Grid provides a comprehensive set of ready-to-use features that cover everything from paging, sorting, filtering, editing, and grouping to row virtualization, optimized data reading, keyboard navigation, and accessibility support.
The Telerik Blazor grid is built on native Blazor from the ground up, by a company with a long history of making enterprise-ready Grids. This results in a highly customizable Grid that delivers lighting fast performance.
From 83fcfdc318dea9b4df5b46ba737a4c58ccab9e18 Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Thu, 3 Jul 2025 13:17:08 +0300
Subject: [PATCH 71/97] chore(Filter): document OnUpdate event (#3080)
* chore(Filter): document OnUpdate event
* chore: apply review recommendations
* Update components/filter/events.md
Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
* Update components/filter/events.md
Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
---------
Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
---
components/filter/events.md | 56 ++++++++++++++++++++++++++++++++++++-
1 file changed, 55 insertions(+), 1 deletion(-)
diff --git a/components/filter/events.md b/components/filter/events.md
index a8dc8fe6ff..a11a675e6e 100644
--- a/components/filter/events.md
+++ b/components/filter/events.md
@@ -12,13 +12,67 @@ position: 11
This article explains the available events for the Telerik Filter for Blazor:
+* [OnUpdate](#onupdate)
* [ValueChanged](#valuechanged)
+## OnUpdate
+
+The `OnUpdate` event fires when the user changes the Filter `Value`. The component is designed for one-way binding and works directly with the object reference of the bound `CompositeFilterDescriptor`. The component updates the `Value` internally. Use the `OnUpdate` event to handle any additional logic when the Filter `Value` is modified.
+
+>caption Handle OnUpdate
+
+````RAZOR
+@using Telerik.DataSource
+
+
Change any filter value to trigger the event and see the message update from the OnUpdate handler.
+
+
+
+
+
+
+
+
+
+
+ @EventMessage
+
+
+
+
+@code {
+ private CompositeFilterDescriptor Value { get; set; } = new CompositeFilterDescriptor();
+ private string EventMessage { get; set; } = string.Empty;
+
+ private void OnFilterUpdate()
+ {
+ EventMessage = $"Filter updated at {DateTime.Now:HH:mm:ss}";
+ }
+
+ public class Person
+ {
+ public int EmployeeId { get; set; }
+ public string Name { get; set; } = string.Empty;
+ public int AgeInYears { get; set; }
+ }
+}
+````
+
## ValueChanged
The `ValueChanged` event fires when the value has changed. Its event handler receives the updated `CompositeFilterDescriptor` as an argument.
->caption Handle ValueChanged.
+> The `ValueChanged` event is deprecated and will be removed in future versions. Use the `OnUpdate` event instead.
+
+>caption Handle ValueChanged
````RAZOR
@* This code snippet showcases an example of how to handle the ValueChanged event. *@
From 09727c2bdd3889d52bbcc7ead1928e252a62fcd6 Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Thu, 3 Jul 2025 14:54:11 +0300
Subject: [PATCH 72/97] chore: add version 9 to breaking changes list (#3086)
---
upgrade/breaking-changes/list.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/upgrade/breaking-changes/list.md b/upgrade/breaking-changes/list.md
index 5c0891e0f4..15a88a8704 100644
--- a/upgrade/breaking-changes/list.md
+++ b/upgrade/breaking-changes/list.md
@@ -10,7 +10,7 @@ position: 0
This article lists the releases of the Telerik UI for Blazor product that introduce breaking changes. You may want to go through it when [upgrading](slug:upgrade-tutorial) to see whether you are affected.
-
+* [9.0.0](slug:changes-in-9-0-0)
* [8.0.0](slug:changes-in-8-0-0)
* [7.0.0](slug:changes-in-7-0-0)
* [6.0.0](slug:changes-in-6-0-0)
From 394f0e07e1545dec7c04555bad786f1bbeb8432f Mon Sep 17 00:00:00 2001
From: JustinR34 <89593857+JustinR34@users.noreply.github.com>
Date: Thu, 3 Jul 2025 07:54:27 -0400
Subject: [PATCH 73/97] Update predefined-dialog-beneath-modal-dialog-blazor.md
(#3084)
Added injection of the IJSRuntime
---
knowledge-base/predefined-dialog-beneath-modal-dialog-blazor.md | 2 ++
1 file changed, 2 insertions(+)
diff --git a/knowledge-base/predefined-dialog-beneath-modal-dialog-blazor.md b/knowledge-base/predefined-dialog-beneath-modal-dialog-blazor.md
index 7d6133c770..037f293a94 100644
--- a/knowledge-base/predefined-dialog-beneath-modal-dialog-blazor.md
+++ b/knowledge-base/predefined-dialog-beneath-modal-dialog-blazor.md
@@ -96,6 +96,8 @@ Use JavaScript to dynamically adjust the `z-index` of the predefined dialog. Thi
```
```razor
+@inject IJSRuntime js
+
From 2735afdf1fbddd6dacaa286e47723bcebced6bfe Mon Sep 17 00:00:00 2001
From: IvanDanchev
Date: Thu, 3 Jul 2025 10:13:43 -0400
Subject: [PATCH 74/97] docs: remove default cta panels (#3090)
---
components/chart/overview.md | 7 +------
components/dropdownlist/overview.md | 7 +------
components/grid/overview.md | 7 +------
3 files changed, 3 insertions(+), 18 deletions(-)
diff --git a/components/chart/overview.md b/components/chart/overview.md
index 271eae8f88..90a49ef7d7 100644
--- a/components/chart/overview.md
+++ b/components/chart/overview.md
@@ -5,6 +5,7 @@ description: Overview of the Chart for Blazor.
slug: components/chart/overview
tags: telerik,blazor,chart,overview, graph
published: True
+hideCta: True
position: 0
---
@@ -12,12 +13,6 @@ position: 0
The Blazor Charts components enables you to present data in a visually meaningful way, helping users draw insights effectively. It offers a wide range of graph types and provides full control over its appearance, including colors, fonts, paddings, margins, and templates.
-
-
Tired of reading docs? With our new AI Coding Assistants, you can add, configure, and troubleshoot Telerik UI for Blazor components—right inside your favorite AI-powered IDE: Visual Studio, VS Code, Cursor, and more. Start building faster, smarter, and with contextual intelligence powered by our docs/APIs:Try AI Assistants
## Creating Blazor Chart
diff --git a/components/dropdownlist/overview.md b/components/dropdownlist/overview.md
index 931cde03f9..b0c3cda8ea 100644
--- a/components/dropdownlist/overview.md
+++ b/components/dropdownlist/overview.md
@@ -5,6 +5,7 @@ description: The Blazor DropDownList allows users to select an option from a lis
slug: components/dropdownlist/overview
tags: telerik,blazor,dropdownlist,dropdown,list,overview
published: True
+hideCta: True
position: 0
---
@@ -12,12 +13,6 @@ position: 0
The Blazor DropDownList component allows the user to choose an option from a predefined set of choices presented in a dropdown list popup. The developer can control the [data](slug:components/dropdownlist/databind), sizes, and various appearance options like class and [templates](slug:components/dropdownlist/templates).
-
-
Tired of reading docs? With our new AI Coding Assistants, you can add, configure, and troubleshoot Telerik UI for Blazor components—right inside your favorite AI-powered IDE: Visual Studio, VS Code, Cursor, and more. Start building faster, smarter, and with contextual intelligence powered by our docs/APIs:Try AI Assistants
## Creating Blazor DropDownList
diff --git a/components/grid/overview.md b/components/grid/overview.md
index 0e8fa946cc..d8ec87f77f 100644
--- a/components/grid/overview.md
+++ b/components/grid/overview.md
@@ -5,6 +5,7 @@ description: The Blazor Grid provides a comprehensive set of ready-to-use featur
slug: grid-overview
tags: telerik,blazor,grid,datagrid,overview
published: True
+hideCta: True
position: 0
---
@@ -12,12 +13,6 @@ position: 0
This article provides a quick introduction to get your first Blazor data grid component up and running in a few seconds. There is a video tutorial and a list of the key features.
-
-
Tired of reading docs? With our new AI Coding Assistants, you can add, configure, and troubleshoot Telerik UI for Blazor components—right inside your favorite AI-powered IDE: Visual Studio, VS Code, Cursor, and more. Start building faster, smarter, and with contextual intelligence powered by our docs/APIs:Try AI Assistants
The Telerik Blazor Data Grid provides a comprehensive set of ready-to-use features that cover everything from paging, sorting, filtering, editing, and grouping to row virtualization, optimized data reading, keyboard navigation, and accessibility support.
From 6f5224bb04e5bc959d1200f79cc4d9e44b34d500 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Thu, 3 Jul 2025 17:14:33 +0300
Subject: [PATCH 75/97] docs(AI): Force using latest version (#3088)
---
ai/mcp-server.md | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/ai/mcp-server.md b/ai/mcp-server.md
index 8afdcdc35f..19da38ca08 100644
--- a/ai/mcp-server.md
+++ b/ai/mcp-server.md
@@ -56,7 +56,7 @@ To enable the Telerik MCP Server in a specific Blazor app, add a `.mcp.json` fil
"telerikBlazorAssistant": {
"type": "stdio",
"command": "npx",
- "args": ["-y", "@progress/telerik-blazor-mcp"],
+ "args": ["-y", "@progress/telerik-blazor-mcp@latest"],
"env": {
"TELERIK_LICENSE_PATH": "C:\\Users\\___\\AppData\\Roaming\\Telerik\\telerik-license.txt"
}
@@ -83,7 +83,7 @@ To enable the Telerik MCP Server in a specific workspace or Blazor app, add a `.
"telerikBlazorAssistant": {
"type": "stdio",
"command": "npx",
- "args": ["-y", "@progress/telerik-blazor-mcp"],
+ "args": ["-y", "@progress/telerik-blazor-mcp@latest"],
"env": {
"TELERIK_LICENSE_PATH": "C:\\Users\\___\\AppData\\Roaming\\Telerik\\telerik-license.txt"
}
@@ -105,7 +105,7 @@ To [add the Telerik MCP Server globally for VS Code, edit the VS Code `settings.
"telerikBlazorAssistant": {
"type": "stdio",
"command": "npx",
- "args": ["-y", "@progress/telerik-blazor-mcp"],
+ "args": ["-y", "@progress/telerik-blazor-mcp@latest"],
"env": {
"TELERIK_LICENSE_PATH": "C:\\Users\\___\\AppData\\Roaming\\Telerik\\telerik-license.txt"
}
@@ -129,7 +129,7 @@ To [enable the Telerik MCP Server in a specific workspace](https://code.visualst
"telerikBlazorAssistant": {
"type": "stdio",
"command": "npx",
- "args": ["-y", "@progress/telerik-blazor-mcp"],
+ "args": ["-y", "@progress/telerik-blazor-mcp@latest"],
"env": {
"TELERIK_LICENSE_PATH": "C:\\Users\\___\\AppData\\Roaming\\Telerik\\telerik-license.txt"
}
From ad67921fa665e08251c34ad9034ad2dcc0ccde57 Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Mon, 7 Jul 2025 14:55:49 +0300
Subject: [PATCH 76/97] docs(SpeechToTextButton): add SpeechToTextButton docs
(#3076)
* docs(SpeechToTextButton): add SpeechToTextButton docs
* chore(SpeechToTextButton): remove tables and add links to api reference instead
* chore(SpeechToTextButton): apply changes based on review and polish the articles
---
components/speechtotextbutton/appearance.md | 75 ++++++++++++++++++++
components/speechtotextbutton/events.md | 45 ++++++++++++
components/speechtotextbutton/integration.md | 28 ++++++++
components/speechtotextbutton/overview.md | 70 ++++++++++++++++++
docs-builder.yml | 2 +
introduction.md | 1 +
6 files changed, 221 insertions(+)
create mode 100644 components/speechtotextbutton/appearance.md
create mode 100644 components/speechtotextbutton/events.md
create mode 100644 components/speechtotextbutton/integration.md
create mode 100644 components/speechtotextbutton/overview.md
diff --git a/components/speechtotextbutton/appearance.md b/components/speechtotextbutton/appearance.md
new file mode 100644
index 0000000000..d5b68ba16c
--- /dev/null
+++ b/components/speechtotextbutton/appearance.md
@@ -0,0 +1,75 @@
+---
+title: Appearance
+page_title: SpeechToTextButton Appearance
+description: Customize the appearance of the SpeechToTextButton component in Blazor applications.
+slug: speechtotextbutton-appearance
+tags: blazor, speech recognition, appearance, customization
+published: true
+position: 2
+---
+
+# SpeechToTextButton Appearance
+
+You can customize the appearance of the SpeechToTextButton component by using its built-in parameters and CSS classes. The component supports the same appearance options as the [Telerik UI for Blazor Button](slug:components/button/overview).
+
+## Size
+
+You can increase or decrease the size of the button by setting the `Size` parameter to a member of the `Telerik.Blazor.ThemeConstants.Button.Size` class.
+
+To review all available values for the `Size` parameter, see the [Button Size API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.ThemeConstants.Button.Size.html).
+
+>caption Example of setting the Button Size
+
+
+
+## Fill Mode
+
+The `FillMode` toggles the background and border of the TelerikSpeechToTextButton. You can set the parameter to a member of the `Telerik.Blazor.ThemeConstants.Button.FillMode` class.
+
+To review all available values for the `FillMode` parameter, see the [Button FillMode API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.ThemeConstants.Button.FillMode.html).
+
+>caption Example of setting the FillMode
+
+
+
+## Theme Color
+
+The color of the button is controlled through the `ThemeColor` parameter. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.ThemeColor` class.
+
+To review all available values for the `ThemeColor` parameter, see the [Button ThemeColor API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.ThemeConstants.Button.ThemeColor.html).
+
+>caption Example of setting the ThemeColor
+
+
+
+## Rounded
+
+The `Rounded` parameter applies the border-radius CSS rule to the button to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Rounded` class.
+
+To review all available values for the `Rounded` parameter, see the [Button Rounded API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.ThemeConstants.Button.Rounded.html).
+
+>caption Example of Setting the Rounded parameter
+
+
+
+## Icon
+
+Set the `Icon` parameter to display an icon. You can use a predefined [Telerik icon](slug:common-features-icons) or a custom one.
+
+>caption Example of customizing the default icon
+
+
+
+## Custom Styles
+
+Use the `Class` parameter to apply custom CSS classes. You can further style the button by targeting these classes.
+
+>caption Example of custom styling
+
+
+
+## See Also
+
+- [SpeechToTextButton Overview](slug:speechtotextbutton-overview)
+- [SpeechToTextButton Events](slug:speechtotextbutton-events)
+- [SpeechToTextButton Integration](slug:speechtotextbutton-integration)
\ No newline at end of file
diff --git a/components/speechtotextbutton/events.md b/components/speechtotextbutton/events.md
new file mode 100644
index 0000000000..3aaf680246
--- /dev/null
+++ b/components/speechtotextbutton/events.md
@@ -0,0 +1,45 @@
+---
+title: Events
+page_title: SpeechToTextButton Events
+description: Learn about the events that the SpeechToTextButton component emits and how to handle them in Blazor applications.
+slug: speechtotextbutton-events
+tags: blazor, speech recognition, events
+published: true
+position: 3
+---
+
+# SpeechToTextButton Events
+
+The SpeechToTextButton component emits events that notify you about speech recognition results, errors, and state changes. Use these events to update the UI, display messages, or process the recognized speech.
+
+## OnResult
+
+The `OnResult` event fires when the component recognizes speech and produces a result. Use this event to access the recognized phrases, alternatives, and confidence scores.
+
+To review all available properties of the event arguments for `OnResult`, see the [`SpeechToTextButtonResultEventArgs` API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.SpeechToTextButtonResultEventArgs.html).
+
+>caption Example: Displaying recognized Alternatives and Confidence
+
+
+
+## OnStart and OnEnd
+
+The `OnStart` event fires when speech recognition starts. The `OnEnd` event fires when speech recognition ends. Use these events to update the UI or track the recognition state.
+
+>caption Example: Indicating listening state
+
+
+
+## OnError
+
+The `OnError` event fires when an error occurs during speech recognition. Use this event to display error messages to the user.
+
+## OnClick
+
+The `OnClick` event fires when the user clicks or taps the button. It receives argument of type `MouseEventArgs`.
+
+## See Also
+
+- [SpeechToTextButton Overview](slug:speechtotextbutton-overview)
+- [SpeechToTextButton Appearance](slug:speechtotextbutton-appearance)
+- [SpeechToTextButton Integration](slug:speechtotextbutton-integration)
\ No newline at end of file
diff --git a/components/speechtotextbutton/integration.md b/components/speechtotextbutton/integration.md
new file mode 100644
index 0000000000..a371f57679
--- /dev/null
+++ b/components/speechtotextbutton/integration.md
@@ -0,0 +1,28 @@
+---
+title: Integration
+page_title: Integration
+description: Learn how to integrate the SpeechToTextButton component with forms and other components in Blazor applications.
+slug: speechtotextbutton-integration
+tags: blazor, speech recognition, integration
+published: true
+position: 4
+---
+
+# SpeechToTextButton Integration
+
+Integrate the SpeechToTextButton component with forms, input fields, and other UI elements to provide voice input capabilities.
+
+## Binding Recognized Text to an Input Field
+
+Use the `OnResult` event to update an input field with the recognized text. For example, you can enable users to fill out a feedback form by speaking instead of typing. When the user clicks the SpeechToTextButton, the component captures their speech. It then updates the value of a [TelerikTextArea](slug:textarea-overview) with the recognized text.
+
+>caption Example of binding the recognized text to an TelerikTextArea
+
+
+
+## See Also
+
+- [AI Model Voice Transcription Intergration](https://github.com/telerik/blazor-ui/tree/master/common/microsoft-extensions-ai-integration/SpeechToTextIntegration)
+- [SpeechToTextButton Overview](slug:speechtotextbutton-overview)
+- [SpeechToTextButton Events](slug:speechtotextbutton-events)
+- [SpeechToTextButton Appearance](slug:speechtotextbutton-appearance)
\ No newline at end of file
diff --git a/components/speechtotextbutton/overview.md b/components/speechtotextbutton/overview.md
new file mode 100644
index 0000000000..e07277703d
--- /dev/null
+++ b/components/speechtotextbutton/overview.md
@@ -0,0 +1,70 @@
+---
+title: Overview
+page_title: SpeechToTextButton Overview
+description: Learn about the SpeechToTextButton component, its features, and how to use it in Blazor applications.
+slug: speechtotextbutton-overview
+tags: blazor, speech recognition, button, voice input
+published: true
+position: 1
+---
+
+# Blazor SpeechToTextButton Overview
+
+The [Blazor SpeechToTextButton component](https://www.telerik.com/blazor-ui/speech-to-text-button) enables speech recognition in Blazor applications. It provides a button that users can select to start and stop speech recognition. The component converts spoken words into text and emits events with the recognized results.
+
+Use the SpeechToTextButton component to add voice input capabilities to forms, search bars, chat interfaces, and other scenarios that require speech-to-text functionality.
+
+## Basic Usage
+
+The following example demonstrates how to add the SpeechToTextButton to a Blazor page and handle the recognition result.
+
+>caption Example of using the SpeechToTextButton
+
+
+
+## Appearance
+
+You can customize the appearance of the SpeechToTextButton by setting parameters such as `Icon`, and `Class`. For more details and examples, refer to [SpeechToTextButton Appearance](slug:speechtotextbutton-appearance).
+
+## Events
+
+The SpeechToTextButton component emits several events that you can handle. For more details, refer to [SpeechToTextButton Events](slug:speechtotextbutton-events).
+
+## SpeechToTextButton Parameters
+
+To review all available parameters for the SpeechToTextButton component, see the [SpeechToTextButton API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikSpeechToTextButton#parameters).
+
+## SpeechToTextButton Reference and Methods
+
+The SpeechToTextButton component exposes several public methods that you can call from your code. For a full list and details, see the [SpeechToTextButton API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikSpeechToTextButton#methods).
+
+>caption Example of Calling a Method by Reference
+
+
+````RAZOR
+
+
+@code {
+ private async Task StartRecognition()
+ {
+ await speechToTextButtonRef.StartAsync();
+ }
+}
+````
+
+## Supported Browsers
+
+The SpeechToTextButton component relies on the Web Speech API. For a list of supported browsers, refer to the [Web Speech API documentation](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API#browser_compatibility).
+
+## Next Steps
+
+* [Handle SpeechToTextButton Events](slug:speechtotextbutton-events)
+* [SpeechToTextButton Integration](slug:speechtotextbutton-integration)
+
+## See Also
+
+* [SpeechToTextButton Live Demo](https://demos.telerik.com/blazor-ui/speechtotextbutton/overview)
+* [SpeechToTextButton API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikSpeechToTextButton)
+* [SpeechToTextButton Events](slug:speechtotextbutton-events)
+* [SpeechToTextButton Appearance](slug:speechtotextbutton-appearance)
+* [SpeechToTextButton Integration](slug:speechtotextbutton-integration)
\ No newline at end of file
diff --git a/docs-builder.yml b/docs-builder.yml
index 152eef3145..911edf40cd 100644
--- a/docs-builder.yml
+++ b/docs-builder.yml
@@ -184,6 +184,8 @@ meta:
title: Stepper
"*stacklayout":
title: Stack Layout
+ "*speechtotextbutton":
+ title: SpeechToTextButton
"*splitter":
title: Splitter
"*splitbutton":
diff --git a/introduction.md b/introduction.md
index b34fc00c05..a2e72e4a98 100644
--- a/introduction.md
+++ b/introduction.md
@@ -83,6 +83,7 @@ You can watch a YouTube playlist of getting started tutorials for Telerik UI for
+
From efbaee8bcd67ab925a2b1c86977b50f54126231d Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Tue, 8 Jul 2025 08:06:41 +0300
Subject: [PATCH 77/97] chore(Kb): kb for add tooltip to each chip in chiplist
(#3082)
* chore(Kb): kb for add tooltip to each chip in chiplist
* Update knowledge-base/chiplist-add-chip-tooltips.md
Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
* Update knowledge-base/chiplist-add-chip-tooltips.md
Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
* Update knowledge-base/chiplist-add-chip-tooltips.md
Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
* Update knowledge-base/chiplist-add-chip-tooltips.md
Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
* chore(Kb): polish article and add reference to chiplist templates
* chore(KB): update icon declaration
---------
Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
---
knowledge-base/chiplist-add-chip-tooltips.md | 84 ++++++++++++++++++++
1 file changed, 84 insertions(+)
create mode 100644 knowledge-base/chiplist-add-chip-tooltips.md
diff --git a/knowledge-base/chiplist-add-chip-tooltips.md b/knowledge-base/chiplist-add-chip-tooltips.md
new file mode 100644
index 0000000000..0b075650d2
--- /dev/null
+++ b/knowledge-base/chiplist-add-chip-tooltips.md
@@ -0,0 +1,84 @@
+---
+title: Display Tooltip for Each Chip in a Telerik ChipList
+description: Learn how to display tooltips for chips in the Telerik Blazor ChipList component.
+type: how-to
+page_title: How to Display Tooltips for Chips in Telerik Blazor ChipList
+meta_title: How to Display Tooltips for Chips in Telerik Blazor ChipList
+slug: chiplist-kb-add-chip-tooltips
+tags: blazor, chiplist, tooltip, template
+res_type: kb
+ticketid: 1691888
+---
+
+## Environment
+
+
+
+
+
Product
+
Telerik UI for Blazor ChipList
+
+
+
+
+## Description
+
+You can display additional information for each chip in the [ChipList](slug:chiplist-overview) by showing a Tooltip. This approach helps you keep the chip text concise while providing more details on hover.
+
+This article answers the following questions:
+- How do you show extra details for chips in a ChipList?
+- Can you display a TelerikTooltip for each chip in the ChipList?
+- How do you use [`ItemTemplate`](slug:chiplist-templates) in Telerik Blazor ChipList?
+
+## Solution
+
+To add tooltips to chips in the ChipList, use the `ItemTemplate` to customize chip rendering and set a tooltip for each chip. Follow these steps:
+
+1. Add a `Description` property to the model used for the ChipList.
+2. Use the `ItemTemplate` to render each chip and set the `title` attribute for a native tooltip.
+3. Optionally, use the `TelerikTooltip` component for enhanced tooltip appearance and behavior.
+
+**Example: Displaying Tooltips for Chips**
+
+```razor
+
+
+
+
+ @context.Text
+
+
+
+
+
+
+@code {
+ private List ChipListSource { get; set; } = new List
+ {
+ new ChipModel
+ {
+ Text = "Audio",
+ Icon = SvgIcon.FileAudio,
+ Description = "Audio file chip."
+ },
+ new ChipModel
+ {
+ Text = "Video",
+ Icon = SvgIcon.FileVideo,
+ Description = "Video file chip."
+ }
+ };
+
+ public class ChipModel
+ {
+ public string Text { get; set; }
+ public ISvgIcon? Icon { get; set; }
+ public string Description { get; set; }
+ }
+}
+```
+
+## See Also
+- [ChipList Overview](slug:chiplist-overview)
+- [ChipList Templates](slug:chiplist-templates#item-template)
+- [Tooltip Overview](slug:tooltip-overview)
\ No newline at end of file
From a301f59474efa2f71134985c18840b76220a8d2a Mon Sep 17 00:00:00 2001
From: IvanDanchev
Date: Wed, 9 Jul 2025 10:29:07 -0400
Subject: [PATCH 78/97] docs: update adaptive rendering limitations (#3094)
---
common-features/adaptive-rendering.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/common-features/adaptive-rendering.md b/common-features/adaptive-rendering.md
index 13e844e999..aecf8baa70 100644
--- a/common-features/adaptive-rendering.md
+++ b/common-features/adaptive-rendering.md
@@ -103,7 +103,7 @@ You can customize the [above-listed default adaptive breakpoints](#rendering-spe
## Limitations
-Some of the [supported components](#supported-components) allow custom values, for example, [ComboBox](slug:components/combobox/custom-value) and [MultiColumnComboBox](slug:multicolumncombobox-custom-value). Using custom values with `AdaptiveMode.Auto` is currently not supported. To expedite the development of this feature, vote for the related feature request in the Blazor Feedback Portal: [Support for custom values in `AdaptiveMode`](https://feedback.telerik.com/blazor/1611829-support-for-custom-values-in-adaptivemode).
+Some of the [supported components](#supported-components) allow custom values, for example, [ComboBox](slug:components/combobox/custom-value) and [MultiColumnComboBox](slug:multicolumncombobox-custom-value). Using custom values with `AdaptiveMode.Auto` is supported in Telerik UI for Blazor version 9.0.0 and later.
## See also
From 7529e5d1bc10b3513d5c7598a02e901b2dfef983 Mon Sep 17 00:00:00 2001
From: George Dautov
Date: Fri, 11 Jul 2025 15:19:56 +0300
Subject: [PATCH 79/97] docs(Window): Change basic usage to live example
(#3097)
---
components/window/overview.md | 23 +----------------------
1 file changed, 1 insertion(+), 22 deletions(-)
diff --git a/components/window/overview.md b/components/window/overview.md
index eae328dca5..db75d7ed93 100644
--- a/components/window/overview.md
+++ b/components/window/overview.md
@@ -25,28 +25,7 @@ The Window component displays a popup with a title bar and shows custom content.
>caption Basic Blazor Window
-````RAZOR
-
-
- Window Title
-
-
- Window Content ...
-
-
-
-
-
- Window Footer Content ...
-
-
-
-Toggle window
-
-@code {
- bool WindowIsVisible { get; set; }
-}
-````
+
## Size
From 8beb92ad7d45f315c69dfc4d79c0738d4b419ce8 Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Tue, 15 Jul 2025 08:26:36 +0300
Subject: [PATCH 80/97] docs(Grid): add docs for new row position feature
(#3096)
* docs(Grid): add docs for new row position feature
* chore: apply review recommendations
---
components/gantt/gantt-tree/editing/incell.md | 38 +++++++++++--------
components/gantt/gantt-tree/editing/inline.md | 35 ++++++++++-------
.../gantt/gantt-tree/editing/overview.md | 24 ++++++++++++
components/grid/editing/incell.md | 11 ++++++
components/grid/editing/inline.md | 9 +++++
components/grid/editing/overview.md | 26 +++++++++++++
components/treelist/editing/incell.md | 9 +++++
components/treelist/editing/inline.md | 9 +++++
components/treelist/editing/overview.md | 25 ++++++++++++
9 files changed, 156 insertions(+), 30 deletions(-)
diff --git a/components/gantt/gantt-tree/editing/incell.md b/components/gantt/gantt-tree/editing/incell.md
index a1b3e9d3ba..96e93d5a74 100644
--- a/components/gantt/gantt-tree/editing/incell.md
+++ b/components/gantt/gantt-tree/editing/incell.md
@@ -18,10 +18,18 @@ Command columns and non-editable columns are skipped while tabbing.
The InCell edit mode provides a specific user experience and behaves differently than other edit modes. Please review the notes below to get a better understanding of these specifics.
+## New Row Position
+
+To control whether a newly added item appears at the top or bottom of the Gantt Tree, set the `NewRowPosition` parameter.
+
+The `NewRowPosition` parameter accepts values from the `GanttTreeListNewRowPosition` enum:
+
+- `Top` (default)—Inserts the new item at the top of the view.
+- `Bottom`—Inserts the new item at the bottom of the view.
+
### Note
It is up to the data access logic to save the data once it is changed in the data collection, or to revert changes. The example above showcases the events that allow you to do that. In a real application, the code for handling data operations may be entirely different.
-
>caption InCell Editing Example.
````RAZOR
@@ -68,20 +76,9 @@ It is up to the data access logic to save the data once it is changed in the dat
@code {
- public DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0);
-
- class FlatModel
- {
- public int Id { get; set; }
- public int? ParentId { get; set; }
- public string Title { get; set; }
- public double PercentComplete { get; set; }
- public DateTime Start { get; set; }
- public DateTime End { get; set; }
- }
-
- public int LastId { get; set; } = 1;
- List Data { get; set; }
+ private DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0);
+ private int LastId { get; set; } = 1;
+ private List Data { get; set; }
protected override void OnInitialized()
{
@@ -122,6 +119,16 @@ It is up to the data access logic to save the data once it is changed in the dat
base.OnInitialized();
}
+ public class FlatModel
+ {
+ public int Id { get; set; }
+ public int? ParentId { get; set; }
+ public string Title { get; set; }
+ public double PercentComplete { get; set; }
+ public DateTime Start { get; set; }
+ public DateTime End { get; set; }
+ }
+
private async Task CreateItem(GanttCreateEventArgs args)
{
var argsItem = args.Item as FlatModel;
@@ -251,4 +258,3 @@ It is up to the data access logic to save the data once it is changed in the dat
## See Also
* [Live Demo: Gantt InCell Editing](https://demos.telerik.com/blazor-ui/gantt/editing-incell)
-
diff --git a/components/gantt/gantt-tree/editing/inline.md b/components/gantt/gantt-tree/editing/inline.md
index 55ca17ea03..690e11689c 100644
--- a/components/gantt/gantt-tree/editing/inline.md
+++ b/components/gantt/gantt-tree/editing/inline.md
@@ -20,6 +20,14 @@ You can also cancel the events by setting the `IsCancelled` property of the even
To enable Inline editing in the Gantt Tree, set its `TreeListEditMode` property to `GanttTreeListEditMode.Inline`, then handle the CRUD events as shown in the example below.
+## New Row Position
+
+To control whether a newly added item appears at the top or bottom of the Gantt Tree, set the `NewRowPosition` parameter.
+
+The `NewRowPosition` parameter accepts values from the `GanttTreeListNewRowPosition` enum:
+
+- `Top` (default)—Inserts the new item at the top of the view.
+- `Bottom`—Inserts the new item at the bottom of the view.
>caption The Command buttons and the Gantt events let you handle data operations in Inline edit mode.
@@ -70,20 +78,9 @@ To enable Inline editing in the Gantt Tree, set its `TreeListEditMode` property
@code {
- public DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0);
-
- class FlatModel
- {
- public int Id { get; set; }
- public int? ParentId { get; set; }
- public string Title { get; set; }
- public double PercentComplete { get; set; }
- public DateTime Start { get; set; }
- public DateTime End { get; set; }
- }
-
- public int LastId { get; set; } = 1;
- List Data { get; set; }
+ private DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0);
+ private int LastId { get; set; } = 1;
+ private List Data { get; set; }
protected override void OnInitialized()
{
@@ -124,6 +121,16 @@ To enable Inline editing in the Gantt Tree, set its `TreeListEditMode` property
base.OnInitialized();
}
+ public class FlatModel
+ {
+ public int Id { get; set; }
+ public int? ParentId { get; set; }
+ public string Title { get; set; }
+ public double PercentComplete { get; set; }
+ public DateTime Start { get; set; }
+ public DateTime End { get; set; }
+ }
+
private async Task CreateItem(GanttCreateEventArgs args)
{
var argsItem = args.Item as FlatModel;
diff --git a/components/gantt/gantt-tree/editing/overview.md b/components/gantt/gantt-tree/editing/overview.md
index b25d18813b..deacf14f0c 100644
--- a/components/gantt/gantt-tree/editing/overview.md
+++ b/components/gantt/gantt-tree/editing/overview.md
@@ -298,6 +298,30 @@ You can customize the editors rendered in the Gantt Tree by providing the `Edito
* `IsCanceled`- a boolean field indicating whether the operation is to be prevented.
+## New Row Position
+
+You can control whether a newly added item appears at the top or bottom of the Gantt Tree. Use the [`NewRowPosition`](https://www.telerik.com/blazor-ui/documentation/api/telerik.blazor.gantttreelistnewrowposition) parameter to specify the position. This parameter does not affect Popup edit mode, which always displays a dialog for new items.
+
+This configuration is available in InCell and Inline edit modes. For more details, see the [Tree InCell Editing](slug:gant-tree-incell-editing#new-row-position) and [Tree Inline Editing](slug:gant-tree-inline-editing#new-row-position) articles.
+
+> When you set `NewRowPosition` to `Bottom`, add the new item at the end of your data collection in the `OnCreate` event handler. When set to `Top`, insert the new item at the beginning of the collection. This ensures the new row appears in the correct position in the view after successfully creating the new record.
+
+>caption Example of adding a new item to the Gantt based on the `NewRowPosition` value
+
+
+````C#
+private void OnCreate(GanttCreateEventArgs args)
+{
+ if (NewRowPosition == GanttTreeListNewRowPosition.Bottom)
+ {
+ dataCollection.Add(newItem);
+ }
+ else // Top
+ {
+ dataCollection.Insert(0, newItem);
+ }
+}
+````
## Example
diff --git a/components/grid/editing/incell.md b/components/grid/editing/incell.md
index 07a8552ba4..b4dd5155e2 100644
--- a/components/grid/editing/incell.md
+++ b/components/grid/editing/incell.md
@@ -54,6 +54,17 @@ In in-cell edit mode, the `OnAdd` and `OnCreate` events fire immediately one aft
The above algorithm is different from [inline](slug:grid-editing-inline) and [popup](slug:grid-editing-popup) editing where new rows are only added to the data source after users populate them with valid values.
+## New Row Position
+
+You can control whether a newly added item appears at the top or bottom of the Grid. Use the `NewRowPosition` parameter to specify the position.
+
+The `NewRowPosition` parameter accepts values from the `GridNewRowPosition` enum:
+
+- `Top` (default)—Inserts the new item at the top of the view.
+- `Bottom`—Inserts the new item at the bottom of the view.
+
+For a complete example of how this feature works, see the following [example](slug:grid-editing-incell#basic).
+
## Integration with Other Features
Here is how the component behaves when the user tries to use add and edit operations together with other component features. Also check the [common information on this topic for all edit modes](slug:grid-editing-overview#integration-with-other-features).
diff --git a/components/grid/editing/inline.md b/components/grid/editing/inline.md
index a3ff818a1b..a8022b2902 100644
--- a/components/grid/editing/inline.md
+++ b/components/grid/editing/inline.md
@@ -39,6 +39,15 @@ In inline edit mode, the Grid commands execute row by row and the corresponding
When validation is not satisfied, clicking the **Save**, **Delete** or **Add** command buttons have no effect, but users can still navigate between all input components in the row to complete the editing.
+## New Row Position
+
+You can control whether a newly added item appears at the top or bottom of the Grid. Use the `NewRowPosition` parameter to specify the position.
+
+The `NewRowPosition` parameter accepts values from the `GridNewRowPosition` enum:
+
+- `Top` (default)—Inserts the new item at the top of the view.
+- `Bottom`—Inserts the new item at the bottom of the view.
+
## Integration with Other Features
Here is how the component behaves when the user tries to use add and edit operations together with other component features. Also check the [common information on this topic for all edit modes](slug:grid-editing-overview#integration-with-other-features).
diff --git a/components/grid/editing/overview.md b/components/grid/editing/overview.md
index 87a3cf9ffd..02f76a10e7 100644
--- a/components/grid/editing/overview.md
+++ b/components/grid/editing/overview.md
@@ -205,6 +205,32 @@ When editing a master row in a [hierarchy Grid](slug://components/grid/features/
Learn more integration details for the [inline](slug:grid-editing-inline#integration-with-other-features) and [in-cell](slug:grid-editing-incell#integration-with-other-features) edit modes.
+
+## New Row Position
+
+You can control whether a newly added item appears at the top or bottom of the Grid. Use the [`NewRowPosition`](https://www.telerik.com/blazor-ui/documentation/api/telerik.blazor.gridnewrowposition) parameter to specify the position. This parameter does not affect Popup edit mode, which always displays a dialog for new items.
+
+This configuration is available in InCell and Inline edit modes. For more details, see the [InCell Editing](slug:grid-editing-incell#new-row-position) and [Inline Editing](slug:grid-editing-inline#new-row-position) articles.
+
+> When you set `NewRowPosition` to `Bottom`, add the new item at the end of your data collection in the `OnCreate` event handler. When set to `Top`, insert the new item at the beginning of the collection. This ensures the new row appears in the correct position in the view after successfully creating the new record.
+
+>caption Example of adding a new item to the Grid based on the `NewRowPosition` value
+
+
+````C#
+private void OnCreate(GridCommandEventArgs args)
+{
+ if (NewRowPosition == GridNewRowPosition.Bottom)
+ {
+ dataCollection.Add(newItem);
+ }
+ else // Top
+ {
+ dataCollection.Insert(0, newItem);
+ }
+}
+````
+
## Examples
See Grid CRUD operations in action at:
diff --git a/components/treelist/editing/incell.md b/components/treelist/editing/incell.md
index 532e33ccde..1cd94c9e72 100644
--- a/components/treelist/editing/incell.md
+++ b/components/treelist/editing/incell.md
@@ -54,6 +54,15 @@ In in-cell edit mode, the `OnAdd` and `OnCreate` events fire immediately one aft
The above algorithm is different from [inline](slug:treelist-editing-inline) and [popup](slug:treelist-editing-popup) editing where new rows are only added to the data source after users populate them with valid values.
+## New Row Position
+
+You can control whether a newly added item appears at the top or bottom of the TreeList. Use the `NewRowPosition` parameter to specify the position.
+
+The `NewRowPosition` parameter accepts values from the `TreeListNewRowPosition` enum:
+
+- `Top` (default)—Inserts the new item at the top of the view.
+- `Bottom`—Inserts the new item at the bottom of the view.
+
## Integration with Other Features
Here is how the component behaves when the user tries to use add and edit operations together with other component features. Also check the [common information on this topic for all edit modes](slug:treelist-editing-overview#integration-with-other-features).
diff --git a/components/treelist/editing/inline.md b/components/treelist/editing/inline.md
index 049e007cc5..6697990620 100644
--- a/components/treelist/editing/inline.md
+++ b/components/treelist/editing/inline.md
@@ -39,6 +39,15 @@ In inline edit mode, the TreeList commands execute row by row and the correspond
When validation is not satisfied, clicking the **Save**, **Delete** or **Add** command buttons has no effect, but users can still navigate between all input components in the row to complete the editing.
+## New Row Position
+
+You can control whether a newly added item appears at the top or bottom of the TreeList. Use the `NewRowPosition` parameter to specify the position. This parameter does not affect Popup edit mode, which always displays a dialog for new items.
+
+The `NewRowPosition` parameter accepts values from the `TreeListNewRowPosition` enum:
+
+- `Top` (default)—Inserts the new item at the top of the view.
+- `Bottom`—Inserts the new item at the bottom of the view.
+
## Integration with Other Features
Here is how the component behaves when the user tries to use add and edit operations together with other component features. Also check the [common information on this topic for all edit modes](slug:treelist-editing-overview#integration-with-other-features).
diff --git a/components/treelist/editing/overview.md b/components/treelist/editing/overview.md
index def09dfe60..5d532402a6 100644
--- a/components/treelist/editing/overview.md
+++ b/components/treelist/editing/overview.md
@@ -192,6 +192,31 @@ When editing a row with child items, it will collapse unless you override the `E
Learn more integration details for the [inline](slug:treelist-editing-inline#integration-with-other-features) and [in-cell](slug:treelist-editing-incell#integration-with-other-features) edit modes.
+## New Row Position
+
+You can control whether a newly added item appears at the top or bottom of the TreeList. Use the [`NewRowPosition`](https://www.telerik.com/blazor-ui/documentation/api/telerik.blazor.treelistnewrowposition) parameter to specify the position. This parameter does not affect Popup edit mode, which always displays a dialog for new items.
+
+This configuration is available in InCell and Inline edit modes. For more details, see the [InCell Editing](slug:treelist-editing-incell#new-row-position) and [Inline Editing](slug:treelist-editing-inline#new-row-position) articles.
+
+> When you set `NewRowPosition` to `Bottom`, add the new item at the end of your data collection in the `OnCreate` event handler. When set to `Top`, insert the new item at the beginning of the collection. This ensures the new row appears in the correct position in the view after successfully creating the new record.
+
+>caption Example of adding a new item to the TreeList based on the `NewRowPosition` value
+
+
+````C#
+private void OnCreate(TreeListCommandEventArgs args)
+{
+ if (NewRowPosition == TreeListNewRowPosition.Bottom)
+ {
+ dataCollection.Add(newItem);
+ }
+ else // Top
+ {
+ dataCollection.Insert(0, newItem);
+ }
+}
+````
+
## Examples
See TreeList CRUD operations in action at:
From 04ed2abefdd7734ff34853091d7df781123425bc Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Tue, 15 Jul 2025 12:58:57 +0300
Subject: [PATCH 81/97] Add API Reference to the overview page (#3099)
* Add API Reference to the overview page
* chore(DropDownList): add api reference link to overview page
---
components/dropdownlist/overview.md | 1 +
1 file changed, 1 insertion(+)
diff --git a/components/dropdownlist/overview.md b/components/dropdownlist/overview.md
index b0c3cda8ea..d9c212ee23 100644
--- a/components/dropdownlist/overview.md
+++ b/components/dropdownlist/overview.md
@@ -270,5 +270,6 @@ By default, if no `Value` is provided and no `DefaultText` is defined, the DropD
## See Also
* [Data Binding](slug:components/dropdownlist/databind)
+* [DropDownList API Reference](slug:telerik.blazor.components.telerikdropdownlist-2)
* [Live Demo: DropDownList](https://demos.telerik.com/blazor-ui/dropdownlist/overview)
* [Live Demo: DropDownList Validation](https://demos.telerik.com/blazor-ui/dropdownlist/validation)
\ No newline at end of file
From e9ffa2915e9a8e2f05cb7e9d884d73bceb008d68 Mon Sep 17 00:00:00 2001
From: Kendo Bot
Date: Wed, 16 Jul 2025 09:56:49 +0300
Subject: [PATCH 82/97] Added new kb article dockmanager-reset-state (#3102)
* Added new kb article dockmanager-reset-state
* chore(DockManager): polish article
* chore: apply review recommendations
---------
Co-authored-by: KB Bot
Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
---
knowledge-base/dockmanager-reset-state.md | 134 ++++++++++++++++++++++
1 file changed, 134 insertions(+)
create mode 100644 knowledge-base/dockmanager-reset-state.md
diff --git a/knowledge-base/dockmanager-reset-state.md b/knowledge-base/dockmanager-reset-state.md
new file mode 100644
index 0000000000..8ee241fb36
--- /dev/null
+++ b/knowledge-base/dockmanager-reset-state.md
@@ -0,0 +1,134 @@
+---
+title: Reset DockManager State on Button Click in Blazor
+description: Learn how to reset the DockManager state in Blazor using a button click and save the default state after the initial render.
+type: how-to
+page_title: How to Reset DockManager State Dynamically in Blazor
+meta_title: Reset DockManager State Dynamically in Blazor
+slug: dockmanager-kb-reset-state
+tags: dockmanager, blazor, state
+res_type: kb
+ticketid: 1691957
+---
+
+## Environment
+
+
+
+
Product
+
DockManager for Blazor
+
+
+
+
+## Description
+
+I want to reset the [DockManager state](slug:dockmanager-state) on a button click. The DockManager currently only resets by reloading the page. I need a solution to reset its state dynamically.
+
+This knowledge base article also answers the following questions:
+- How to reset DockManager layout to its default state?
+- How to refresh DockManager without reloading the page?
+- How to implement a button to reset DockManager panes?
+
+## Solution
+
+To reset the DockManager state dynamically on a button click:
+
+1. Capture and save the default DockManager state in the [`OnAfterRenderAsync`](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.componentbase.onafterrenderasync?view=aspnetcore-9.0) lifecycle method.
+
+2. Restore the previously saved default state when the button is clicked.
+
+>caption Reset the DockManager layout to its default state
+
+````RAZOR
+Change something in the DockManager (move, resize, or close panes). Тhen click
+Reset Dock State
+
+
+
+
+
+
+
+
Fix login bug
+
Implement dark mode
+
Refactor API requests
+
+
+
+
+
+
Upcoming Meetings:
+
+
UI Review - Feb 10
+
Code Freeze - Feb 15
+
Final Release - Mar 1
+
+
+
+
+
+
User A updated Task 1
+
User B commented on Task 2
+
New PR merged for Feature X
+
+
+
+
+
+
+
New messages from Sarah
+
Server maintenance scheduled for Sunday
+
+
+
+
+
Enable email notifications
+
Change password
+
+
+
+
+
+
+
+
+
+
+
+
+
Live chat with team members
+
+
+
+
+
Logs and debugging tools
+
+
+
+
+
+
+
+@code {
+ private TelerikDockManager? DockManagerRef { get; set; }
+ private DockManagerState? DefaultState { get; set; }
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ if (firstRender)
+ {
+ DefaultState = DockManagerRef?.GetState();
+ }
+ }
+ private void ResetDockState()
+ {
+ DockManagerRef?.SetState(DefaultState);
+ }
+}
+````
+
+## See Also
+
+- [DockManager Overview](slug:dockmanager-overview)
+- [DockManager State](slug:dockmanager-state)
From 51a5a04d5f70f99f5a0c653d31c997cd02fc5c0c Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Wed, 16 Jul 2025 10:33:10 +0300
Subject: [PATCH 83/97] kb(ToolBar): Add KB for vertical display (#3106)
---
components/toolbar/appearance.md | 3 +-
.../toolbar-vertical-orientation-display.md | 133 ++++++++++++++++++
2 files changed, 135 insertions(+), 1 deletion(-)
create mode 100644 knowledge-base/toolbar-vertical-orientation-display.md
diff --git a/components/toolbar/appearance.md b/components/toolbar/appearance.md
index 90a8950def..41c25bd90a 100644
--- a/components/toolbar/appearance.md
+++ b/components/toolbar/appearance.md
@@ -84,4 +84,5 @@ You can increase or decrease the size of the ToolBar by setting the `Size` param
## See Also
- * [Live Demo: ToolBar Appearance](https://demos.telerik.com/blazor-ui/toolbar/appearance)
\ No newline at end of file
+* [Live Demo: ToolBar Appearance](https://demos.telerik.com/blazor-ui/toolbar/appearance)
+* [Vertical ToolBar](slug:toolbar-kb-vertical-orientation-display)
diff --git a/knowledge-base/toolbar-vertical-orientation-display.md b/knowledge-base/toolbar-vertical-orientation-display.md
new file mode 100644
index 0000000000..818e4c66d3
--- /dev/null
+++ b/knowledge-base/toolbar-vertical-orientation-display.md
@@ -0,0 +1,133 @@
+---
+title: Display Vertical ToolBar
+description: Learn how to display the Telerik ToolBar for Blazor vertically.
+type: how-to
+page_title: How to Display Vertical ToolBar
+slug: toolbar-kb-vertical-orientation-display
+tags: telerik, blazor, toolbar
+ticketid: 1693045
+res_type: kb
+---
+
+## Environment
+
+
+
+
+
Product
+
ToolBar for Blazor
+
+
+
+
+## Description
+
+This KB answers the following questions:
+
+* How to display the TelerikToolBar vertically?
+* How to render the Telerik ToolBar for Blazor with vertical orientation?
+* How to arrange the ToolBar buttons one below the other?
+
+## Solution
+
+1. Disable the automatic tool overflowing with `OverflowMode="@ToolBarOverflowMode.None"` or `Adaptive="false"` in older versions.
+1. Set a custom CSS class to the ToolBar with the `Class` parameter.
+1. Use the custom CSS class to [override the ToolBar CSS styles](slug:themes-override):
+ * Set `column` `flex-flow` for the ToolBar and any nested [ButtonGroups](slug:toolbar-built-in-tools#toolbarbuttongroup). See [Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) for more information.
+ * Reduce the component `width`.
+ * Adjust the `border-radius` values of buttons inside nested ButtonGroups.
+
+>caption Configure a vertical Telerik ToolBar for Blazor
+
+````RAZOR
+
+
+before
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+after
+
+
+
+@code {
+ private bool BoldSelected { get; set; }
+ private bool ItalicSelected { get; set; }
+ private bool UnderlineSelected { get; set; }
+}
+````
+
+## See Also
+
+* [ToolBar Overview](slug:toolbar-overview)
From b7649671e4c0a052d6245df918833ca6c04cf923 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Wed, 16 Jul 2025 10:33:24 +0300
Subject: [PATCH 84/97] docs(Common): Use a more general statement for the
yellow license banner (#3101)
---
troubleshooting/license-key-errors.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/troubleshooting/license-key-errors.md b/troubleshooting/license-key-errors.md
index 8f075b877e..bc6a20f1ef 100644
--- a/troubleshooting/license-key-errors.md
+++ b/troubleshooting/license-key-errors.md
@@ -75,7 +75,7 @@ This error applies to subscription licenses. [Renew your subscription](https://w
This section assumes an existing valid license key, so that the problem is not any of the above.
-If you briefly see a yellow warning banner in the web browser that says "**We couldn't verify your license key**", then refer to [Using Telerik Packages in Referenced Projects](slug:installation-license-key#using-telerik-packages-in-referenced-projects).
+If you see a yellow warning banner in the web browser that says "**We couldn't verify your license key**", then refer to [Using Telerik Packages in Referenced Projects](slug:installation-license-key#using-telerik-packages-in-referenced-projects).
## See Also
From feb4918555d5652c891c5bf34ce3b6964e9914bf Mon Sep 17 00:00:00 2001
From: Kendo Bot
Date: Wed, 16 Jul 2025 13:03:30 +0300
Subject: [PATCH 85/97] Added new kb article
grid-prevent-rowclick-when-selecting-text (#3111)
* Added new kb article grid-prevent-rowclick-when-selecting-text
* chore: polish article
---------
Co-authored-by: KB Bot
Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
---
...id-prevent-rowclick-when-selecting-text.md | 101 ++++++++++++++++++
1 file changed, 101 insertions(+)
create mode 100644 knowledge-base/grid-prevent-rowclick-when-selecting-text.md
diff --git a/knowledge-base/grid-prevent-rowclick-when-selecting-text.md b/knowledge-base/grid-prevent-rowclick-when-selecting-text.md
new file mode 100644
index 0000000000..25e76d3ccf
--- /dev/null
+++ b/knowledge-base/grid-prevent-rowclick-when-selecting-text.md
@@ -0,0 +1,101 @@
+---
+title: Prevent RowClick Event When Selecting Text in Grid for Blazor
+description: Learn how to prevent the RowClick event from being triggered in Grid for Blazor when selecting text using JavaScript interop.
+type: how-to
+page_title: Avoid RowClick Event Trigger During Text Selection in Grid for Blazor
+meta_title: Avoid RowClick Event Trigger During Text Selection in Grid for Blazor
+slug: grid-kb-prevent-rowclick-when-selecting-text
+tags: grid, blazor, rowclick, text-selection
+res_type: kb
+ticketid: 1692651
+---
+
+## Environment
+
+
+
+
Product
+
Grid for Blazor
+
+
+
+
+## Description
+
+I want to prevent the [OnRowClick](slug:grid-events#onrowclick) event in the [Grid for Blazor](slug:grid-overview) from executing when a user selects text by dragging to highlight it.
+
+This knowledge base article also answers the following questions:
+- How to prevent row click event in a Blazor Grid during text selection?
+- How to check for text selection before firing Grid events?
+- How to use JavaScript interop for handling the `OnRowClick` event in Telerik Blazor Grid?
+
+## Solution
+
+To achieve this, use JavaScript interop to detect text selection. Follow these steps:
+
+1. Define a JavaScript helper function that checks whether any text is currently selected on the page.
+2. Inject the IJSRuntime service into your Blazor component to enable JavaScript interop.
+3. Call the JavaScript function within your `OnRowClick` event handler to bypass logic when text is selected conditionally.
+
+````RAZOR
+@inject IJSRuntime JS
+
+
+}
+
+
+
+
+
+
+
+
+
+@code {
+ public class Person
+ {
+ public int Id { get; set; }
+ public string Name { get; set; } = string.Empty;
+ public string Email { get; set; } = string.Empty;
+ }
+
+ private readonly List People = new()
+ {
+ new Person { Id = 1, Name = "Alice Johnson", Email = "alice@example.com" },
+ new Person { Id = 2, Name = "Bob Smith", Email = "bob@example.com" },
+ new Person { Id = 3, Name = "Carol Lee", Email = "carol@example.com" }
+ };
+
+ private string ClickedPersonName = "";
+
+ private async Task OnRowClickHandler(GridRowClickEventArgs args)
+ {
+ var isTextSelected = await JS.InvokeAsync("isTextSelected");
+ if (isTextSelected)
+ {
+ ClickedPersonName = "Text was selected, row click ignored.";
+ return;
+ }
+
+ var item = (Person)args.Item;
+ ClickedPersonName = item.Name;
+ }
+}
+
+@* Inline JavaScript for detecting text selection *@
+
+````
+
+## See Also
+
+* [Grid OnRowClick event](slug:grid-events#onrowclick)
From 3f4313f82ef30fd1ce8e9ab4224a2033a2721b64 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Wed, 16 Jul 2025 15:51:05 +0300
Subject: [PATCH 86/97] docs(Grid): Fix broken link and polish EditorTemplate
article (#3113)
---
components/grid/templates/editor.md | 25 ++++++++-----------------
1 file changed, 8 insertions(+), 17 deletions(-)
diff --git a/components/grid/templates/editor.md b/components/grid/templates/editor.md
index 88c46218e8..d7e769dbf2 100644
--- a/components/grid/templates/editor.md
+++ b/components/grid/templates/editor.md
@@ -20,12 +20,13 @@ If you need more complex logic inside the editor template, compared to simple da
>tip The Editor Template works in all edit modes (Inline, Popup, InCell). Before using it with InCell mode, review the [pertinent notes](slug:grid-editing-incell#editor-template).
-When an input receives an `EditContext` (usually comes down as a cascading parameter), the framework also requires a `ValueExpression`. If you use two-way binding (the `@bind-Value` syntax), the `ValueExpression` is deducted from there. However, if you use only the `Value` property, you have to pass the `ValueExpression` yourself. This is a lambda expression that tells the framework what field in the model to update. The following sample demonstrates how to achieve that. You can also check the [Requires a value for ValueExpression](slug://common-kb-requires-valueexpression) knowledge base article for more details.
+When an input receives an `EditContext` (usually as a cascading parameter), the framework also requires a `ValueExpression`. If you use two-way binding (the `@bind-Value` syntax), the `ValueExpression` is deducted from there. However, if you use only the `Value` parameter, you have to pass the `ValueExpression` explicitly. This is a lambda expression that tells the framework what property of the model to use for validation. The following sample demonstrates how to achieve that. You can also check the [Requires a value for ValueExpression](slug:common-kb-requires-valueexpression) knowledge base article for more details.
````RAZOR
@@ -33,7 +34,6 @@ When an input receives an `EditContext` (usually comes down as a cascading param
@* Applies to the other input type components as well *@
````
-
**In this article:**
* [Notes](#notes)
@@ -46,39 +46,30 @@ When an input receives an `EditContext` (usually comes down as a cascading param
* @[template](/_contentTemplates/common/inputs.md#edit-debouncedelay)
-* The Grid row creates an `EditContext` and passes it to the `EditorTemplate`. You can read more about it in the [**Notes** section of the Editing Overview](slug:grid-editing-overview#notes) article.
-
* We recommend casting the Editor Template context to your model and storing it in a local or a dedicated global variable. Do not share a global variable within multiple templates, like column (cell) template and editor template. Variable sharing can lead to unexpected behavior.
-* Direct casting of the `context` can make the data binding not work properly.
-
-
->caption Not recommended: direct casting. Binding does not work properly.
+* Direct casting of the `context` can make two-way data binding not work properly.
-
+>caption Not recommended: direct casting with two-way parameter binding
-````RAZOR
+````RAZOR.skip-repl
````
->caption Recommended: cast the context to your model type and store it in a variable. Binding works as expected.
+>caption Recommended: cast the context in advance
````RAZOR
@{
- EditedProduct = context as Product;
+ var editProduct = (Product)context;
-
+
}
-
-@code{
- private Product EditedProduct { get; set; }
-}
````
## Examples
From 60976d8629623eeb686ec707b06770c240db26f6 Mon Sep 17 00:00:00 2001
From: Kendo Bot
Date: Wed, 16 Jul 2025 16:57:00 +0300
Subject: [PATCH 87/97] Added new kb article treelist-paging-pre-selected-node
(#3105)
Co-authored-by: KB Bot
---
.../treelist-paging-pre-selected-node.md | 120 ++++++++++++++++++
1 file changed, 120 insertions(+)
create mode 100644 knowledge-base/treelist-paging-pre-selected-node.md
diff --git a/knowledge-base/treelist-paging-pre-selected-node.md b/knowledge-base/treelist-paging-pre-selected-node.md
new file mode 100644
index 0000000000..fa155129b6
--- /dev/null
+++ b/knowledge-base/treelist-paging-pre-selected-node.md
@@ -0,0 +1,120 @@
+---
+title: How to Initially Display the Page with a Pre-Selected Node in TreeList
+description: Learn how to ensure a pre-selected node is visible by automatically navigating to its page in a Telerik TreeList with pagination enabled.
+type: how-to
+page_title: Navigate to Page Containing Pre-Selected Node in TreeList
+meta_title: Navigate to Page Containing Pre-Selected Node in TreeList
+slug: treelist-kb-paging-pre-selected-node
+tags: treelist, paging, pre-selected, node, navigation, page, size, blazor
+res_type: kb
+ticketid: 1690423
+---
+
+## Environment
+
+
+
+
+
Product
+
TreeList for Blazor
+
+
+
+
+## Description
+
+I have a Telerik [TreeList](slug:treelist-overview) with a checkbox for selection and pagination enabled. I pre-select a node programmatically and need the TreeList to automatically navigate to the page containing the first selected node.
+
+## Solution
+
+To automatically show the page that contains the first pre-selected node in your Telerik TreeList with paging enabled, you need to programmatically set the TreeList's `Page` property based on the index of the selected node in your data.
+
+1. Identify the index of the first selected node in your data source.
+2. Use the PageSize to determine on which page the node appears.
+3. Assign the calculated page number to the TreeList's Page parameter before rendering.
+
+````Razor
+
+
+
+
+
+
+
+
+
+@code {
+ private List TreeListData { get; set; } = new();
+ private IEnumerable SelectedEmployees { get; set; } = Enumerable.Empty();
+ private int PageSize = 10;
+ private int CurrentPage = 1;
+
+ protected override void OnInitialized()
+ {
+ TreeListData = new List();
+
+ for (int i = 1; i <= 59; i++)
+ {
+ TreeListData.Add(new Employee()
+ {
+ Id = i,
+ ParentId = i <= 3 ? null : i % 3 + 1,
+ FirstName = "First " + i,
+ LastName = "Last " + i,
+ Position = i <= 3 ? "Team Lead" : "Software Engineer"
+ });
+ }
+
+ SelectedEmployees = new List() { TreeListData.ElementAt(2) };
+
+ var selectedId = SelectedEmployees.FirstOrDefault()?.Id;
+ if (selectedId != null)
+ {
+ // Step 1: Flatten the tree as it would appear expanded
+ var flatList = new List();
+ foreach (var root in TreeListData.Where(e => e.ParentId == null))
+ {
+ FlattenHierarchy(root, flatList);
+ }
+
+ // Step 2: Find index of selected item in flattened list
+ var index = flatList.FindIndex(e => e.Id == selectedId);
+ if (index >= 0)
+ {
+ CurrentPage = (index / PageSize) + 1;
+ }
+ }
+ }
+
+ private void FlattenHierarchy(Employee node, List result)
+ {
+ result.Add(node);
+ var children = TreeListData.Where(e => e.ParentId == node.Id);
+ foreach (var child in children)
+ {
+ FlattenHierarchy(child, result);
+ }
+ }
+
+ public class Employee
+ {
+ public int Id { get; set; }
+ public int? ParentId { get; set; }
+ public string FirstName { get; set; } = string.Empty;
+ public string LastName { get; set; } = string.Empty;
+ public string Position { get; set; } = string.Empty;
+ }
+}
+````
+
+## See Also
+
+* [TreeList Overview](slug:treelist-overview)
+* [TreeList Paging](slug:treelist-paging)
From 5d1c96ec71fea1aa3745526c618dfa12bb92f94d Mon Sep 17 00:00:00 2001
From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
Date: Thu, 17 Jul 2025 08:37:48 +0300
Subject: [PATCH 88/97] docs(Grid): add highlighting docs (#3100)
* docs(Grid): add highlighting docs
* docs(Grid): apply review recommendations
---
components/grid/highlighting.md | 116 +++++++++++++++++++++++++++++
components/grid/overview.md | 1 +
components/grid/selection/cells.md | 1 +
components/grid/selection/rows.md | 1 +
4 files changed, 119 insertions(+)
create mode 100644 components/grid/highlighting.md
diff --git a/components/grid/highlighting.md b/components/grid/highlighting.md
new file mode 100644
index 0000000000..84b09f5729
--- /dev/null
+++ b/components/grid/highlighting.md
@@ -0,0 +1,116 @@
+---
+title: Highlighting
+page_title: Grid Highlighting
+slug: grid-highlighting
+description: Highlight rows and cells in the Telerik Blazor Grid to draw attention to important data.
+tags: telerik,blazor,grid,highlight,highlighting
+published: true
+position: 40
+---
+
+# Blazor Grid Highlighting
+
+The Telerik Blazor Grid enables you to highlight rows and cells programmatically. Use highlighting to draw attention to important data, indicate status, or visually group related records. Highlighting does not require user interaction and is fully controlled by the application logic.
+
+## Key Features
+
+* Highlight entire rows by providing a list of data items.
+* Highlight individual cells by specifying the data item and column.
+* Combine row and cell highlighting.
+* Highlighting uses a visual style similar to selection, but does not affect selection state or user interaction.
+
+To see the Grid highlighting in action, check the below [example](#example).
+
+## API Reference
+
+The Grid highlighting feature exposes the following parameters:
+
+- `HighlightedItems`—Highlight entire rows by providing the data items to highlight. The list must contain references to items from the grid's data source, not new instances.
+- `HighlightedCells`—Highlight individual cells by specifying both the data item and the column field. Both values must match the Grid data and column definitions.
+
+See [Grid Highlighting API Reference](slug:telerik.blazor.components.gridhighlighting) for details about these parameters and the `GridHighlightedCellDescriptor` type.
+
+## Example
+
+>caption Example of highlighting rows and cells in the Blazor Grid
+
+````RAZOR
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private List GridData { get; set; } = new();
+ private List HighlightedItems { get; set; } = new();
+ private List HighlightedCells { get; set; } = new();
+
+ protected override void OnInitialized()
+ {
+ GenerateData();
+ SetHighlight();
+ }
+
+ private void SetHighlight()
+ {
+ // Highlight 5 items starting from the 3rd item in the data list
+ HighlightedItems = GridData.Skip(2).Take(5).ToList();
+
+ // Highlight specific cells: the ProductName of the first item and Discounted of the second item
+ HighlightedCells = new List
+ {
+ new GridHighlightedCellDescriptor
+ {
+ ColumnField = nameof(Product.ProductName),
+ DataItem = GridData[0]
+ },
+ new GridHighlightedCellDescriptor
+ {
+ ColumnField = nameof(Product.Discontinued),
+ DataItem = GridData[1]
+ }
+ };
+ }
+
+ private void GenerateData()
+ {
+ var random = new Random();
+ for (int i = 1; i <= 20; i++)
+ {
+ GridData.Add(new Product
+ {
+ ProductId = i,
+ ProductName = $"Product {i}",
+ UnitPrice = Math.Round(random.NextDouble() * 100, 2),
+ UnitsInStock = random.Next(1, 100),
+ CreatedAt = DateTime.Now.AddDays(-random.Next(1, 100)),
+ Discontinued = i % 5 == 0
+ });
+ }
+ }
+
+ public class Product
+ {
+ public int ProductId { get; set; }
+ public string ProductName { get; set; } = string.Empty;
+ public double UnitPrice { get; set; }
+ public int UnitsInStock { get; set; }
+ public DateTime CreatedAt { get; set; }
+ public bool Discontinued { get; set; }
+ }
+}
+````
+
+## See Also
+
+* [Grid Selection](slug:grid-selection-overview)
+* [Highlighting API Reference](slug:telerik.blazor.components.gridhighlighting)
\ No newline at end of file
diff --git a/components/grid/overview.md b/components/grid/overview.md
index d8ec87f77f..ff65765d96 100644
--- a/components/grid/overview.md
+++ b/components/grid/overview.md
@@ -154,6 +154,7 @@ The Grid supports custom content in various parts of the component such as data
* [Drag and drop rows](slug:grid-drag-drop-overview)—move rows in a Grid or between different Grids.
* [Loading animation](slug:grid-loading)—show a loading animation to improve user experience during long data operations.
* Scrolling—the Grid will show standard scrollbars automatically if the data does not fit the current component width and height.
+* [Highlighting](slug:grid-highlighting)—highlight rows or cells programmatically to draw attention to important data.
## Grid Parameters
diff --git a/components/grid/selection/cells.md b/components/grid/selection/cells.md
index d57d3fd55e..d90f54bdbe 100644
--- a/components/grid/selection/cells.md
+++ b/components/grid/selection/cells.md
@@ -237,3 +237,4 @@ When using [Grid templates](slug:components/grid/features/templates) with cell s
* [Live Demo: Grid Cell Selection](https://demos.telerik.com/blazor-ui/grid/cell-selection)
* [Blazor Grid](slug:grid-overview)
+* [Grid Highlighting](slug:grid-highlighting)
diff --git a/components/grid/selection/rows.md b/components/grid/selection/rows.md
index 567060fce3..ed3fcef7a0 100644
--- a/components/grid/selection/rows.md
+++ b/components/grid/selection/rows.md
@@ -213,3 +213,4 @@ The Grid clears the `SelectedItems` collection when the user drags and drops sel
* [Live Demo: Grid Row Selection](https://demos.telerik.com/blazor-ui/grid/row-selection)
* [Blazor Grid](slug:grid-overview)
+* [Grid Highlighting](slug:grid-highlighting)
From ad9db84dbe09f68ea3281d7b17727d31a96c0e56 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Thu, 17 Jul 2025 14:16:12 +0300
Subject: [PATCH 89/97] kb(Chart): Add KB for bubble sizing in multiple Charts
(#3117)
---
components/chart/types/bubble.md | 33 +++---
knowledge-base/chart-bubble-size.md | 154 ++++++++++++++++++++++++++++
2 files changed, 175 insertions(+), 12 deletions(-)
create mode 100644 knowledge-base/chart-bubble-size.md
diff --git a/components/chart/types/bubble.md b/components/chart/types/bubble.md
index cafc079f78..f88519b0cf 100644
--- a/components/chart/types/bubble.md
+++ b/components/chart/types/bubble.md
@@ -18,18 +18,17 @@ A Bubble chart is useful for visualizing different scientific relationships (e.g
@[template](/_contentTemplates/chart/link-to-basics.md#understand-basics-and-databinding-first)
-#### To create a bubble chart:
+## Creating a Blazor Bubble Chart
-1. add a `ChartSeries` to the `ChartSeriesItems` collection
-2. set its `Type` property to `ChartSeriesType.Bubble`
-3. provide a data collection to its `Data` property, which contains numerical data for the X and Y axes, and for the bubble size
+To use a Chart component with Bubble series:
+1. Add a `ChartSeries` to the `ChartSeriesItems` collection.
+2. Set its `Type` property to `ChartSeriesType.Bubble`.
+3. Provide a data collection to its `Data` property, which contains numerical data for the X and Y axes, and for the bubble size.
>caption A bubble chart that shows projected population change on a plot of life expectancy versus fertility rate
````RAZOR
-@* Bubble Series *@
-
@@ -90,9 +89,22 @@ A Bubble chart is useful for visualizing different scientific relationships (e.g
new ModelData() { LifeExpectancy = 74.3, FertilityRate = 1.85, PopulationChange = 3000000, Country = "Great Britain" }
};
}
-
````
+## Bubble Sizing
+
+The Chart component determines the physical size of each bubble automatically:
+
+* The maximum bubble size is 20% of the smaller Chart dimension (width or height). This ensures that the largest bubbles do not occupy too much space.
+* The minimum bubble size is 2% of the smaller Chart dimension, but not less than `10px`. This ensures that even the smallest bubbles are perceivable and accessible. The smallest bubble size also depends on the largest `Size` value in the Chart series.
+* All bubble sizes are set proportionately, as long as they comply with the preceding rules.
+
+As a result of the above algorithms:
+
+* Bubble sizing may not be linear if the ratio between the smallest and largest `Size` values is too big. For example, a 10-fold bubble size difference is achievable with a large-enough Chart, but a 100-fold size difference is not supported.
+* The Bubble Chart helps users compare bubble sizes in the same Chart instance, rather than between different instances. To compare bubbles from multiple series, define these series in the same Chart instance.
+
+If you need to [improve the bubble size comparability across several Charts](slug:chart-kb-bubble-size), then use a dummy data item with a `Size` value that matches the maximum `Size` value in all Chart instances.
## Bubble Chart Specific Appearance Settings
@@ -102,10 +114,8 @@ The color of a series is controlled through the `Color` property that can take a
The `ColorField` can change the color of individual items. To use it, pass a valid CSS color to the corresponding field in the model and the chart will use its values instead of the `Color` parameter.
-
@[template](/_contentTemplates/chart/link-to-basics.md#opacity-area-bubble)
-
### Negative Values
Negative values are allowed for the X and Y fields, because they are plotted on standard numerical axes.
@@ -149,12 +159,11 @@ The size field should, generally, have positive values as it correlates to the p
}
````
-
@[template](/_contentTemplates/chart/link-to-basics.md#configurable-nested-chart-settings)
@[template](/_contentTemplates/chart/link-to-basics.md#configurable-nested-chart-settings-numerical)
-
## See Also
- * [Live Demo: Bubble Chart](https://demos.telerik.com/blazor-ui/chart/bubble-chart)
+* [Live Demo: Bubble Chart](https://demos.telerik.com/blazor-ui/chart/bubble-chart)
+* [Configure Relative Bubble Sizes in Multiple Charts](slug:chart-kb-bubble-size)
diff --git a/knowledge-base/chart-bubble-size.md b/knowledge-base/chart-bubble-size.md
new file mode 100644
index 0000000000..3204267031
--- /dev/null
+++ b/knowledge-base/chart-bubble-size.md
@@ -0,0 +1,154 @@
+---
+title: Set Specific Bubble Sizes
+description: Learn how to define bubble sizes in different Charts that users can compare more easily.
+type: how-to
+page_title: How to Set Specific Bubble Sizes
+slug: chart-kb-bubble-size
+tags: telerik, blazor, chart, bubble
+ticketid: 1693133
+res_type: kb
+---
+
+## Environment
+
+
+
+
+
Product
+
Chart for Blazor
+
+
+
+
+## Description
+
+This KB answers the following questions:
+
+* How to display smaller bubbles for smaller values in a specific Telerik Blazor Chart instance?
+* How to help users compare bubble sizes for different data in different Charts?
+* How to display all bubbles with a specific defined `Size` value in certain dimensions?
+* How to use fixed bubble sizes instead of relative?
+
+## Solution
+
+The [Bubble Chart sets the minimum and maximum bubble sizes automatically](slug:components/chart/types/bubble#bubble-sizing), depending on the Chart dimensions, and the smallest and largest `Size` values in all series in the Chart instance.
+
+To display comparable bubble sizes in multiple Charts:
+
+1. Use an additional dummy data item with a `Size` value that matches the largest value in all involved Chart instances.
+1. Hide the dummy bubble:
+ * Set the `Min` or `Max` parameter of `` and ``.
+ * Position the bubble outside the visible Chart area (viewport).
+
+>caption Use comparable bubble sizes in several Charts
+
+````RAZOR
+
Hundreds
+
+
An additional bubble with Size3000 is positioned outside the visible Chart area.
+
+
+
+
+
+
+
+
+
+
+ @{ var dataItem = (BubbleModel)context.DataItem; }
+ @dataItem.Size
+
+
+
+
+@code {
+ private List SeriesData1 = new List() {
+ new BubbleModel() { X = 50, Y = 100, Size = 100 },
+ new BubbleModel() { X = 150, Y = 200, Size = 200 },
+ new BubbleModel() { X = 250, Y = 300, Size = 300 },
+
+ // Size matches the max Size value in SeriesData2
+ new BubbleModel() { X = -100, Y = -100, Size = 3000 }
+ };
+
+ private List SeriesData2 = new List() {
+ new BubbleModel() { X = 100, Y = 50, Size = 1000 },
+ new BubbleModel() { X = 200, Y = 150, Size = 2000 },
+ new BubbleModel() { X = 300, Y = 250, Size = 3000 }
+ };
+
+ public class BubbleModel
+ {
+ public int X { get; set; }
+ public int Y { get; set; }
+ public int Size { get; set; }
+ }
+}
+````
+
+## See Also
+
+* [Bubble Chart](slug:components/chart/types/bubble)
From a97dfb53d746b5976200b88ee48a23e46c5d60f7 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Thu, 17 Jul 2025 14:16:41 +0300
Subject: [PATCH 90/97] docs(TabStrip): Clarify new event availability (#3116)
---
components/tabstrip/events.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/components/tabstrip/events.md b/components/tabstrip/events.md
index 4f29d6340a..4a2ee8522c 100644
--- a/components/tabstrip/events.md
+++ b/components/tabstrip/events.md
@@ -17,7 +17,7 @@ This article explains the events available in the Telerik TabStrip for Blazor:
## ActiveTabIdChanged
-The `ActiveTabIdChanged` event fires when the user changes the active tab. The event handler receives the new tab ID of type `string` as an argument. If the `Id` parameter of the `TabStripTab` is not set, the component will generate one automatically.
+The `ActiveTabIdChanged` event was added in [version 9.0.0](https://www.telerik.com/support/whats-new/blazor-ui/release-history/telerik-ui-for-blazor-9-0-0-(2025-q2)). It fires when the user changes the active tab. The event handler receives the new tab ID of type `string` as an argument. If the `Id` parameter of the `TabStripTab` is not set, the component will generate one automatically.
The `ActiveTabIdChanged` event is designed to work with the new [`ActiveTabId` parameter](slug:tabstrip-tabs-collection).
From 5a4d1770b5d7a4150bb00a7df535bfe56ee28b04 Mon Sep 17 00:00:00 2001
From: Hristian Stefanov <72554148+xristianstefanov@users.noreply.github.com>
Date: Thu, 17 Jul 2025 15:08:25 +0300
Subject: [PATCH 91/97] docs(PdfViewer): add form filling docs (#3098)
* docs(PdfViewer): add form filling docs
* chore(PdfViewer): apply suggestions as per comments
---
components/pdfviewer/form-filling.md | 33 ++++++++++++++++++++++++++++
components/pdfviewer/overview.md | 6 +++++
2 files changed, 39 insertions(+)
create mode 100644 components/pdfviewer/form-filling.md
diff --git a/components/pdfviewer/form-filling.md b/components/pdfviewer/form-filling.md
new file mode 100644
index 0000000000..4980b39526
--- /dev/null
+++ b/components/pdfviewer/form-filling.md
@@ -0,0 +1,33 @@
+---
+title: Form Filling
+page_title: PDFViewer - Form Filling
+meta_title: Form Filling | PDFViewer for Blazor
+position: 17
+description: "Enable users to fill and submit PDF forms in the Blazor PDFViewer."
+tags: telerik,blazor,pdfviewer,form filling,forms
+slug: pdfviewer-form-filling
+---
+
+# Form Filling
+
+The PDFViewer enables users to fill interactive forms directly in PDF documents. You can display and edit form fields such as text boxes, checkboxes, radio buttons, and dropdowns.
+
+## Supported Form Fields
+
+The PDFViewer supports the following form field types:
+
+* `TextBox`
+* `CheckBox`
+* `RadioButton`
+* `DropdownList`
+* `ListBox`
+* `Button`
+
+>caption Edit form fields and download the updated PDF file
+
+
+
+## See Also
+
+* [PDFViewer Overview](slug:pdfviewer-overview)
+* [PDFViewer Events](slug:pdfviewer-events)
diff --git a/components/pdfviewer/overview.md b/components/pdfviewer/overview.md
index 1b62e3f6b3..86e2dc562d 100644
--- a/components/pdfviewer/overview.md
+++ b/components/pdfviewer/overview.md
@@ -63,6 +63,10 @@ The [PdfViewer toolbar can render built-in and custom tools](slug:pdfviewer-tool
The PdfViewer provides a built-in option for creating and editing annotations. Explore the [available annotation types and how to work with them](slug:pdfviewer-annotations).
+## Form Filling
+
+The PdfViewer supports interactive form filling in PDF documents. You can display and edit form fields such as text boxes, checkboxes, radio buttons, and dropdowns. For more details and examples, see the [Form Filling documentation](slug:pdfviewer-form-filling).
+
## Large File Support
In Blazor **Server** apps, the PDF Viewer uses the **SignalR WebSocket** to:
@@ -81,6 +85,7 @@ The table below lists the PDF Viewer parameters. Also check the [PDF Viewer API
| Parameter | Type and Default Value | Description |
| --- | --- | --- |
+| `AnnotationMode` | `PdfViewerAnnotationMode` (`Disable`) | Specifies how the PDFViewer handles [form fields](slug:pdfviewer-form-filling) in the loaded document. |
| `Class` | `string` | An additional CSS class for the `
` element. Use it to [customize the component styles and override the theme](slug:themes-override). |
| `Data` | `byte[]` | The source of the currently displayed PDF file. |
| `EnableLoaderContainer` | `bool` (`true`) | Determines if the PDF Viewer will show a loading animation during opening, downloading or zooming a PDF file. |
@@ -100,6 +105,7 @@ The PdfViewer exposes methods for programmatic operation. To use them, define a
| --- | --- |
| `Print` | Prints the loaded PDF document as an alternative to the [built-in Print button in the PDF Viewer toolbar](slug:pdfviewer-toolbar#built-in-tools). |
| `Rebind` | Refreshes the PDF Viewer and ensures it is displaying the latest file `Data`. [`Rebind` is necessary when the Blazor framework cannot re-render components automatically](slug:common-features-data-binding-overview#refresh-data). |
+| `GetFileAsync` | Asynchronously retrieves the current PDF file data as a byte array, including any annotations or form filling changes. Returns a `Task`. Returns `null` if no document is loaded. |
>caption PDF Viewer reference and method usage
From f24c611106062e208e168db9b7887d22868d47fe Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Tue, 22 Jul 2025 16:07:09 +0300
Subject: [PATCH 92/97] docs(AI): FIx MCP links for Cursor (#3122)
* docs(AI): FIx links
* Update ai/mcp-server.md
---
ai/mcp-server.md | 8 +++-----
1 file changed, 3 insertions(+), 5 deletions(-)
diff --git a/ai/mcp-server.md b/ai/mcp-server.md
index 19da38ca08..cd1e312d1b 100644
--- a/ai/mcp-server.md
+++ b/ai/mcp-server.md
@@ -44,7 +44,7 @@ You also need to add your [Telerik licence key](slug:installation-license-key) a
For detailed instructions, refer to [Use MCP servers in Visual Studio](https://learn.microsoft.com/en-us/visualstudio/ide/mcp-servers).
-> Visual Studio 17.14 seems to require the Copilot Chat window to be open and active when you open a solution. Otherwise the Telerik MCP server is not used.
+> Early Visual Studio `17.14....` versions require the Copilot Chat window to be open and active when you open a solution. Otherwise the Telerik MCP server is not used.
To enable the Telerik MCP Server in a specific Blazor app, add a `.mcp.json` file to the solution folder.
@@ -117,9 +117,9 @@ To [add the Telerik MCP Server globally for VS Code, edit the VS Code `settings.
### Cursor
-For detailed instructions, refer to [Model Context Protocol](https://docs.cursor.com/context/model-context-protocol).
+For detailed instructions, refer to [Model Context Protocol](https://docs.cursor.com/context/mcp).
-To [enable the Telerik MCP Server in a specific workspace](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server-to-your-workspace) or Blazor app, add a `.cursor` folder with an `mcp.json` file at the root of the workspace.
+To [enable the Telerik MCP Server in a specific workspace, Blazor app, or globally](https://docs.cursor.com/context/mcp#using-mcp-json), add a `.cursor` folder with an `mcp.json` file at the root of the workspace, app, or your user folder, respectively.
>caption .cursor/mcp.json
@@ -138,8 +138,6 @@ To [enable the Telerik MCP Server in a specific workspace](https://code.visualst
}
````
-To [add the Telerik MCP Server globally for Cursor](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server-to-your-user-settings), add a `.cursor` folder with the above `mcp.json` file in your user folder.
-
## Usage
To use the Telerik MCP Server:
From c9aa2a2368f8f24cd7c079cde081850ef4c74e23 Mon Sep 17 00:00:00 2001
From: Hristian Stefanov <72554148+xristianstefanov@users.noreply.github.com>
Date: Thu, 24 Jul 2025 16:00:18 +0300
Subject: [PATCH 93/97] chore(DockManager): remove non-existing parameter
(#3126)
---
components/dockmanager/overview.md | 1 -
1 file changed, 1 deletion(-)
diff --git a/components/dockmanager/overview.md b/components/dockmanager/overview.md
index bfa6c429c2..6853d7aff4 100644
--- a/components/dockmanager/overview.md
+++ b/components/dockmanager/overview.md
@@ -120,7 +120,6 @@ The following table lists the Dock Manager parameters. Also check the [DockManag
| Parameter | Type and Default Value | Description |
| --- | --- | --- |
| `AllowFloat` | `bool` (`false`) | Determines whether the pane can be dragged from the dock manager layout to create a new floating pane. |
-| `AllowInnerDock` | `bool` (`true`) | Restricts from performing inner docking within the specified pane. Inner docking is an operation that allows dropping one pane over another, creating a TabGroupPane (TabStrip). |
| `Class` | `string` | The custom CSS class of the `
` element. Use it to [override theme styles](slug:themes-override). |
| `Closeable` | `bool` (`false`) | Determines whether the pane can be closed. |
| `Dockable` | `bool` (`false`) | Specifies whether the pane allows other panes to be docked to or over it. This determines if the end user can drop other panes over it or next to it, creating a DockManagerSplitPane (Splitter) or a DockManagerTabGroupPane (TabStrip). |
From 90aa3ae290d125a341e2511ca1096c97487c93e8 Mon Sep 17 00:00:00 2001
From: Kendo Bot
Date: Thu, 24 Jul 2025 16:00:48 +0300
Subject: [PATCH 94/97] Added new kb article radiogroup-readonly (#3104)
Co-authored-by: KB Bot
---
knowledge-base/radiogroup-readonly.md | 78 +++++++++++++++++++++++++++
1 file changed, 78 insertions(+)
create mode 100644 knowledge-base/radiogroup-readonly.md
diff --git a/knowledge-base/radiogroup-readonly.md b/knowledge-base/radiogroup-readonly.md
new file mode 100644
index 0000000000..27c39aea45
--- /dev/null
+++ b/knowledge-base/radiogroup-readonly.md
@@ -0,0 +1,78 @@
+---
+title: Readonly RadioGroup
+description: Learn how to make the Telerik RadioGroup for Blazor readonly without graying out the text.
+type: how-to
+page_title: How to Customize Telerik RadioGroup for Blazor to Be Readonly Without Graying Out
+meta_title: How to Customize Telerik RadioGroup for Blazor to Be Readonly Without Graying Out
+slug: radiogroup-kb-readonly
+tags: radiogroup, blazor, readonly
+res_type: kb
+ticketid: 1690650
+---
+
+## Environment
+
+
+
+
+
Product
+
RadioGroup for Blazor
+
+
+
+
+## Description
+
+I want to make the [RadioGroup](slug:radiogroup-overview) readonly but keep the text visually clear (not grayed out). Using the `Enabled` property disables the input entirely but also makes the text and radio buttons gray, which reduces readability.
+
+## Solution
+
+To make the TelerikRadioGroup readonly without graying out the text, use the following CSS approach:
+
+````Razor
+
+
+Chosen delivery method: @(ChosenDeliveryMethod == 0 ? "no selection yet" : ChosenDeliveryMethod.ToString())
+
+
+
+
+
+@code {
+ private int ChosenDeliveryMethod { get; set; }
+
+ private List DeliveryOptions { get; set; } = new List
+ {
+ new DeliveryMethodModel { MethodId = 1, MethodText = "Standard Shipping" },
+ new DeliveryMethodModel { MethodId = 2, MethodText = "Express Shipping" },
+ new DeliveryMethodModel { MethodId = 3, MethodText = "In-Store Pickup" },
+ new DeliveryMethodModel { MethodId = 4, MethodText = "Curbside Pickup" },
+ };
+
+ public class DeliveryMethodModel
+ {
+ public int MethodId { get; set; }
+ public string MethodText { get; set; }
+ }
+}
+````
+
+## See Also
+
+* [RadioGroup Documentation](slug:radiogroup-overview)
+* [CSS pointer-events Property](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events)
+* [RadioGroup Binding](slug:radiogroup-databind)
From f5fec1d53fea79e4dc42652f894f252762b40c41 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Fri, 25 Jul 2025 10:50:36 +0300
Subject: [PATCH 95/97] docs(Common): Clarify multi-project setup to avoid a
license banner (#3129)
* docs(Common): Clarify multi-project setup to avoid a license banner
* Update installation/license-key.md
---
installation/license-key.md | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/installation/license-key.md b/installation/license-key.md
index 2aa392a861..083d7913f3 100644
--- a/installation/license-key.md
+++ b/installation/license-key.md
@@ -66,18 +66,18 @@ The new license key includes information about all previous purchases. This proc
Telerik UI for Blazor may be used in a referenced project in a multi-project app, for example:
* In the **Client** project of a Blazor Web App with **WebAssembly** or **Auto** render mode.
-* In a Razor class library project, which is used by a main web project.
+* In a Razor class library (RCL) project, which is used by another web or RCL project.
In such cases, you may see a yellow banner in the browser, which says "We couldn't verify your license key for Telerik UI for Blazor. Please see the build log for details and resolution steps".
There are two alternative ways to avoid the warning banner:
-* Set `PrivateAssets="none"` to the Telerik UI for Blazor NuGet package registration tag.
+* Set `PrivateAssets="none"` to the Telerik UI for Blazor NuGet package registration tag. This approach is applicable only if the main (startup) app project directly references the project that includes Telerik UI for Blazor.
````XML.skip-repl
````
-* Reference the `Telerik.Licensing` package explicitly in all projects that reference other projects with Telerik packages. You can use the same version that is referenced by the `Telerik.UI.for.Blazor` NuGet package, or a newer version.
+* Reference the `Telerik.Licensing` NuGet package explicitly in the main (startup) app project. This approach is required if you are using Telerik UI for Blazor in a project hierarchy with more than two levels. For example, the main (startup) app project A references a Razor Class Library (RCL) project B, which references RCL project C that includes Telerik UI for Blazor. You can use the same `Telerik.Licensing` version that is referenced by `Telerik.UI.for.Blazor`, or a newer version.
````XML.skip-repl
From 842bc941f830169856f7d2233f1b2965bf000ac2 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Fri, 25 Jul 2025 11:08:39 +0300
Subject: [PATCH 96/97] docs(AI): Revamp VS Code MCP information (#3125)
* docs(AI): Revamp VS Code MCP information
* continued
* Update ai/mcp-server.md
* Update mcp-server.md
---
ai/mcp-server.md | 33 +++++++++++++--------------------
1 file changed, 13 insertions(+), 20 deletions(-)
diff --git a/ai/mcp-server.md b/ai/mcp-server.md
index cd1e312d1b..4265d3e1aa 100644
--- a/ai/mcp-server.md
+++ b/ai/mcp-server.md
@@ -17,7 +17,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 [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 highly 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).
* A [Blazor application that includes Telerik UI for Blazor](slug:blazor-overview#getting-started).
@@ -34,6 +34,7 @@ Use the documentation of your AI-powered MCP client to add the Telerik MCP serve
> * Do not use hyphens (`-`) or underscores (`_`) in the MCP server name in the MCP `.json` file, due to potential compatibility issues with some MCP clients such as Visual Studio or Windsurf.
> * Some MCP clients expect the MCP servers to be listed under a `servers` JSON key, while others expect `mcpServers`.
+> * Some MCP clients expect an `mcp.json` file, while others like Visual Studio 2022 expect an `.mcp.json` file.
You also need to add your [Telerik licence key](slug:installation-license-key) as an `env` parameter in the `mcp.json` file. There are two options:
@@ -44,11 +45,11 @@ You also need to add your [Telerik licence key](slug:installation-license-key) a
For detailed instructions, refer to [Use MCP servers in Visual Studio](https://learn.microsoft.com/en-us/visualstudio/ide/mcp-servers).
-> Early Visual Studio `17.14....` versions require the Copilot Chat window to be open and active when you open a solution. Otherwise the Telerik MCP server is not used.
+> Early Visual Studio 17.14 versions require the Copilot Chat window to be open and active when you open a solution. Otherwise the Telerik MCP server is not used.
To enable the Telerik MCP Server in a specific Blazor app, add a `.mcp.json` file to the solution folder.
-> caption .mcp.json
+>caption .mcp.json
````JSON.skip-repl
{
@@ -73,9 +74,13 @@ To enable global automatic discovery of the Telerik MCP Server in Visual Studio,
For detailed instructions, refer to [Use MCP servers in VS Code](https://code.visualstudio.com/docs/copilot/chat/mcp-servers).
-To enable the Telerik MCP Server in a specific workspace or Blazor app, add a `.vscode` folder with an `mcp.json` file at the root of the workspace:
+> This section applies to VS Code 1.102.1 and newer versions.
->caption .vscode/mcp.json at the workspace root
+Make sure that [`chat.mcp.enabled`](vscode://settings/chat.mcp.enabled) is enabled in the VS Code settings.
+
+To enable the Telerik MCP Server in a specific [workspace](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server-to-your-workspace), Blazor app, or [globally](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server-to-your-user-configuration), add a `.vscode` folder with an `mcp.json` file at the root of the workspace, app, or your user folder, respectively.
+
+>caption .vscode/mcp.json
````JSON.skip-repl
{
@@ -92,26 +97,14 @@ To enable the Telerik MCP Server in a specific workspace or Blazor app, add a `.
}
````
-To [add the Telerik MCP Server globally for VS Code, edit the VS Code `settings.json` file](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server-to-your-user-settings):
+To use the Telerik MCP server in all workspaces and apps, make sure that [`chat.mcp.discovery.enabled`](vscode://settings/chat.mcp.discovery.enabled) is enabled in [`settings.json`](https://code.visualstudio.com/docs/configure/settings#_settings-json-file).
>caption VS Code settings.json
````JSON.skip-repl
{
- // ...
- "chat.mcp.discovery.enabled": true,
- "mcp": {
- "servers": {
- "telerikBlazorAssistant": {
- "type": "stdio",
- "command": "npx",
- "args": ["-y", "@progress/telerik-blazor-mcp@latest"],
- "env": {
- "TELERIK_LICENSE_PATH": "C:\\Users\\___\\AppData\\Roaming\\Telerik\\telerik-license.txt"
- }
- }
- }
- }
+ // ...
+ "chat.mcp.discovery.enabled": true,
}
````
From 06ab5092b75950d5916c87683e9abad425e210a1 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Fri, 25 Jul 2025 16:58:06 +0300
Subject: [PATCH 97/97] docs(Dialog): Replace deprecated Filter event in the
integration example (#3131)
* docs(Dialog): Update integration example with Filter
* checkbox letter casing
---
components/dialog/integration.md | 57 +++++++++++++++-----------------
1 file changed, 27 insertions(+), 30 deletions(-)
diff --git a/components/dialog/integration.md b/components/dialog/integration.md
index d0ab313db3..1f627edfdc 100644
--- a/components/dialog/integration.md
+++ b/components/dialog/integration.md
@@ -19,15 +19,15 @@ This article contains the following examples:
* [Checkbox integration in Dialog](#checkbox-in-a-dialog)
* [Filter integration in Dialog](#filter-in-a-dialog)
-## Checkbox in a Dialog
+## CheckBox in a Dialog
-To integrate the Checkbox in the Dialog:
+To use a CheckBox component in the Dialog:
-1. Include the [Telerik Checkbox](slug:checkbox-overview) as `DialogContent`.
-1. Set the [`Value` parameter](slug:checkbox-overview#checkbox-parameters) of the Checkbox via two-way binding.
-1. Invoke the Dialog's `Refresh` method in the [`OnChange` event](slug:checkbox-events#onchange) of the Checkbox.
+1. Include the [Telerik CheckBox](slug:checkbox-overview) as `DialogContent`.
+1. Set the [`Value` parameter](slug:checkbox-overview#checkbox-parameters) of the CheckBox with two-way binding.
+1. Invoke the [Dialog `Refresh` method](slug:dialog-overview#dialog-reference-and-methods) in the [CheckBox `OnChange` event](slug:checkbox-events#onchange).
->caption Using Checkbox in Dialog
+>caption Using CheckBox in Dialog
````RAZOR
@using Telerik.DataSource
@@ -53,50 +53,47 @@ To integrate the Checkbox in the Dialog:
## Filter in a Dialog
-To integrate the Filter in the Dialog:
+To use a Filter component in the Dialog:
-1. Include the [Telerik Filter](slug:filter-overview) as `DialogContent`.
-1. Set the [`Value` parameter](slug:filter-overview#filter-parameters) of the Filter via one-way binding.
-1. Invoke the Dialog's `Refresh` method in the [`ValueChanged` event](slug:filter-events#valuechanged) of the Filter.
-1. Update the `Value` parameter of the Filter manually in the `ValueChanged` event of the Filter.
+1. Include the [Telerik Filter](slug:filter-overview) inside ``.
+1. Set the [`Value` parameter](slug:filter-overview#filter-parameters) of the Filter with one-way binding.
+1. Invoke the [Dialog `Refresh` method](slug:dialog-overview#dialog-reference-and-methods) in the [Filter `OnUpdate` event](slug:filter-events#onupdate).
>caption Using Filter in Dialog
````RAZOR
@using Telerik.DataSource
-
+
-
+
-
-
-
+
+
+
+
@code {
- private TelerikDialog DialogRef { get; set; }
+ private TelerikDialog? DialogRef { get; set; }
- private TelerikFilter FilterRef { get; set; }
+ private CompositeFilterDescriptor FilterValue { get; set; } = new();
- private CompositeFilterDescriptor Value { get; set; } = new CompositeFilterDescriptor();
-
- private void OnValueChanged(CompositeFilterDescriptor filter)
+ private void OnFilterUpdate()
{
- Value = filter;
- DialogRef.Refresh();
+ DialogRef?.Refresh();
}
- public class Person
+ public class Product
{
- public int EmployeeId { get; set; }
-
- public string Name { get; set; }
-
- public int AgeInYears { get; set; }
+ public int Id { get; set; }
+ public string Name { get; set; } = string.Empty;
+ public decimal Price { get; set; }
+ public int Quantity { get; set; }
+ public bool Discontinued { get; set; }
}
}
-````
\ No newline at end of file
+````
pFad - Phonifier reborn
Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.