What You Need to Use the Telerik Blazor Components

This article explains the packages you need to use the Telerik UI for Blazor components, how to get them, and how to configure your project to include the Telerik Blazor components.

To use the Telerik UI for Blazor, you need to:

  1. get the Telerik Blazor packages in your project
  2. add the client assets
  3. set up the project to recognize the Telerik components

Telerik Specific Packages

The Telerik UI for Blazor component suite requires the following two Telerik-specific NuGet packages:

  • Telerik.UI.for.Blazor
  • Telerik.DataSource

Adding the Telerik.UI.for.Blazor package to your project will automatically add the Telerik.DataSource package as a dependency.

For trial purposes, the package names are Telerik.UI.for.Blazor.Trial and Telerik.DataSource.Trial.

There are four ways to get these packages:

  • The Telerik private NuGet feed that requires an Internet connection and credentials. It also provides information about updates and new versions.

  • The Automated MSI installer. You can download it from your account once and use without an Internet connection. It does not provide information about new versions. Depending on your setup, it may require elevated privileges to run the install wizard. Also provides an offline version of our demos and our VS extensions.

  • The ZIP archive package. You can download it from your account once and it does not require Internet connection after that. It does not provide information about new versions, and does not require installation. Also provides an offline version of our demos.

  • The standalone .nupkg files. They are the bare minimum that is required. To use them, follow the instructions for using the ZIP archive, but download the .nupkg files instead.

Client Assets

To have the Telerik Blazor components look and behave as expected in the browser, you need the some assets. Add the following to your main index file. For a server-side Blazor app it is ~/Pages/_Host.cshtml, and for a client-side Blazor app, it is wwwroot/index.html.

  • Our component's stylesheet. You can read more about it in the Themes article. Here is a short example:

    HTML

    <head>
        . . .
        <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css" />
    </head>
    

    For a server-side app, escape the @ symbols as @@.

  • Our JS Interop file. It provides features that cannot be implemented with native Blazor.

    HTML

    <head>
      . . .
      <script src="https://kendo.cdn.telerik.com/blazor/2.7.1/telerik-blazor.min.js" defer></script>
    </head>
    

    Make sure that the version in the URL matches the version of the Telerik UI for Blazor package.

    We recommend using the static assets approach instead of a CDN, because it relies on the static assets feature from the framework, and takes the correct file from our package, so you don't have to remember to update the CDN path when upgrading to a newer version.

Static Assets

You can add the JS Interop file as a static asset from our package, instead of using a CDN. Static assets (the _content folder) are automatically included in the solution from the NuGet package, so all that's needed is then to reference the asset as shown below. The _content folder is expanded by the framework into the local nuget cache, and the project copies it from there.

**HTML**

    <head>
      . . .
      <script src="_content/telerik.ui.for.blazor/js/telerik-blazor.js" defer></script>
      <!-- For Trial licenses use
        <script src="_content/telerik.ui.for.blazor.trial/js/telerik-blazor.js" defer></script>
      -->
    </head>

Note that To enable the use of static assets in your project, make sure you have the following line to your Server project Startup.cs file:

**C#**

    // Startup.cs
    namespace MyBlazorAppName
    {
        public class Startup
        {
            public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
            {
                //more code may be present here

                //make sure this is present to enable static files from a package
                app.UseStaticFiles();

                //more code may be present here
            }
        }
    }

Project Configuration

To use the Telerik Components, you must add a few items to your projects. Depending on the type of project (server-side or client-side), the steps differ slightly in syntax.

  1. Follow the Common Configuration instructions
  2. Follow the section for your project type - Client-side (WASM) or Server-side

Common Configuration

You can have the project recognize all our components without explicit @using statements on every .razor file. It is enough to add the following to your ~/_Imports.razor file:

@using Telerik.Blazor
@using Telerik.Blazor.Components

To allow working with detached popups (for example, dropdown lists, menus, grid filters, etc.), a Telerik-specific Blazor component is needed at the root level of the DOM. Open the main layout file (by default, the ~/Shared/MainLayout.razor file in the Blazor project) and add a <TelerikRootComponent> element at its root level. The layout file should look similar to this (there may be additional elements in your app):


        @inherits LayoutComponentBase

        <TelerikRootComponent>

            <div class="sidebar">
                <NavMenu />
            </div>

            <div class="main">
                @Body
            </div>

        </TelerikRootComponent>

Client-side Project Specifics

If you are using a client-side Blazor project: Open the Client .csproj file and ensure that the following switch is present. At the moment the IL Linker needs to be disabled because of an issue where it strips aggressively extension methods.

**.csproj**

    <PropertyGroup>
        <!-- there may be other elements here -->
        <BlazorLinkOnBuild>false</BlazorLinkOnBuild>
    </PropertyGroup>

The final step is to register the Telerik services. In a client-side Blazor project, you do that in the Program.cs file of the WebAssembly (Client) project:

using Microsoft.AspNetCore.Blazor.Hosting;
using Microsoft.Extensions.DependencyInjection;
using System.Threading.Tasks;

namespace ClientBlazorProject.Client // make sure this matches your actual WASM project namespace
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            // sample host builder for a WASM app, yours may differ
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            // there may be more code here

            // register the Telerik services
            builder.Services.AddTelerikBlazor();

            // there may be more code here
            // sample host builder for a WASM app, yours may differ
            await builder.Build().RunAsync();
        }
    }
}

Server-side Project Specifics

The final step is to register the Telerik services. In a server-side Blazor project, you do that in the Startup.cs file:

namespace MyBlazorAppName
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            //more code may be present here
            services.AddTelerikBlazor();
        }

        //more code may be present here
    }
}

See Also

In this article
Not finding the help you need? Improve this article