Convert to Telerik Application
This article demonstrates how to enable the Progress® Telerik® UI for Blazor components in you existing Blazor app with a few mouse clicks.
To add the Telerik Components to you existing Blazor application, use the 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 to make sure you are up to date.
Get the Wizard
To use the Convert Project Wizard, install the Telerik UI for Blazor Visual Studio Extensions. You can get them from the:
Start the Wizard
To start the wizard, do the following:
- In the Solution Explorer, select the Blazor app you want to add the Telerik components to (either WebAssembly, or Server-side Blazor)
- Right click the project file and select Telerik UI for Blazor > Convert to Telerik Application.
- Follow the wizard.
Alternatively, instead of the context menu, you can use the extensions menu at the top:
- In the Solution Explorer, select the Blazor app you want to add the Telerik components to (either WebAssembly, or Server-side Blazor)
- Open the Extensions menu.
- Click Telerik > Telerik UI for Blazor > Convert to Telerik Application.
- Follow the wizard.
Start the Convert Wizard from the project context menu
Start the wizard from the Extensions menu
The wizard provides you with the following options:
- 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>).
To get a better understanding of what the wizard does for you, see either of the following articles:
- Getting Started with Client-side apps
- Getting Started with Server-side apps
- Overview of what you need
Troubleshooting
There are three common problems when converting a project:
- The convertion wizard fails with an error screen
- The Telerik components do not work after you run the converted project
- 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 WebAssemly 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.
In case the automation fails for other reasons and you see an exception dialog message from the Telerik extensions, it is likely that something a bit peculiar is happening with the particular project and you would have to perform the steps by hand. There are only three, and you can find them in the What You Need article.
Error screen when the project can't be converted
Components Fail
The issue can manifest in a couple of ways:
- The components have no styling
- There are JavaScript errors that Telerik objects cannot be found
The most common reason for this problem is a mismatch between the installed version and the actual license that you have. For example, the wizard did not properly detect it, or there is only a Trial version installed, but already have a license, but simply never installed the new version.
At its root, the problem stems from wrong paths to the needed web assets and you can easily fix it by opening your index file (wwwroot/index.html for a WebAssembly app, and Pages/_Host.cshtml for a server-side Blazor app) - the wizard has left comments in the <head> near the Telerik assets that show the correct paths for a trial and commercial license.
Extra Shared Folder
You may get a Shared folder that contains a file TelerikLayout.razor in an unexpected place in the project. This can happen when a folder in the project was selected instead of the project itself, when running the convert wizard.
The fix is to simply move the TelerikLayout.razor file to the original Shared folder of your project, next to the MainLayout.razor file.