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" } diff --git a/components/chart/overview.md b/components/chart/overview.md index 03b1ed5e3e..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,6 +13,8 @@ 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..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,6 +13,8 @@ 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/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. *@ 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 diff --git a/components/grid/overview.md b/components/grid/overview.md index 1fdb9de86b..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,6 +13,8 @@ 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. 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; + } } } ```` diff --git a/components/scheduler/recurrence.md b/components/scheduler/recurrence.md index 520933e4e6..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. @@ -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(); } } 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) 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) 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) 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 + 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)