Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions getting-started/vs-integration/configure-project-wizard.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
---
title: Configuring Existing Telerik Projects
page_title: Setting Up Existing Telerik Projects - Visual Studio Integration
description: Learn how to configure your existing Telerik UI for Blazor application with a few clicks by using the Project Configuration Wizard supporting the Visual Studio (VS) extensions.
slug: getting-started-vs-integration-configure-project
position: 4
---

# Configuring Existing Telerik UI for Blazor Projects

This article demonstrates how to configure an existing Telerik UI for Blazor application by using the Project Configuration Wizard. The wizard comes with the Telerik UI for Blazor VS extensions and helps you to modify settings like the visual theme, CDN utilization, and configuration for content localizing in existing projects.

To use the wizard, your project must be already [configured as a Telerik UI for Blazor application]({%slug getting-started-vs-integration-convert-project%}) and be able to use the Telerik UI components.

To open the Project Configuration Wizard, click **Extensions** > **Telerik** > **Telerik UI for Blazor** > **Configure Project**.

![Telerik UI for Blazor Visual Studio 2022 Extensions menu](../vs-integration/images/configure-project-open.png)

The configuration wizard handles the following tasks:
- [Theme selection](#theme-selection)
- [Project settings configuration](#project-settings)

## Theme Selection

The **Theme Selection** page enables you to change the [visual theme](https://docs.telerik.com/blazor-ui/styling-and-themes/overview#built-in-themes) of your Telerik UI for Blazor application.

![Theme Selection menu in the Project Configuration Wizard](../vs-integration/images/configure-theme.png)

After selecting the desired theme, click **Next** to navigate to the [Project Settings](#project-settings) page.

## Project Settings

The **Project Settings** page allows you to enable or disable the [Telerik UI CDN support](https://docs.telerik.com/blazor-ui/getting-started/what-you-need#using-cdn).

![Project Settings dialog in the Project Configuration Wizard](../vs-integration/images/configure-settings.png)

## See Also

* [Visual Studio Integration for Telerik UI for Blazor Overview]({% slug getting-started-vs-integration-overview %})
* [Converting to Telerik Projects]({% slug getting-started-vs-integration-convert-project %})
82 changes: 35 additions & 47 deletions getting-started/vs-integration/convert-project-wizard.md
Original file line number Diff line number Diff line change
@@ -1,102 +1,93 @@
---
title: Convert to Telerik Project
page_title: Convert to Telerik Project - Visual Studio Integration
description: Learn how to convert your existing Blazor app to use Telerik components in it with a few clicks through our Visual Studio Templates.
title: Converting to Telerik Projects
page_title: Converting Existing Apps to Telerik Projects - Visual Studio Integration
description: Learn how to convert your existing Blazor application and use Telerik UI for Blazor components in your project with a few clicks through the supported Visual Studio templates.
slug: getting-started-vs-integration-convert-project
position: 3
---

# Convert to Telerik Application
# Converting Existing Projects to Telerik Apps

This article demonstrates how to enable the Progress® Telerik® UI for Blazor components in your existing Blazor app with a few mouse clicks. This can be helpful if you already have a substantial app, or you want to use the Microsoft templates to start with features like authentication and add UI components later.
This article demonstrates how to enable the Progress® Telerik® UI for Blazor components in your existing Blazor app with a few mouse clicks. The supported integration is helpful if you already have a substantial app, or if you want to use the Microsoft templates to start with features like authentication and add the UI components later.

To add the Telerik Components to your existing Blazor application, use the **Convert Project** wizard. The wizard detects all installed versions of Telerik UI for Blazor and lists them in the **Version** combobox—this enables you to start your project with the desired version. You can also [get the latest version]({%slug getting-started-vs-integration-latest-version%}) to make sure you are up to date.
To add the Telerik UI components to your existing Blazor application, use the Convert Project Wizard. The wizard detects all installed versions of Telerik UI for Blazor and lists them in the **Version** combobox—this feature enables you to start your project with the desired version. To make sure you are up to date, you can also [get the latest version]({%slug getting-started-vs-integration-latest-version%}).

The wizard automates several steps for you that you otherwise must perform manually:
The Convert Project Wizard automates a set of steps that you otherwise must perform manually.

* Adding the client assets to your project:
The wizard adds the following client assets to your project:
* [Telerik stylesheet]({%slug getting-started/what-you-need%}#adding-the-client-assets)
* [JS Interop file]({%slug getting-started/what-you-need%}#adding-the-client-assets)

* Adding the [Telerik stylesheet]({%slug getting-started/what-you-need%}#adding-the-client-assets).
* Adding the [JS Interop file]({%slug getting-started/what-you-need%}#adding-the-client-assets).
The wizard also configures the project to use the Telerik UI for Blazor components by adding the following utilities:
* [Required `@using` directives]({%slug getting-started/what-you-need%}#common-configuration) to the `~/_Imports.razor` file.
* [`TelerikLayout.razor` component]({%slug getting-started/what-you-need%}#common-configuration) at the root level of the DOM.
* Registration for the Telerik services for [client-side projects]({%slug getting-started/what-you-need%}#client-side-project-specifics) and for [server-side projects]({%slug getting-started/what-you-need%}#server-side-project-specifics).

* Configuring the project to use the Telerik UI for Blazor components:
## Getting the Wizard

* Adding the [required `@using` directives]({%slug getting-started/what-you-need%}#common-configuration) to the `~/_Imports.razor` file.
* Adding the [`TelerikLayout.razor` component]({%slug getting-started/what-you-need%}#common-configuration) at the root level of the DOM.
* Registering the Telerik services for [client-side projects]({%slug getting-started/what-you-need%}#client-side-project-specifics) and for [server-side projects]({%slug getting-started/what-you-need%}#server-side-project-specifics).
To use the Convert Project Wizard, install the Telerik UI for Blazor Visual Studio (VS) extensions. @[template](/_contentTemplates/common/general-info.md#vsx-download)

## Get the Wizard
## Starting the Wizard

To use the **Convert Project** wizard, install the Telerik UI for Blazor Visual Studio Extensions. @[template](/_contentTemplates/common/general-info.md#vsx-download)



## Start the Wizard

You have two options to start the wizard:
To start the wizard, use either of the following options:

* [The Project Context Menu](#project-context-menu)
* [The VS Extensions Menu](#extensions-menu)

### Project Context Menu

1. In the **Solution Explorer**, select the Blazor app where you want to add the Telerik components (either WebAssembly, or Server-side Blazor).
1. Right click the project node, and then select **Telerik UI for Blazor** > **Convert to Telerik Application**.
1. Follow the wizard.
1. Right-click the project node and, then, select **Telerik UI for Blazor** > **Convert to Telerik Application**.
1. Follow the instructions.

>caption Start the Convert Wizard from the project context menu
>caption Start the Convert Project Wizard from the project context menu

![Start the Convert Project Wizard from the context menu](images/convert-wizard-from-context-menu.png)

### Extensions Menu

Alternatively, instead of the context menu, you can use the Visual Studio extensions menu at the top:
Alternatively, instead of the context menu, you can use the VS **Extensions** menu at the top:

1. In the **Solution Explorer**, select the Blazor app where you want to add the Telerik components (either WebAssembly, or Server-side Blazor).
1. Open the **Extensions** menu.
1. Click **Telerik** > **Telerik UI for Blazor** > **Convert to Telerik Application**.
1. Follow the wizard.
1. Follow the instructions.

>caption Start the Convert Project Wizard from the Extensions menu

>caption Start the wizard from the Extensions menu

![Start the Convert Project Wizard](images/vs-ext-convert-project-entry.png)

## Features

The wizard provides you with the following options:

1. The ability to download the latest available version.
1. A version selector so you can choose a particular version to add to the project.
1. A list with the versions found on your machine that you can choose from.
1. Whether to back up the project state before the conversion (in a folder called `<ProjectName>_Backup>_<timestamp>`).
* The ability to download the latest available version.
* A version selector so you can choose a particular version to add to the project.
* A list with the versions found on your machine that you can choose from.
* Whether to back up the project state before the conversion (in a folder called `<ProjectName>_Backup>_<timestamp>`).

>caption The Convert Project Wizard Options

![The Convert Project Wizard Options](images/convert-project-wizard-options.png)



The wizard automates several steps for you that you can also perform manually. To get a better understanding of what the wizard does for you, see either of the following articles (they provide the same information in different formats):

## Troubleshooting

There are three common problems when converting a project:
When converting a project, you may encounter the following most common issuess:

* The conversion wizard fails with an [error screen](#error-screen).
* The [Telerik components do not work](#components-fail) after you run the converted project.
* An [extra shared folder](#extra-shared-folder) appears.

### Error Screen

If you see an error screen similar to the one below, make sure that the actual Blazor application is selected in the Solution Explorer. This is most common with WebAssembly types of applications as they consist of a Server and Shared projects by default, and only the Client project is the actual Blazor app that needs the Telerik components.
If you see an error screen similar to the one below, make sure that the actual Blazor application is selected in the Solution Explorer. This is most common with WebAssembly types of applications as they consist of a server and shared projects by default, and only the client project is the actual Blazor app that needs the Telerik components.

Some specific project settings can also cause an exception during conversion. The fastest solution is to [configure the project for the Telerik components manually]({%slug getting-started/what-you-need%}).
Some specific project settings can also cause an exception during conversion. The fastest solution is to [manually configure the project for the Telerik components]({%slug getting-started/what-you-need%}).

>caption Error screen when the project can't be converted

![The Convert Project Failed](images/convert-project-wizard-failed.png)


### Components Fail

The issue can manifest in a couple of ways:
Expand All @@ -117,19 +108,16 @@ The cause are wrong paths to the needed web assets. To resolve this open the ind

Look for the comments left by the wizard. The comments are in the `<head>` near the Telerik assets and show the correct paths for a trial and commercial license.


### Extra Shared Folder

You may get a `Shared` folder that contains a `TelerikLayout.razor` file at an unexpected place in the project. This can happen if a folder in the project was selected instead of the project itself when running the convert wizard.

The fix is to move the `TelerikLayout.razor` file to the original `Shared` folder of your project, next to the `MainLayout.razor` file.


## See Also

* [Visual Studio Extensions Overview]({% slug getting-started-vs-integration-overview %})
* [Telerik UI for Blazor Visual Studio Extensions Overview]({% slug getting-started-vs-integration-overview %})
* [Downloading the Latest Telerik UI for Blazor Versions]({% slug getting-started-vs-integration-latest-version %})
* [Getting Started with Client-side apps]({%slug getting-started/client-side%})
* [Getting Started with Server-side apps]({%slug getting-started/server-side%})
* [Getting Started with Client-Side Apps]({%slug getting-started/client-side%})
* [Getting Started with Server-Side Apps]({%slug getting-started/server-side%})
* [Workflow for Using the UI Components for Blazor]({%slug getting-started/what-you-need%})

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 8 additions & 11 deletions getting-started/vs-integration/introduction.md
Original file line number Diff line number Diff line change
@@ -1,38 +1,35 @@
---
title: Overview
page_title: Visual Studio Integration Overview
description: Learn how to enhance your experience in developing web applications with Progress Telerik UI for Blazor.
description: Learn how to enhance your experience in developing web applications with the Progress Telerik UI for Blazor library.
slug: getting-started-vs-integration-overview
position: 1
---

# Visual Studio Integration Overview

To integrate with Visual Studio, Telerik UI for Blazor provides Visual Studio (VS) Extensions. These extensions enhance the experience in developing Blazor web applications with Telerik UI for Blazor.
To integrate with Visual Studio (VS), Telerik UI for Blazor provides VS extensions. These extensions enhance the experience in developing Blazor web applications with Telerik UI for Blazor.

{% if site.has_cta_panels == true %}
{% include cta-panel-introduction.html %}
{% endif %}

The Telerik Blazor Extensions provide the following advantages:
The Telerik UI for Blazor extensions provide the following advantages:

* They facilitate the [creation of projects]({% slug getting-started-vs-integration-new-project %}) and enable you to create a pre-configured project from a template so you can start using the Telerik UI for Blazor components immediately without additional project setup.
* They facilitate the [creation of projects]({% slug getting-started-vs-integration-new-project %}) and enable you to create a pre-configured project from a template. In this way, you can start using the Telerik UI for Blazor components immediately without additional project setup.

* They allow you to [add the Telerik Components to an existing project]({%slug getting-started-vs-integration-convert-project%}) with a few clicks.
* They allow you to [add the Telerik UI components to an existing project]({%slug getting-started-vs-integration-convert-project%}) with a few clicks.

* They notify you about [new component versions]({%slug getting-started-vs-integration-latest-version %}).


The Telerik UI for Blazor VS extension supports Visual Studio 2022 and 2019. @[template](/_contentTemplates/common/general-info.md#vsx-download)
The Telerik UI for Blazor VS extensions support Visual Studio 2022 and 2019. @[template](/_contentTemplates/common/general-info.md#vsx-download)

To access the VS extensions, go to the **Extensions** > **Telerik** > **Telerik UI for Blazor** menu.

![Blazor Open Vs Extensions](images/open-vs-extensions.png)


![Telerik UI for Blazor Visual Studio Extensions window](images/open-vs-extensions.png)

## See Also

* [Creating New Projects with Visual Studio]({% slug getting-started-vs-integration-new-project %})
* [Convert Projects with Visual Studio]({% slug getting-started-vs-integration-convert-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 %})
29 changes: 14 additions & 15 deletions getting-started/vs-integration/latest-version-retrieval.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
title: Download New Versions
page_title: Download New Versions - Visual Studio Integration
description: Learn how to keep your projects updated when using Telerik UI for Blazor.
title: Downloading New Versions
page_title: Downloading New Versions - Visual Studio Integration
description: Learn how to keep your projects updated when using the Telerik UI for Blazor library.
slug: getting-started-vs-integration-latest-version
position: 4
position: 5
---

# Download New Versions
# Downloading New Versions

The Progress&reg; Telerik&reg; UI for Blazor Visual Studio (VS) Extensions allow you to download the latest version of the UI components without leaving Visual Studio.
The Progress&reg; Telerik&reg; UI for Blazor Visual Studio (VS) extensions allow you to download the latest version of the UI components without leaving Visual Studio.


<!--
Expand All @@ -21,26 +21,25 @@ Clicking the **Update Now** button starts the Latest Version Acquirer tool which
-->


Clicking the **Get Latest** button in the [Create New Project]({% slug getting-started-vs-integration-new-project %}) wizard starts the Latest Version Acquirer tool. The tool checks for new versions of the UI components and allows you to download them to your computer. You must enter your Telerik credentials to continue. If you do not have a [www.telerik.com](https://www.telerik.com) account, select the **Create an account for free** link.
Clicking the **Get Latest** button in the [Create New Project]({% slug getting-started-vs-integration-new-project %}) wizard starts the Latest Version Acquirer tool. The tool checks for new versions of the UI components and allows you to download them to your computer. To continue, you must enter your Telerik credentials. If you do not have a [www.telerik.com](https://www.telerik.com) account, select the **Create an account for free** link.

1. Log in with your Telerik credentials
1. Log in with your Telerik credentials.

![First, log in](images/login-vs-ext-download.png)
![Log into your Telerik account](images/login-vs-ext-download.png)

>tip See the [Telerik UI for Blazor release notes](https://www.telerik.com/support/whats-new/blazor-ui/release-history) for more information on the latest available versions.
>tip For more information on the latest available versions, see the [Telerik UI for Blazor release notes](https://www.telerik.com/support/whats-new/blazor-ui/release-history).

1. In the dialog that appears, click the **Download** button.

![Confirming the download of the latest version dialog](images/download-new-version.png)

1. Return to the [Create New Project]({% slug getting-started-vs-integration-new-project %}) wizard and select the newly downloaded version from the dropdown menu.
1. Return to the [Create New Project]({% slug getting-started-vs-integration-new-project %}) wizard and select the newly downloaded version from the drop-down menu.

![The new version is now available in the New Project wizard](images/new-version-in-new-project-wizard.png)


The **Latest Version Acquirer** tool downloads a `.zip` file that contains the latest Telerik UI for Blazor packages. It is saved in the `%APPDATA%\Telerik\Updates` folder by default. If the list with the offered packages gets too long and you do not need the older versions, close VS and use the Windows Explorer to delete these distributions.

The Latest Version Acquirer tool downloads a `.zip` file that contains the latest Telerik UI for Blazor packages. By default, the file is saved in the `%APPDATA%\Telerik\Updates` folder. If the list with the offered packages gets too long and you do not need the prior versions, close VS and use the Windows Explorer to delete these distributions.

## See Also

* [Visual Studio Extensions Overview]({% slug getting-started-vs-integration-overview %})
* [Telerik UI for Blazor Visual Studio Extensions Overview]({% slug getting-started-vs-integration-overview %})
* [Creating New Projects with Visual Studio]({% slug getting-started-vs-integration-new-project %})
Loading