From a47350facb9f446e9d73003dd0f42688446da14c Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Wed, 21 May 2025 09:27:22 +0300 Subject: [PATCH 01/24] Fix env variable name --- 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 2b5fb288a..27baf6b0d 100644 --- a/ai/mcp-server.md +++ b/ai/mcp-server.md @@ -34,7 +34,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_KEY` argument and paste your Telerik license key. Make sure to [update the license key](slug:installation-license-key#license-key-updates) when necessary. +* 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 9ee4bf5c4729f2f1003204eb01c10144528955f8 Mon Sep 17 00:00:00 2001 From: radkostanev Date: Wed, 21 May 2025 10:14:14 +0300 Subject: [PATCH 02/24] chore: comment out ai slugs --- getting-started/client-blazor.md | 8 ++++---- getting-started/hybrid-blazor.md | 4 ++-- getting-started/vs-code-integration/introduction.md | 4 ++-- getting-started/vs-integration/introduction.md | 2 +- getting-started/web-app.md | 4 ++-- getting-started/what-you-need.md | 4 ++-- introduction.md | 2 +- 7 files changed, 14 insertions(+), 14 deletions(-) diff --git a/getting-started/client-blazor.md b/getting-started/client-blazor.md index 2f8842922..972f41711 100644 --- a/getting-started/client-blazor.md +++ b/getting-started/client-blazor.md @@ -101,9 +101,9 @@ The final step in this tutorial is to use a Telerik UI for Blazor component in a @[template](/_contentTemplates/common/get-started.md#add-component-sample) -## Step 7: Install Telerik AI Coding Assistants + @[template](/_contentTemplates/common/get-started.md#next-steps-after-getting-started) @@ -113,9 +113,9 @@ If you prefer video instructions, you can also check the video tutorial below. -## Next Steps + ## See Also diff --git a/getting-started/hybrid-blazor.md b/getting-started/hybrid-blazor.md index 11e97cc0f..1917be5e6 100644 --- a/getting-started/hybrid-blazor.md +++ b/getting-started/hybrid-blazor.md @@ -114,9 +114,9 @@ namespace MyBlazorMauiAppName Add your desired Telerik Blazor components in the app as in a native Blazor app. Explore the available UI for Blazor components and their features in our [live demos](https://demos.telerik.com/blazor-ui). -### 8. Install Telerik AI Coding Assistants + ## Running the Blazor Hybrid App diff --git a/getting-started/vs-code-integration/introduction.md b/getting-started/vs-code-integration/introduction.md index 67461494b..0b88037f6 100644 --- a/getting-started/vs-code-integration/introduction.md +++ b/getting-started/vs-code-integration/introduction.md @@ -28,6 +28,6 @@ To access the VS Code extension, press `Ctrl`+`Shift`+`P` on Windows/Linux or `C ![launch Telerik Blazor VS Code extension](images/launch-extension.png) -## See Also + diff --git a/getting-started/vs-integration/introduction.md b/getting-started/vs-integration/introduction.md index 39eb903d5..1104ee21d 100644 --- a/getting-started/vs-integration/introduction.md +++ b/getting-started/vs-integration/introduction.md @@ -35,4 +35,4 @@ To access the Telerik Visual Studio extension, go to the **Extensions** > **Tele * [Creating New Projects with Visual Studio](slug:getting-started-vs-integration-new-project) * [Converting Existing Projects with Visual Studio](slug:getting-started-vs-integration-convert-project) * [Downloading the Latest Telerik UI for Blazor Versions](slug:getting-started-vs-integration-latest-version) -* [Telerik GitHub Copilot extension for Blazor](slug:ai-copilot-extension) + diff --git a/getting-started/web-app.md b/getting-started/web-app.md index d279ea385..7fe927126 100644 --- a/getting-started/web-app.md +++ b/getting-started/web-app.md @@ -121,9 +121,9 @@ The final step in this tutorial is to use a Telerik UI for Blazor component in a @[template](/_contentTemplates/common/get-started.md#add-component-sample) -## Step 7: Install Telerik AI Coding Assistants + @[template](/_contentTemplates/common/get-started.md#next-steps-after-getting-started) diff --git a/getting-started/what-you-need.md b/getting-started/what-you-need.md index 4f73679c6..90ed4293a 100644 --- a/getting-started/what-you-need.md +++ b/getting-started/what-you-need.md @@ -261,9 +261,9 @@ The Blazor application is ready to use Telerik components. } ```` -## Install Telerik AI Coding Assistants + @[template](/_contentTemplates/common/get-started.md#next-steps-after-getting-started) diff --git a/introduction.md b/introduction.md index 7a38236ec..d381efc47 100644 --- a/introduction.md +++ b/introduction.md @@ -222,7 +222,7 @@ To use UI for Blazor commercially, you need to Date: Wed, 21 May 2025 14:28:13 +0300 Subject: [PATCH 04/24] chore: reapply ai-related changes (#2978) Co-authored-by: radkostanev --- ai/copilot-extension.md | 2 +- ai/mcp-server.md | 2 +- ai/overview.md | 2 +- getting-started/client-blazor.md | 8 ++++---- getting-started/hybrid-blazor.md | 4 ++-- getting-started/vs-code-integration/introduction.md | 4 ++-- getting-started/vs-integration/introduction.md | 2 +- getting-started/web-app.md | 4 ++-- getting-started/what-you-need.md | 4 ++-- introduction.md | 2 +- 10 files changed, 17 insertions(+), 17 deletions(-) diff --git a/ai/copilot-extension.md b/ai/copilot-extension.md index 9ffaa2837..d2087f112 100644 --- a/ai/copilot-extension.md +++ b/ai/copilot-extension.md @@ -4,7 +4,7 @@ page_title: Telerik Blazor GitHub Copilot Extension description: Learn how to add and use the Telerik Blazor GitHub Copilot extension as a Blazor AI coding assistant and code generator for better developer productivity. The Telerik Blazor GitHub Copilot extension provides proprietary context about Telerik UI for Blazor to AI-powered software. slug: ai-copilot-extension tags: telerik,blazor,ai -published: False +published: True position: 10 --- diff --git a/ai/mcp-server.md b/ai/mcp-server.md index 27baf6b0d..915c32600 100644 --- a/ai/mcp-server.md +++ b/ai/mcp-server.md @@ -4,7 +4,7 @@ page_title: Telerik Blazor MCP Server description: Learn how to add and use the Telerik Blazor MCP Server as a Blazor AI coding assistant and code generator for better developer productivity. The Telerik Blazor MCP server provides proprietary context about Telerik UI for Blazor to AI-powered software. slug: ai-mcp-server tags: telerik,blazor,ai -published: False +published: True position: 20 --- diff --git a/ai/overview.md b/ai/overview.md index 75828e8e1..cc6aecffc 100644 --- a/ai/overview.md +++ b/ai/overview.md @@ -4,7 +4,7 @@ page_title: Telerik Blazor AI Tooling Overview description: Learn about the AI-powered developer tools that integrate with your IDE or code editor for greater productivity and enhanced developer experience. slug: ai-overview tags: telerik,blazor,ai -published: False +published: True position: 1 --- diff --git a/getting-started/client-blazor.md b/getting-started/client-blazor.md index 972f41711..2f8842922 100644 --- a/getting-started/client-blazor.md +++ b/getting-started/client-blazor.md @@ -101,9 +101,9 @@ The final step in this tutorial is to use a Telerik UI for Blazor component in a @[template](/_contentTemplates/common/get-started.md#add-component-sample) - +Use the [Telerik Blazor MCP server](slug:ai-mcp-server) or the [Telerik Blazor GitHub Copilot extension](slug:ai-copilot-extension) to generate code snippets that include Telerik UI for Blazor components and API. @[template](/_contentTemplates/common/get-started.md#next-steps-after-getting-started) @@ -113,9 +113,9 @@ If you prefer video instructions, you can also check the video tutorial below. - +* Use the [Telerik Blazor MCP server](slug:ai-mcp-server) or the [Telerik Blazor GitHub Copilot extension](slug:ai-copilot-extension) to generate code snippets that include Telerik UI for Blazor components and API. ## See Also diff --git a/getting-started/hybrid-blazor.md b/getting-started/hybrid-blazor.md index 1917be5e6..11e97cc0f 100644 --- a/getting-started/hybrid-blazor.md +++ b/getting-started/hybrid-blazor.md @@ -114,9 +114,9 @@ namespace MyBlazorMauiAppName Add your desired Telerik Blazor components in the app as in a native Blazor app. Explore the available UI for Blazor components and their features in our [live demos](https://demos.telerik.com/blazor-ui). - +* Use the [Telerik Blazor MCP server](slug:ai-mcp-server) or the [Telerik Blazor GitHub Copilot extension](slug:ai-copilot-extension) to generate code snippets that include Telerik UI for Blazor components and API. ## Running the Blazor Hybrid App diff --git a/getting-started/vs-code-integration/introduction.md b/getting-started/vs-code-integration/introduction.md index 0b88037f6..67461494b 100644 --- a/getting-started/vs-code-integration/introduction.md +++ b/getting-started/vs-code-integration/introduction.md @@ -28,6 +28,6 @@ To access the VS Code extension, press `Ctrl`+`Shift`+`P` on Windows/Linux or `C ![launch Telerik Blazor VS Code extension](images/launch-extension.png) - +* [Telerik GitHub Copilot extension for Blazor](slug:ai-copilot-extension) diff --git a/getting-started/vs-integration/introduction.md b/getting-started/vs-integration/introduction.md index 1104ee21d..39eb903d5 100644 --- a/getting-started/vs-integration/introduction.md +++ b/getting-started/vs-integration/introduction.md @@ -35,4 +35,4 @@ To access the Telerik Visual Studio extension, go to the **Extensions** > **Tele * [Creating New Projects with Visual Studio](slug:getting-started-vs-integration-new-project) * [Converting Existing Projects with Visual Studio](slug:getting-started-vs-integration-convert-project) * [Downloading the Latest Telerik UI for Blazor Versions](slug:getting-started-vs-integration-latest-version) - +* [Telerik GitHub Copilot extension for Blazor](slug:ai-copilot-extension) diff --git a/getting-started/web-app.md b/getting-started/web-app.md index 7fe927126..d279ea385 100644 --- a/getting-started/web-app.md +++ b/getting-started/web-app.md @@ -121,9 +121,9 @@ The final step in this tutorial is to use a Telerik UI for Blazor component in a @[template](/_contentTemplates/common/get-started.md#add-component-sample) - +Use the [Telerik Blazor MCP server](slug:ai-mcp-server) or the [Telerik Blazor GitHub Copilot extension](slug:ai-copilot-extension) to generate code snippets that include Telerik UI for Blazor components and API. @[template](/_contentTemplates/common/get-started.md#next-steps-after-getting-started) diff --git a/getting-started/what-you-need.md b/getting-started/what-you-need.md index 90ed4293a..4f73679c6 100644 --- a/getting-started/what-you-need.md +++ b/getting-started/what-you-need.md @@ -261,9 +261,9 @@ The Blazor application is ready to use Telerik components. } ```` - +* Use the [Telerik Blazor MCP server](slug:ai-mcp-server) or the [Telerik Blazor GitHub Copilot extension](slug:ai-copilot-extension) to generate code snippets that include Telerik UI for Blazor components and API. @[template](/_contentTemplates/common/get-started.md#next-steps-after-getting-started) diff --git a/introduction.md b/introduction.md index d381efc47..7a38236ec 100644 --- a/introduction.md +++ b/introduction.md @@ -222,7 +222,7 @@ To use UI for Blazor commercially, you need to Date: Wed, 21 May 2025 15:13:07 +0300 Subject: [PATCH 05/24] docs(common): Add AI Coding Assistant (#2980) Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- _contentTemplates/common/get-started.md | 6 ++++++ ai/overview.md | 4 ++-- getting-started/client-blazor.md | 4 ++-- getting-started/hybrid-blazor.md | 4 ++-- getting-started/web-app.md | 4 ++-- getting-started/what-you-need.md | 6 +++--- introduction.md | 2 +- 7 files changed, 18 insertions(+), 12 deletions(-) diff --git a/_contentTemplates/common/get-started.md b/_contentTemplates/common/get-started.md index a59f43f57..eeb3892e8 100644 --- a/_contentTemplates/common/get-started.md +++ b/_contentTemplates/common/get-started.md @@ -208,4 +208,10 @@ This will make the license key available to all Telerik .NET apps that you devel The [Telerik License Key](slug:installation-license-key) article provides additional details on installing and updating your Telerik license key in different scenarios. [Automatic license key maintenance](slug:installation-license-key#automatic-installation) is more effective and recommended in the long run. +#end + +#ai-coding-assistant-ad + +Use the [Telerik AI Coding Assistant](slug:ai-overview) through the [Telerik Blazor MCP server](slug:ai-mcp-server) or the [Telerik Blazor GitHub Copilot extension](slug:ai-copilot-extension). These tools help you receive tips and generate code snippets that include Telerik UI for Blazor components and API. + #end \ No newline at end of file diff --git a/ai/overview.md b/ai/overview.md index cc6aecffc..828b0810a 100644 --- a/ai/overview.md +++ b/ai/overview.md @@ -19,8 +19,8 @@ The Telerik AI Coding Assistant is integrated in: The major differences between these tools are: -* The MCP server is more powerful and can handle more complex prompts that require several requests to the AI model. An MCP-enabled client like GitHub Copilot in **Agent** mode can make changes to your app and rebuild it to verify the AI suggestions. -* The responses of the GitHub Copilot extension may contain shorter or partial code snippets and more explanations how to accomplish the task. When using the MCP server, the AI response is mostly code. +* The MCP server is more powerful and can handle more complex prompts that require several requests to the AI model. An MCP-enabled client like Cursor or GitHub Copilot in **Agent** mode can directly suggest changes to your app and even rebuild it to verify the new AI generated code. +* The responses of the GitHub Copilot extension may contain more explanations how to accomplish the task, and shorter or partial code snippets. When using the MCP server, the AI response is mostly code. ## Getting Started diff --git a/getting-started/client-blazor.md b/getting-started/client-blazor.md index 2f8842922..44a9c688f 100644 --- a/getting-started/client-blazor.md +++ b/getting-started/client-blazor.md @@ -101,9 +101,9 @@ The final step in this tutorial is to use a Telerik UI for Blazor component in a @[template](/_contentTemplates/common/get-started.md#add-component-sample) -## Step 7: Install Telerik AI Coding Assistants +## Step 7: Install the Telerik AI Coding Assistant -Use the [Telerik Blazor MCP server](slug:ai-mcp-server) or the [Telerik Blazor GitHub Copilot extension](slug:ai-copilot-extension) to generate code snippets that include Telerik UI for Blazor components and API. +@[template](/_contentTemplates/common/get-started.md#ai-coding-assistant-ad) @[template](/_contentTemplates/common/get-started.md#next-steps-after-getting-started) diff --git a/getting-started/hybrid-blazor.md b/getting-started/hybrid-blazor.md index 11e97cc0f..d0e05ef9a 100644 --- a/getting-started/hybrid-blazor.md +++ b/getting-started/hybrid-blazor.md @@ -114,9 +114,9 @@ namespace MyBlazorMauiAppName Add your desired Telerik Blazor components in the app as in a native Blazor app. Explore the available UI for Blazor components and their features in our [live demos](https://demos.telerik.com/blazor-ui). -### 8. Install Telerik AI Coding Assistants +### 8. Install the Telerik AI Coding Assistant -* Use the [Telerik Blazor MCP server](slug:ai-mcp-server) or the [Telerik Blazor GitHub Copilot extension](slug:ai-copilot-extension) to generate code snippets that include Telerik UI for Blazor components and API. +@[template](/_contentTemplates/common/get-started.md#ai-coding-assistant-ad) ## Running the Blazor Hybrid App diff --git a/getting-started/web-app.md b/getting-started/web-app.md index d279ea385..a7e4af95b 100644 --- a/getting-started/web-app.md +++ b/getting-started/web-app.md @@ -121,9 +121,9 @@ The final step in this tutorial is to use a Telerik UI for Blazor component in a @[template](/_contentTemplates/common/get-started.md#add-component-sample) -## Step 7: Install Telerik AI Coding Assistants +## Step 7: Install the Telerik AI Coding Assistant -Use the [Telerik Blazor MCP server](slug:ai-mcp-server) or the [Telerik Blazor GitHub Copilot extension](slug:ai-copilot-extension) to generate code snippets that include Telerik UI for Blazor components and API. +@[template](/_contentTemplates/common/get-started.md#ai-coding-assistant-ad) @[template](/_contentTemplates/common/get-started.md#next-steps-after-getting-started) diff --git a/getting-started/what-you-need.md b/getting-started/what-you-need.md index 4f73679c6..378d63510 100644 --- a/getting-started/what-you-need.md +++ b/getting-started/what-you-need.md @@ -37,7 +37,7 @@ The required milestones to obtain and use Telerik UI for Blazor are: 1. Add the [CSS theme and JavaScript file](#css-theme-and-javascript-files). 1. Add the [``](#telerikrootcomponent). 1. [Add components to a view](#add-telerik-components-to-a-view). -1. Install [Telerik Blazor AI coding assistants](#install-telerik-ai-coding-assistants). +1. Install the [Telerik Blazor AI Coding Assistant](#install-the-telerik-ai-coding-assistant). ## NuGet Packages @@ -261,9 +261,9 @@ The Blazor application is ready to use Telerik components. } ```` -## Install Telerik AI Coding Assistants +## Install the Telerik AI Coding Assistant -* Use the [Telerik Blazor MCP server](slug:ai-mcp-server) or the [Telerik Blazor GitHub Copilot extension](slug:ai-copilot-extension) to generate code snippets that include Telerik UI for Blazor components and API. +@[template](/_contentTemplates/common/get-started.md#ai-coding-assistant-ad) @[template](/_contentTemplates/common/get-started.md#next-steps-after-getting-started) diff --git a/introduction.md b/introduction.md index 7a38236ec..b34fc00c0 100644 --- a/introduction.md +++ b/introduction.md @@ -222,7 +222,7 @@ To use UI for Blazor commercially, you need to Date: Wed, 21 May 2025 19:17:04 +0300 Subject: [PATCH 06/24] Merge dimodi-patch-1-2983 into production (#2984) * Update 9-0-0.md * Update upgrade/breaking-changes/9-0-0.md --------- Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- upgrade/breaking-changes/9-0-0.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/upgrade/breaking-changes/9-0-0.md b/upgrade/breaking-changes/9-0-0.md index e0ddb02b1..842ee365d 100644 --- a/upgrade/breaking-changes/9-0-0.md +++ b/upgrade/breaking-changes/9-0-0.md @@ -8,9 +8,15 @@ position: 960 # Breaking Changes in 9.0.0 +## Common + ### Trial and commercial users now use the same product package The trial and commercial product versions merged into a single unified distribution package. The product access now depends on a license key file. This eliminates the need for separate trial downloads. For more information, please refer to the [Telerik License Key](slug:installation-license-key). ### .NET Support -Telerik UI for Blazor 9.0.0 targets .NET 8 and no longer supports .NET 6 and .NET 7. For more information, see [System Requirements](slug:system-requirements). \ No newline at end of file +Telerik UI for Blazor 9.0.0 targets .NET 8 and no longer supports .NET 6 and .NET 7. For more information, see [System Requirements](slug:system-requirements). + +## Window + +The `Centered` parameter is removed. To center the Window programmatically, [reset the `Top` and `Left` parameter values](slug:components/window/position#top-and-left). From dbd2ad3c5d2c5b77c803ebfc70d681c5e21bffd5 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Wed, 21 May 2025 19:17:22 +0300 Subject: [PATCH 07/24] docs(Common): Add troubleshooting info for license verification banner (#2985) Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- installation/license-key.md | 22 ++++++++++++++++++++++ troubleshooting/license-key-errors.md | 7 +++++++ 2 files changed, 29 insertions(+) diff --git a/installation/license-key.md b/installation/license-key.md index 38276f946..9dd11fe1d 100644 --- a/installation/license-key.md +++ b/installation/license-key.md @@ -61,6 +61,28 @@ The new license key includes information about all previous purchases. This proc * If you used the [manual license key installation](#manual-installation), then repeat the same steps. * To [update your license key in CI/CD environments](slug:deployment-license-key), get your new license key and update the environment variable value. +## Using Telerik Packages in Referenced Projects + +Telerik UI for Blazor may be used in a referenced project in a multi-project app. For example, in the **Client** project of a WebAssembly app that uses server-side pre-rendering. In such cases, you can briefly see a yellow banner in the browser, which says "We couldn't verify your license key for Telerik UI for Blazor. Please see the build log for details and resolution steps". + +There are two alternative ways to avoid the warning banner: + +* Set `PrivateAssets="none"` to the Telerik UI for Blazor NuGet package registration tag. + ````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. + ````XML.skip-repl + + + + ```` + +## Troubleshooting + +Refer to the [Troubleshooting License Key Errors](slug:troubleshooting-license-key-errors) page to find out what license key warnings you may see during application build and what they mean. + ## Frequently Asked Questions ### Does the license key expire? diff --git a/troubleshooting/license-key-errors.md b/troubleshooting/license-key-errors.md index e918d4aab..8f075b877 100644 --- a/troubleshooting/license-key-errors.md +++ b/troubleshooting/license-key-errors.md @@ -22,6 +22,7 @@ A Telerik license key error may occur in the following scenarios: * The license key is outdated or does not include the product version that you are using. * Your subscription license or trial has expired. * You have different conflicting license keys in the same environment. For example, using one global license key and one in the app. Or, using a license key file together with an environment variable in CI/CD environment. +* Telerik UI for Blazor is used in the **Client** project of a WebAssembly app that uses pre-rendering. In such cases, you can briefly see a yellow banner in the browser, which says "[We couldn't verify your license key for Telerik UI for Blazor. Please see the build log for details and resolution steps](#we-couldn-t-verify-your-license-key-for-telerik-ui-for-blazor-yellow-banner)". Refer to the specific error messages and tips below. @@ -70,6 +71,12 @@ This error applies to subscription licenses. [Renew your subscription](https://w [Purchase a commercial license to continue using Telerik UI for Blazor](https://www.telerik.com/purchase/blazor-ui). +### We couldn't verify your license key for Telerik UI for Blazor (yellow banner) + +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). + ## See Also * [Download and Install License Key](slug:installation-license-key) From 08c4af63ea5fc64d64be0213d25aad0c056d9688 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Wed, 21 May 2025 21:41:47 +0300 Subject: [PATCH 08/24] docs(common): Polish 9.0 Window changes --- upgrade/breaking-changes/9-0-0.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/upgrade/breaking-changes/9-0-0.md b/upgrade/breaking-changes/9-0-0.md index 842ee365d..5983ad4e4 100644 --- a/upgrade/breaking-changes/9-0-0.md +++ b/upgrade/breaking-changes/9-0-0.md @@ -19,4 +19,4 @@ Telerik UI for Blazor 9.0.0 targets .NET 8 and no longer supports .NET 6 and .NE ## Window -The `Centered` parameter is removed. To center the Window programmatically, [reset the `Top` and `Left` parameter values](slug:components/window/position#top-and-left). +The `Centered` parameter is removed. The Window is centered by default if the `Top` and `Left` parameters are equal to an empty string or if they are not set. To center the Window programmatically at any time, [reset the `Top` and `Left` parameter values](slug:components/window/position#top-and-left). From 90ed264d4e5cfb1ed4082b07fec484a021c94969 Mon Sep 17 00:00:00 2001 From: radkostanev Date: Fri, 23 May 2025 09:38:32 +0300 Subject: [PATCH 09/24] chore: update material colors in examples --- docs-builder.yml | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/docs-builder.yml b/docs-builder.yml index e230a0838..2645f3442 100644 --- a/docs-builder.yml +++ b/docs-builder.yml @@ -88,12 +88,21 @@ demos: material-main: name: Main group: Material - colors: ['#ffffff', '#3f51b5', '#212121'] + colors: ['#fefbff', '#65558f', '#1d1b20'] + material-2: + name: Material 2 + group: Material + colors: ['#ffffff', '#3f51b5', '#424242'] material-main-dark: name: Main Dark tags: [dark] group: Material - colors: ['#121212', '#9fa8da', '#e0e0e0'] + colors: ['#141218', '#d0bcff', '#e6e0e9'] + material-2-dark: + name: Material 2 Dark + tags: [dark] + group: Material + colors: ['#303030', '#3f51b5', '#ffffff'] material-arctic: name: Arctic group: Material From 6fe3f632485edf7364a329ef333087f81e37c570 Mon Sep 17 00:00:00 2001 From: AngelVelinov Date: Thu, 29 May 2025 13:58:49 +0300 Subject: [PATCH 10/24] Add configuration fieled 'gitLastCommitDate' --- docs-builder.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/docs-builder.yml b/docs-builder.yml index 2645f3442..a967bf0ad 100644 --- a/docs-builder.yml +++ b/docs-builder.yml @@ -19,6 +19,7 @@ table-layout: fixed enable-tabbed-code-blocks: true blazor-repl: true pdf-cover-png-path: ./images/pdf-cover.png +gitLastCommitDateEnabled: true demos: metaFileName: demo.json From c198961b681be92d3282458667f6e4bfd5752e88 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 2 Jun 2025 11:03:04 +0300 Subject: [PATCH 11/24] Merge update-panelbar-docs-2986 into production (#2989) * chore(PanelBar): update field bindings docs * Update components/panelbar/data-binding/overview.md Co-authored-by: Iva Stefanova Koevska-Atanasova * Update components/panelbar/data-binding/overview.md --------- Co-authored-by: Nadezhda Tacheva Co-authored-by: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/panelbar/data-binding/overview.md | 11 ++- components/panelbar/templates/header.md | 83 ++++++++++---------- 2 files changed, 52 insertions(+), 42 deletions(-) diff --git a/components/panelbar/data-binding/overview.md b/components/panelbar/data-binding/overview.md index b3d735677..9381161ec 100644 --- a/components/panelbar/data-binding/overview.md +++ b/components/panelbar/data-binding/overview.md @@ -66,7 +66,7 @@ Each `PanelBarBinding` tag exposes the following properties that refer to item p * ItemsField => Items -* Level - this is used for defining [different bindings for different levels](#multiple-level-bindings). If no level is set, the bindings are taken as default for any level that does not have explicit settings. You should have one `TelerikPanelBarBinding` without a level. +* Level—this is used for defining [custom field bindings](#custom-field-bindings) or [different bindings for different levels](#multiple-level-bindings). If no level is set, the bindings are taken as default for any level that does not have explicit settings. You must have one `TelerikPanelBarBinding` without a level to set the default bindings. >tip There are default values for the field names. If your model names match the defaults, you don't have to define them in the bindings settings. @@ -182,6 +182,15 @@ The following **Example** shows how to define simple binding to match item field ![Blazor PanelBar Data Binding](../images/panelbar-data-binding-basic-example.png) +### Custom Field Bindings + +If you are using custom field names, you must ensure their binding for each level. Otherwise, the PanelBar will not render items where the field bindings are missing. + +For that purpose, you must do either of the following: + +* Add one `TelerikPanelBarBinding` without a level to set the default bindings. +* Add `TelerikPanelBarBinding` for each level where you explicitly set the field bindings to your custom fields. + ### Multiple Level Bindings You can define different binding settings for the different levels of nodes in the PanelBar. With this, the children of a node can consume a different field than their parent, and this may make your application more flexible. If you use [hierarchical data binding](slug:panelbar-data-binding-hierarchical), the children can even use a different field or model from their parent. diff --git a/components/panelbar/templates/header.md b/components/panelbar/templates/header.md index 80a45dd9e..accc52ec2 100644 --- a/components/panelbar/templates/header.md +++ b/components/panelbar/templates/header.md @@ -13,9 +13,9 @@ position: 5 You can control and customize the rendering of the header items in the PanelBar by using the `HeaderTemplate`. It provides a `context` object that you can cast to the type that the PanelBar is bound to. -The `HeaderTemplate` of a level is defined under the `PanelBarBinding` tag. +The `HeaderTemplate` of a level is defined under the `PanelBarBinding` tag. Set the `Level` parameter of the `PanelBarBinding` to specify the level the `HeaderTemplate` must be applied to. -If no levels are defined the `HeaderTemplate` will apply to the entire data. +If the `Level` parameter of the `PanelBarBinding` is not set, the `HeaderTemplate` will apply to the entire data. >caption Use HeaderTemplate to customize the rendering of the headers in the PanelBar @@ -26,7 +26,7 @@ If no levels are defined the `HeaderTemplate` will apply to the entire data. - + @{ var item = context as PanelBarItem; @@ -42,8 +42,9 @@ If no levels are defined the `HeaderTemplate` will apply to the entire data. @code { - public List Items { get; set; } - public IEnumerable ExpandedItems { get; set; } = new List(); + private List Items { get; set; } + + private IEnumerable ExpandedItems { get; set; } = new List(); public class PanelBarItem { @@ -60,50 +61,50 @@ If no levels are defined the `HeaderTemplate` will apply to the entire data. List items = new List(); items.Add(new PanelBarItem() - { - Id = 1, - Text = "Project", - ParentId = null, - HasChildren = false, - Icon = SvgIcon.Folder, - Url = "projectURL.url" - }); + { + Id = 1, + Text = "Project", + ParentId = null, + HasChildren = false, + Icon = SvgIcon.Folder, + Url = "projectURL.url" + }); items.Add(new PanelBarItem() - { - Id = 2, - Text = "Implementation", - ParentId = null, - HasChildren = true, - Icon = SvgIcon.Code - }); + { + Id = 2, + Text = "Implementation", + ParentId = null, + HasChildren = true, + Icon = SvgIcon.Code + }); items.Add(new PanelBarItem() - { - Id = 3, - Text = "C#", - ParentId = 2, - HasChildren = false, - Icon = SvgIcon.Cs - }); + { + Id = 3, + Text = "C#", + ParentId = 2, + HasChildren = false, + Icon = SvgIcon.Cs + }); items.Add(new PanelBarItem() - { - Id = 4, - Text = "HTML 5", - ParentId = 2, - HasChildren = false, - Icon = SvgIcon.Html5 - }); + { + Id = 4, + Text = "HTML 5", + ParentId = 2, + HasChildren = false, + Icon = SvgIcon.Html5 + }); items.Add(new PanelBarItem() - { - Id = 5, - Text = "CSS", - ParentId = 2, - HasChildren = false, - Icon = SvgIcon.Css - }); + { + Id = 5, + Text = "CSS", + ParentId = 2, + HasChildren = false, + Icon = SvgIcon.Css + }); return items; } From 3170b708ce3fed037071163ceeac2c327d01c3e1 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 2 Jun 2025 11:03:54 +0300 Subject: [PATCH 12/24] Merge improve-hybrid-docs-2990 into production (#2994) * chore(common): update assets section in hybrid apps docs * Update getting-started/hybrid-blazor.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> * Update getting-started/hybrid-blazor.md --------- Co-authored-by: Nadezhda Tacheva Co-authored-by: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- getting-started/hybrid-blazor.md | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/getting-started/hybrid-blazor.md b/getting-started/hybrid-blazor.md index d0e05ef9a..a31c072b2 100644 --- a/getting-started/hybrid-blazor.md +++ b/getting-started/hybrid-blazor.md @@ -40,9 +40,19 @@ To use the UI for Blazor components, install the `Telerik.UI.for.Blazor` packag ### 3. Add the Telerik Client Assets -To have the Telerik Blazor components look and behave as expected, you need the Telerik [CSS and JavaScript assets](slug:getting-started/what-you-need#css-theme-and-javascript-files). Include the assets inside the `` of the `wwwroot/index.html` file. +To have the Telerik Blazor components look and behave as expected, you need the Telerik CSS and JavaScript assets. -You can add the Telerik resources as [static assets](slug:getting-started/what-you-need#css-theme-and-javascript-files). +1. Add the [theme stylesheet as a static asset](slug:themes-overview#using-a-theme) in your `wwwroot/index.html` file. + +**HTML** + +@[template](/_contentTemplates/common/js-interop-file.md#theme-static-asset-snippet) + +2. Add the `telerik-blazor.js` file to your `wwwroot/index.html` file. + +**HTML** + +@[template](/_contentTemplates/common/js-interop-file.md#js-interop-file-snippet) ### 4. Include @using Statements From 71bbf6410abea9fb89a9ce0faa90f46989a8b370 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 6 Jun 2025 10:17:26 +0300 Subject: [PATCH 13/24] Update docs-builder.yml (#3001) Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- docs-builder.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs-builder.yml b/docs-builder.yml index a967bf0ad..3874b46e8 100644 --- a/docs-builder.yml +++ b/docs-builder.yml @@ -142,7 +142,7 @@ excluded-files: ["**/src-a11y/**/*"] liquid-output-delimiter-left: "{{" liquid-output-delimiter-right: "}}" liquid: - uiForBlazorLatestVersion: "9.0" + uiForBlazorLatestVersion: "9.0.0" themesVersion: "11.0.2" meta: From a5fbe2768f97e447aa774f6b196e9f27dd586faf Mon Sep 17 00:00:00 2001 From: JustinR34 <89593857+JustinR34@users.noreply.github.com> Date: Fri, 6 Jun 2025 03:19:28 -0400 Subject: [PATCH 14/24] Update formgroups.md (#2995) Added more description to the ColumnSpacing parameter. Removed Unnecessary and possibly misleading usage of the ColumnSpacing parameter in the example. --- components/form/formgroups.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/form/formgroups.md b/components/form/formgroups.md index 5ff7da282..5919bfc08 100644 --- a/components/form/formgroups.md +++ b/components/form/formgroups.md @@ -25,7 +25,7 @@ The `FormGroup` tag exposes the following parameters: * `Columns` - `int` - defines the number of columns in the group. -* `ColumnSpacing` - `string` - defines the space between the editors in the group. +* `ColumnSpacing` - `string` - defines the horizontal space between the editors in the group. ## Example - Organize FormItems into Groups @@ -51,7 +51,7 @@ You can organize some FormItems into logical groups. You can configure the label - + From 3e4c28b01ff3c6d202c676757a3347e829c250fb Mon Sep 17 00:00:00 2001 From: JustinR34 <89593857+JustinR34@users.noreply.github.com> Date: Fri, 6 Jun 2025 03:20:22 -0400 Subject: [PATCH 15/24] Update overview.md (#2996) Shouldn't this say horizontal space? or maybe just space.. --- components/form/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/form/overview.md b/components/form/overview.md index 57643d171..989fe67a8 100644 --- a/components/form/overview.md +++ b/components/form/overview.md @@ -207,7 +207,7 @@ The [Blazor Form](https://demos.telerik.com/blazor-ui/form/overview) exposes mul |-----------|------------------------|-------------| | `ButtonsLayout` | `FormButtonsLayout` enum
(`Start`) | Determines the position and width of all Form buttons. See [Form Buttons](slug:form-formitems-buttons). | | `Columns` | `int` | Defines the number of columns in the Form. See the [Columns](slug:form-columns) article for more information | -| `ColumnSpacing` | `string` | Defines the amout of vertical space between the Columns. See the [Columns](slug:form-columns) article for more information. | +| `ColumnSpacing` | `string` | Defines the amout of horizontal space between the Columns. See the [Columns](slug:form-columns) article for more information. | | `Orientation` | `FormOrientation` enum
(`Vertical`) | Determines the position of each label with regard to its editor. See [Orientation](slug:form-orientation) for more information. | ### Styling and Appearance From 28785728d71b3fa57cc0ed8358c7681b24b892c8 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 6 Jun 2025 10:21:16 +0300 Subject: [PATCH 16/24] Merge dimodi-patch-2-tabstrip-2999 into production (#3002) * docs(TabStrip): Set tab ID as parameter * Update events.md --------- Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- components/tabstrip/events.md | 15 +++++++++------ components/tabstrip/tabs-collection.md | 12 ++++++------ 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/components/tabstrip/events.md b/components/tabstrip/events.md index 2753e31fd..4f29d6340 100644 --- a/components/tabstrip/events.md +++ b/components/tabstrip/events.md @@ -17,19 +17,21 @@ 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. This event is designed to work with the new [`ActiveTabId` parameter](slug:tabstrip-tabs-collection). +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 is designed to work with the new [`ActiveTabId` parameter](slug:tabstrip-tabs-collection). >caption Handle the tab ID selection changed event ````RAZOR - + First tab content. Click through the tabs. - + Second tab content. - + Third tab content. @@ -37,10 +39,11 @@ The `ActiveTabIdChanged` event fires when the user changes the active tab. The e @Result @code { - private string Result { get; set; } + private string Result { get; set; } = string.Empty; + private void HandleTabIdChange(string tabId) { - Result = $"Current tab ID is {tabId}"; + Result = $"The current tab ID is {tabId}"; } } ```` diff --git a/components/tabstrip/tabs-collection.md b/components/tabstrip/tabs-collection.md index 77d740a82..49d4ece1c 100644 --- a/components/tabstrip/tabs-collection.md +++ b/components/tabstrip/tabs-collection.md @@ -27,7 +27,7 @@ To deactivate all tabs, set the ActiveTabId parameter to `string.Empty`. @{ foreach (var tab in Tabs) { - + @tab.Title @@ -54,11 +54,11 @@ To deactivate all tabs, set the ActiveTabId parameter to `string.Empty`. private string ActiveTabId { get; set; } private List Tabs { get; set; } = new List -{ - new Tab { Id = "home", Title = "🏠 Home", Visible = true, Disabled = false }, - new Tab { Id = "profile", Title = "👤 Profile", Visible = true, Disabled = false }, - new Tab { Id = "settings", Title = "⚙️ Settings", Visible = true, Disabled = false } -}; + { + new Tab { Id = "home", Title = "🏠 Home", Visible = true, Disabled = false }, + new Tab { Id = "profile", Title = "👤 Profile", Visible = true, Disabled = false }, + new Tab { Id = "settings", Title = "⚙️ Settings", Visible = true, Disabled = false } + }; public class Tab { From acf90119bf0759e05917d35dcb0b17e47798dc69 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 6 Jun 2025 10:22:31 +0300 Subject: [PATCH 17/24] Merge dimodi-patch-1-2997 into production (#3003) * kb(Grid): Update KB to work in Safari * Update knowledge-base/grid-remove-group-indent.md --------- Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/grid-remove-group-indent.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-remove-group-indent.md b/knowledge-base/grid-remove-group-indent.md index e48cb8ea0..fb0bdb566 100644 --- a/knowledge-base/grid-remove-group-indent.md +++ b/knowledge-base/grid-remove-group-indent.md @@ -48,7 +48,7 @@ To remove the group indent in the [Grid for Blazor](slug:grid-overview) and hide