From 24d8370d5035bfa5d835fa67196fba064128eebc Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Fri, 27 Jun 2025 11:07:23 +0300 Subject: [PATCH 01/39] docs(Grid): typo (#3068) --- components/grid/editing/inline.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/grid/editing/inline.md b/components/grid/editing/inline.md index 96490aee54..a3ff818a1b 100644 --- a/components/grid/editing/inline.md +++ b/components/grid/editing/inline.md @@ -37,7 +37,7 @@ Inline add, edit, and delete operations use the following [command buttons](slug In inline edit mode, the Grid commands execute row by row and the corresponding [Grid events](slug:grid-editing-overview#events) also fire row by row. This is similar to [popup editing](slug:grid-editing-popup) and unlike [in-cell editing](slug:grid-editing-incell), where commands and events relate to cells. -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. +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. ## Integration with Other Features From 710ba156e0472d33673408db97b04577918b7443 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Fri, 27 Jun 2025 11:07:38 +0300 Subject: [PATCH 02/39] docs(Scheduler): Remove unnecessary code (#3066) --- components/scheduler/recurrence.md | 1 - 1 file changed, 1 deletion(-) diff --git a/components/scheduler/recurrence.md b/components/scheduler/recurrence.md index 520933e4e6..d2d52de271 100644 --- a/components/scheduler/recurrence.md +++ b/components/scheduler/recurrence.md @@ -213,7 +213,6 @@ A single Scheduler data item defines one series of recurring appointments. Set t public Appointment() { - var rand = new Random(); Id = Guid.NewGuid(); } } From e2827684a46bd93ccfc198a626990a549ef49d49 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Mon, 30 Jun 2025 11:58:09 +0300 Subject: [PATCH 03/39] kb(ComboBox): Word polishing (#3072) * kb(ComboBox): Word polishing * Update knowledge-base/combobox-auto-select-on-blur.md --- knowledge-base/combobox-auto-select-on-blur.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/knowledge-base/combobox-auto-select-on-blur.md b/knowledge-base/combobox-auto-select-on-blur.md index f8e2d7e3a0..687824178b 100644 --- a/knowledge-base/combobox-auto-select-on-blur.md +++ b/knowledge-base/combobox-auto-select-on-blur.md @@ -1,8 +1,8 @@ --- -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. +title: Select Focused Dropdown Item on Tab +description: Learn how to configure the Telerik ComboBox for Blazor to automatically select the first matching item when the user tabs and the component loses focus. type: how-to -page_title: How to Automatically Select Preselected Item on Blur +page_title: How to Automatically Select the Focused Dropdown Item on Tab slug: combobox-kb-autoselect-on-blur tags: telerik, blazor, combobox, blur, auto-select res_type: kb @@ -29,6 +29,7 @@ The article asnwers to the following question: * 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. @@ -182,4 +183,4 @@ To automatically select the first matching item in the ComboBox when the input l ```` ## See Also -- [ComboBox Events](slug:components/combobox/events) +* [ComboBox Events](slug:components/combobox/events) From 9ac7f6ef2bf568f66f86fd312c551db7f455db6e Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Mon, 30 Jun 2025 12:53:21 +0300 Subject: [PATCH 04/39] docs(Scheduler): Document a bug (#3067) * docs(Scheduler): Document a bug * Apply suggestion from @dimodi --- components/scheduler/recurrence.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/scheduler/recurrence.md b/components/scheduler/recurrence.md index d2d52de271..e1f09181fe 100644 --- a/components/scheduler/recurrence.md +++ b/components/scheduler/recurrence.md @@ -30,7 +30,7 @@ You can also [define custom property names](slug:scheduler-appointments-databind * `RecurrenceExceptionsField` * `RecurrenceIdField` -A single Scheduler data item defines one series of recurring appointments. Set the `RecurrenceRule` value, according to the [RFC5545 standard](https://tools.ietf.org/html/rfc5545#section-3.3.10). Then, if exceptions to the recurrence rule exist: +A single Scheduler data item defines one series of recurring appointments. Set the `RecurrenceRule` value, according to the [RFC5545 standard](https://tools.ietf.org/html/rfc5545#section-3.3.10), except for a [known discrepancy with extra hyphens in `UNTIL`](https://feedback.telerik.com/blazor/1529000-recurrencerule-does-not-support-the-rfc5545-date-format-like-20210722t000000). Then, if exceptions to the recurrence rule exist: * Each exception must be a separate data item. * The `RecurrenceId` property of each exception must be equal to `Id` value of the recurring appointment. From 8a9794a94c6369f63193a6feb71213ec9a81ba79 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Mon, 30 Jun 2025 12:53:43 +0300 Subject: [PATCH 05/39] docs(MultiSelect): Polish basic example (#3071) --- components/multiselect/overview.md | 70 ++++++++++++++++++------------ 1 file changed, 43 insertions(+), 27 deletions(-) diff --git a/components/multiselect/overview.md b/components/multiselect/overview.md index 29c438c9ee..734da0ac2b 100644 --- a/components/multiselect/overview.md +++ b/components/multiselect/overview.md @@ -14,47 +14,63 @@ The Blaz ## Creating MultiSelect -1. Use the `TelerikMultiSelect` tag to add the component to your razor page. +1. Add the `TelerikMultiSelect` tag to your razor page. +1. [Bind the `Data` parameter to the collection of objects or strings](slug:multiselect-databind) that you want to appear in the dropdown. +1. Set the `TextField` parameter to point to the object property that holds the user-readable value. +1. Set the `ValueField` parameter to point to the object property that holds the data item value. +1. [Bind the `Value` of the component](slug:get-started-value-vs-data-binding#value-binding) to a collection of the same type as the type defined by the `ValueField` parameter. +1. (optional) Configure additional features like `AutoClose`, `Placeholder`, or `ShowClearButton`. -1. Populate the `Data` property with the collection of items that you want to appear in the dropdown. - -1. [Bind the value of the component](slug:get-started-value-vs-data-binding#value-binding) to a collection of the same type as the type defined in the `ValueField` parameter. - -1. (Optional) Enable features like placeholder text, clear button, and AutoClose. - ->caption MultiSelect two-way value binding, main features, and simple [data binding](slug:multiselect-databind) +>caption Basic Blazor MultiSelect two-way value binding, main features, and simple [data binding](slug:multiselect-databind) ````RAZOR -@* Main features and simple data binding for the suggestions and the Value *@ + @bind-Value="@MultiSelectValues" + TextField="@nameof(Country.Name)" + ValueField="@nameof(Country.Id)" + AutoClose="false" + Placeholder="Select Balkan Countries" + ShowClearButton="true"> -@if (Values.Count > 0) + +@if (MultiSelectValues.Count > 0) { } @code { - List Countries { get; set; } = new List(); - List Values { get; set; } = new List(); + private List Countries { get; set; } = new(); + private List MultiSelectValues { get; set; } = new(); + protected override void OnInitialized() { - Countries.Add("Albania"); - Countries.Add("Bosnia & Herzegovina"); - Countries.Add("Bulgaria"); - Countries.Add("Croatia"); - Countries.Add("Kosovo"); - Countries.Add("North Macedonia"); - Countries.Add("Montenegro"); - Countries.Add("Serbia"); - Countries.Add("Slovenia"); - base.OnInitialized(); + Countries.Add(new(1, "Albania")); + Countries.Add(new(2, "Bosnia and Herzegovina")); + Countries.Add(new(3, "Bulgaria")); + Countries.Add(new(4, "Croatia")); + Countries.Add(new(5, "Greece")); + Countries.Add(new(6, "Kosovo")); + Countries.Add(new(7, "Montenegro")); + Countries.Add(new(8, "Romania")); + Countries.Add(new(9, "Serbia")); + Countries.Add(new(10, "Slovenia")); + Countries.Add(new(11, "Turkey")); + } + + public class Country + { + public int Id { get; set; } + public string Name { get; set; } = string.Empty; + + public Country(int id, string name) + { + Id = id; + Name = name; + } } } ```` From 8a7fe9d60803f58c8601b613c339a884f381eaf7 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Wed, 2 Jul 2025 13:35:02 +0300 Subject: [PATCH 06/39] kb(PdfViewer): Add CVE KB (#3077) * kb(PdfViewer): Add CVE KB * Update knowledge-base/pdfviewer-xss-vulnerability-cve-2025-6725.md --- ...fviewer-xss-vulnerability-cve-2025-6725.md | 54 +++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 knowledge-base/pdfviewer-xss-vulnerability-cve-2025-6725.md diff --git a/knowledge-base/pdfviewer-xss-vulnerability-cve-2025-6725.md b/knowledge-base/pdfviewer-xss-vulnerability-cve-2025-6725.md new file mode 100644 index 0000000000..0ef9871616 --- /dev/null +++ b/knowledge-base/pdfviewer-xss-vulnerability-cve-2025-6725.md @@ -0,0 +1,54 @@ +--- +title: PDF Viewer Cross-site Scripting (XSS) Vulnerability (2025-6725) +description: How to mitigate CVE-2025-6725, a Cross-site Scripting (XSS) vulnerability in the Telerik PDF Viewer for Blazor. +type: troubleshooting +page_title: PDF Viewer Cross-site Scripting (XSS) Vulnerability (2025-6725) +slug: pdfviewer-kb-xss-vulnerability-cve-2025-6725 +tags: telerik, blazor, pdfviewer, vulnerability, xss +ticketid: 1689311 +res_type: kb +--- + +## Environment + + + + + + + + + + + + +
ProductPDF Viewer for Blazor
VersionFrom 3.6.0 to 9.0.0
+ +## Description + +This is a security notification that explains how to mitigate a cross-site scripting (XSS) vulnerability [CVE-2025-6725](https://www.cve.org/CVERecord?id=CVE-2025-6725) in the Telerik PDF Viewer component for Blazor. + +* The weakness ID is [CWE-79: Improper Neutralization of Input During Web Page Generation ('Cross-site Scripting')](https://cwe.mitre.org/data/definitions/79.html). +* The vulnerability CVSS score is `5.4` (medium). + +The XSS vulnerability can be exploited if a specially-crafted document is already loaded and the user engages with a tool that requires the DOM in the PDF Viewer to re-render. + +## Solution + +If your Blazor app uses the Telerik PDF Viewer, then [upgrading Telerik UI for Blazor](slug:upgrade-tutorial) to version **9.1.0** or later is strongly recommended. + +All customers with a Telerik license can: + +* Access the [Downloads page in their Telerik account](https://www.telerik.com/account/downloads/product-download). +* Reference [NuGet packages on the Telerik NuGet server](slug:installation/nuget). + +## Notes + +* If you do not use the PDF Viewer in your application, the application is not vulnerable. +* If you have any questions or concerns related to this issue, [open a new technical support ticket from the Telerik Support Center](https://www.telerik.com/account/support-center/contact-us/). Technical support is available to customers with an active license and support plan. +* We would like to thank Harmen van Keimpema for responsibly disclosing this vulnerability. + +## See Also + +* [CVE-2025-6725](https://www.cve.org/CVERecord?id=CVE-2025-6725) +* [PDF Viewer Overview](slug:pdfviewer-overview) From 3fc63a49d63532ef0f7797834f3ea9f31f1854a7 Mon Sep 17 00:00:00 2001 From: IvanDanchev Date: Wed, 2 Jul 2025 06:36:22 -0400 Subject: [PATCH 07/39] kb(Gantt): add Gantt TreeList width persistance kb (#3061) * kb(Gantt): add Gantt TreeList width persistance kb * kb(Gantt): add PR review suggestions --- ...tt-persist-treelist-width-after-refresh.md | 210 ++++++++++++++++++ 1 file changed, 210 insertions(+) create mode 100644 knowledge-base/gantt-persist-treelist-width-after-refresh.md diff --git a/knowledge-base/gantt-persist-treelist-width-after-refresh.md b/knowledge-base/gantt-persist-treelist-width-after-refresh.md new file mode 100644 index 0000000000..169c7c23a0 --- /dev/null +++ b/knowledge-base/gantt-persist-treelist-width-after-refresh.md @@ -0,0 +1,210 @@ +--- +title: Persist Gantt TreeList after Refresh +description: How to persist the width of the Gantt's treelist after refreshing its data? +type: how-to +page_title: How to Display Model Fields in the Gantt Tooltip? +slug: gantt-kb-persist-treelist-width-after-refresh +tags: gantt, blazor, treelist, width +res_type: kb +ticketid: 1690467 +--- + +## Environment + + + + + + + +
ProductGantt for Blazor
+ +## Description + +If I resize the TreeList part of the Gantt, it gets back to its initial width, after I refresh the Gantt's data. How can I persist the current TreeList width? + +## Solution + +To persist the current TreeList width, follow the steps below: + +1. Bind the `TreeListWidth` parameter of the Gantt to a property. In the example below, the property is named `ListWidth`. +2. In the methods that manipulate the data of the Gantt (`AddRootTask` and `RemoveTask`), use JavaScript interop to invoke a function. The logic in the function gets and returns the current width of the TreeList. +3. Use the current width value to update the value of the `ListWidth` property, before refreshing the data by calling `.Rebind()`. + +````RAZOR +@inject IJSRuntime JS + +Add root task + +Remove Task 1 + + + + + + + + + + + + + + + + + + + + + +@code { + private TelerikGantt? GanttRef { get; set; } + private string ListWidth { get; set; } = "390px"; + private int LastId { get; set; } = 1; + private List GanttData { get; set; } + private GanttView SelectedView { get; set; } = GanttView.Week; + + private async Task AddRootTask() + { + var i = GanttData.Last().Id + 1; + + GanttData.Insert(0, new FlatModel() + { + Id = i, + ParentId = null, + Title = "new task", + PercentComplete = 0, + Start = new DateTime(2021, 7, 5), + End = new DateTime(2021, 7, 15) + }); + + var currentListWidth = await JS.InvokeAsync("getListSize"); + ListWidth = currentListWidth; + + GanttRef?.Rebind(); + } + + private async Task RemoveTask() + { + var taskToRemove = GanttData.FirstOrDefault(x => x.Title == "Task 1"); + + GanttData.Remove(taskToRemove); + + var currentListWidth = await JS.InvokeAsync("getListSize"); + ListWidth = currentListWidth; + + GanttRef?.Rebind(); + } + + + private void UpdateItem(GanttUpdateEventArgs args) + { + var item = args.Item as FlatModel; + + var foundItem = GanttData.FirstOrDefault(i => i.Id.Equals(item.Id)); + + if (foundItem != null) + { + foundItem.Title = item.Title; + foundItem.Start = item.Start; + foundItem.End = item.End; + foundItem.PercentComplete = item.PercentComplete; + } + } + + private void DeleteItem(GanttDeleteEventArgs args) + { + var item = GanttData.FirstOrDefault(i => i.Id.Equals((args.Item as FlatModel).Id)); + + RemoveChildRecursive(item); + } + + private void RemoveChildRecursive(FlatModel item) + { + var children = GanttData.Where(i => item.Id.Equals(i.ParentId)).ToList(); + + foreach (var child in children) + { + RemoveChildRecursive(child); + } + + GanttData.Remove(item); + } + + protected override void OnInitialized() + { + GanttData = new List(); + + for (int i = 1; i < 6; i++) + { + var newItem = new FlatModel() + { + Id = LastId, + Title = "Task " + i.ToString(), + Start = new DateTime(2021, 7, 5 + i), + End = new DateTime(2021, 7, 11 + i), + PercentComplete = Math.Round(Random.Shared.NextDouble(), 2) + }; + + GanttData.Add(newItem); + var parentId = LastId; + LastId++; + + for (int j = 0; j < 5; j++) + { + GanttData.Add(new FlatModel() + { + Id = LastId, + ParentId = parentId, + Title = " Task " + i + " : " + j.ToString(), + Start = new DateTime(2021, 7, 5 + j), + End = new DateTime(2021, 7, 6 + i + j), + PercentComplete = Math.Round(Random.Shared.NextDouble(), 2) + }); + + LastId++; + } + } + + base.OnInitialized(); + } + + 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; } + } +} +```` + +## See Also + +- [Gantt Overview - Telerik UI for Blazor](slug:gantt-overview) From c4c1333f239f2063611eb64c40750fa3cf584723 Mon Sep 17 00:00:00 2001 From: IvanDanchev Date: Wed, 2 Jul 2025 10:41:31 -0400 Subject: [PATCH 08/39] docs: update grid dropdownlist chart overview cta content (#3081) * docs: update grid dropdownlist chart overview cta content * docs: add PR review suggestions --- components/chart/overview.md | 8 ++++++++ components/dropdownlist/overview.md | 8 ++++++++ components/grid/overview.md | 8 ++++++++ 3 files changed, 24 insertions(+) diff --git a/components/chart/overview.md b/components/chart/overview.md index 03b1ed5e3e..271eae8f88 100644 --- a/components/chart/overview.md +++ b/components/chart/overview.md @@ -12,6 +12,14 @@ 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. + + +ninja-iconTired 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). + + +ninja-iconTired 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. + + +ninja-iconTired 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 09/39] 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 10/39] 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 11/39] 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 12/39] 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. - - ninja-iconTired 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). - - ninja-iconTired 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. - - ninja-iconTired 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 13/39] 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 14/39] 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 15/39] 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 + + + + + + + + +
ProductTelerik 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 16/39] 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 17/39] 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 18/39] 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 19/39] 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 20/39] 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 + + + + + + + +
ProductDockManager 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 21/39] 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 + + + + + + + + +
ProductToolBar 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 +

Block ToolBar

+ +before + + + + + + + + + + + + + + + +after + +

Inline ToolBar

+ +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 22/39] 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 23/39] 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 + +

Grid with Safe Row Click Handling

+ +@if (!string.IsNullOrEmpty(ClickedPersonName)) +{ +

Last clicked person: @ClickedPersonName

+} + + + + + + + + + +@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 24/39] 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 25/39] 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 + + + + + + + + +
ProductTreeList 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 26/39] 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 27/39] 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 + + + + + + + + +
ProductChart 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 Size 3000 is positioned outside the visible Chart area.

+ + + + + + + + + + + + + + + + + +

Thousands

+ +

The max Size value is 3000. This is the max value in all Charts and series, so there is no need for additional hidden bubbles.

+ + + + + + + + + + + + + + + + + +

All Series in Same Chart

+ +

There is no need for additional hidden bubbles.

+ + + + + + + + + + + + + +@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 28/39] 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 29/39] 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 30/39] 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 31/39] 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 32/39] 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 + + + + + + + + +
ProductRadioGroup 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 33/39] 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 34/39] 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 35/39] 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 +```` From 001e2a6adbb332caf348061f2064bf490d1cdb62 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Mon, 28 Jul 2025 13:13:15 +0300 Subject: [PATCH 36/39] kb(Common): Update inheritance KB (#3134) * kb(Common): Update inheritance KB * Update common-extend-inherit-wrap-reuse-telerik-blazor-components.md --- ...-inherit-wrap-reuse-telerik-blazor-components.md | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/knowledge-base/common-extend-inherit-wrap-reuse-telerik-blazor-components.md b/knowledge-base/common-extend-inherit-wrap-reuse-telerik-blazor-components.md index a172e335e9..765f923496 100644 --- a/knowledge-base/common-extend-inherit-wrap-reuse-telerik-blazor-components.md +++ b/knowledge-base/common-extend-inherit-wrap-reuse-telerik-blazor-components.md @@ -5,7 +5,7 @@ type: how-to page_title: How to Extend, Inherit, or Wrap Telerik Components for Blazor slug: common-kb-component-inheritance tags: telerik, blazor, inheritance -ticketid: 1628856, 1615737, 1604776, 1607228, 1618168, 1690926 +ticketid: 1628856, 1615737, 1604776, 1607228, 1618168, 1690926, 1694691 res_type: kb --- @@ -266,6 +266,17 @@ namespace YourAppName.BaseComponents } ```` +## Notes + +If `ReusableComboBox.razor` has a separate `.razor.cs` file, then the [partial class must be defined as generic](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/generic-type-support): + +````C#.skip-repl +public partial class ReusableComboBox : ComponentBase +{ + +} +```` + ## See Also * [Using Base Classes with Razor Components](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-9.0#specify-a-base-class) From 7ecd5a2bf19e79fc89fccdb3029f01f1ed8e0c84 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Tue, 29 Jul 2025 11:04:03 +0300 Subject: [PATCH 37/39] docs(AI): Enhance env var configuration information (#3136) --- ai/mcp-server.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ai/mcp-server.md b/ai/mcp-server.md index 4265d3e1aa..30f4fbea90 100644 --- a/ai/mcp-server.md +++ b/ai/mcp-server.md @@ -38,7 +38,7 @@ Use the documentation of your AI-powered MCP client to add the Telerik MCP serve 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: -* (recommended) Use a `TELERIK_LICENSE_PATH` argument and point to your Telerik license file location. +* Use a `TELERIK_LICENSE_PATH` argument and point to your Telerik license file location. This approach is recommended, unless you are sharing your VS Code settings across different computers with different operating systems or user names. * Use a `TELERIK_LICENSE` argument and paste your Telerik license key. Make sure to [update the license key](slug:installation-license-key#license-key-updates) when necessary. ### Visual Studio From ebaf756b8d8ae8bf6f351bd5e6a36c221307ea7d Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Tue, 29 Jul 2025 12:00:57 +0300 Subject: [PATCH 38/39] chore(Grid): update highlighting slugs (#3139) --- components/grid/highlighting.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/grid/highlighting.md b/components/grid/highlighting.md index 84b09f5729..9684f99fdd 100644 --- a/components/grid/highlighting.md +++ b/components/grid/highlighting.md @@ -28,7 +28,7 @@ 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. +See [Grid Highlighting API Reference](slug:telerik.blazor.components.HighlightedCellDescriptor) for details about these parameters and the `GridHighlightedCellDescriptor` type. ## Example @@ -113,4 +113,4 @@ See [Grid Highlighting API Reference](slug:telerik.blazor.components.gridhighlig ## See Also * [Grid Selection](slug:grid-selection-overview) -* [Highlighting API Reference](slug:telerik.blazor.components.gridhighlighting) \ No newline at end of file +* [Highlighting API Reference](slug:telerik.blazor.components.HighlightedCellDescriptor) \ No newline at end of file From a1f6fc806005d8acf41ec241c32d5410208eedc1 Mon Sep 17 00:00:00 2001 From: Hristian Stefanov <72554148+xristianstefanov@users.noreply.github.com> Date: Tue, 29 Jul 2025 14:52:44 +0300 Subject: [PATCH 39/39] docs(PdfViewer): change overview example to live (#3137) --- components/pdfviewer/form-filling.md | 2 +- components/pdfviewer/overview.md | 26 +------------------------- 2 files changed, 2 insertions(+), 26 deletions(-) diff --git a/components/pdfviewer/form-filling.md b/components/pdfviewer/form-filling.md index 4980b39526..5a7c083d9b 100644 --- a/components/pdfviewer/form-filling.md +++ b/components/pdfviewer/form-filling.md @@ -25,7 +25,7 @@ The PDFViewer supports the following form field types: >caption Edit form fields and download the updated PDF file - + ## See Also diff --git a/components/pdfviewer/overview.md b/components/pdfviewer/overview.md index 86e2dc562d..ff241d91fb 100644 --- a/components/pdfviewer/overview.md +++ b/components/pdfviewer/overview.md @@ -25,31 +25,7 @@ To use a Telerik [Blazor PDF Viewer](https://demos.telerik.com/blazor-ui/pdfview >caption Basic Blazor PDF Viewer -````RAZOR - - - -@code { - private byte[] PdfSource { get; set; } - - private async Task OnPdfDownload(PdfViewerDownloadEventArgs args) - { - args.FileName = "PDF-Viewer-Download"; - } - - protected override void OnInitialized() - { - PdfSource = Convert.FromBase64String(PdfBase64); - - base.OnInitialized(); - } - - private const string PdfBase64 = "JVBERi0xLjEKMSAwIG9iajw8L1R5cGUvQ2F0YWxvZy9QYWdlcyAyIDAgUj4+ZW5kb2JqCjIgMCBvYmo8PC9UeXBlL1BhZ2VzL0tpZHNbMyAwIFJdL0NvdW50IDEvTWVkaWFCb3ggWy00MCAtNjQgMjYwIDgwXSA+PmVuZG9iagozIDAgb2JqPDwvVHlwZS9QYWdlL1BhcmVudCAyIDAgUi9SZXNvdXJjZXM8PC9Gb250PDwvRjE8PC9UeXBlL0ZvbnQvU3VidHlwZS9UeXBlMS9CYXNlRm9udC9BcmlhbD4+ID4+ID4+L0NvbnRlbnRzIDQgMCBSPj5lbmRvYmoKNCAwIG9iajw8L0xlbmd0aCA1OT4+CnN0cmVhbQpCVAovRjEgMTggVGYKMCAwIFRkCihUZWxlcmlrIFBkZlZpZXdlciBmb3IgQmxhem9yKSBUagpFVAplbmRzdHJlYW0KZW5kb2JqCnhyZWYKMCA1CjAwMDAwMDAwMDAgNjU1MzUgZgowMDAwMDAwMDIxIDAwMDAwIG4KMDAwMDAwMDA4NiAwMDAwMCBuCjAwMDAwMDAxOTUgMDAwMDAgbgowMDAwMDAwNDkwIDAwMDAwIG4KdHJhaWxlciA8PCAgL1Jvb3QgMSAwIFIgL1NpemUgNSA+PgpzdGFydHhyZWYKNjA5CiUlRU9G"; -} -```` - + ## Toolbar pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

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.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy