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

If you want to add the Telerik components to an existing project, our Convert Project Wizard for VS can do this for you. If you will be starting a new project, our New Project Wizard for VS or VS Code Wizard can create one for you.

You can review the rest of this article for information on how things work and what is required to get the Telerik components in a project.

Telerik Specific Packages

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

  • Telerik.UI.for.Blazor - the only one you need to explicitly reference - the UI components code
  • Telerik.DataSource - code for working with data, needed for data binding the components
  • Telerik.Recurrence - code for working with recurring appointments (e.g., in the scheduler)

Adding the Telerik.UI.for.Blazor package to your project will automatically add the Telerik.DataSource and Telerik.Recurrence packages as dependencies.

For trial purposes, the package names have the .Trial suffix, for example Telerik.UI.for.Blazor.Trial, Telerik.DataSource.Trial and Telerik.Recurrence.Trial.

Exporting features use the Telerik.Documents.SpreadsheetStreaming package as well, and it also comes in as a dependency automatically.

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:

    <head>
      . . .
        <link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" />
    
        <!-- For Trial licenses use
            <link rel="stylesheet" href="_content/Telerik.UI.for.Blazor.Trial/css/kendo-theme-default/all.css" />
          -->
    </head>
    
  • Our JS Interop file. It provides features that cannot be implemented with native Blazor.

    <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>
    

Static Assets

You can add the JS Interop file as a static asset from our package. Static assets (the _content folder) are automatically included in the solution from the NuGet package during build, 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.

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
            }
        }
    }

CDN

You can reference the built-in Telerik assets from a cloud CDN instead of a local resource on your server.

Reference the Telerik assets from the cloud in a WebAssembly app

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

    <!-- Choose only one of the themes -->
    <!-- 
        <link href="https://unpkg.com/@progress/kendo-theme-bootstrap@latest/dist/all.css" rel="stylesheet" />
        <link href="https://unpkg.com/@progress/kendo-theme-material@latest/dist/all.css" rel="stylesheet" />
    -->

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

 . . .

</html>

Reference the Telerik assets from the cloud in a Server-side app

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

    <!-- Choose only one of the themes -->
    <!-- 
        <link href="https://unpkg.com/@@progress/kendo-theme-bootstrap@@latest/dist/all.css" rel="stylesheet" />
        <link href="https://unpkg.com/@@progress/kendo-theme-material@@latest/dist/all.css" rel="stylesheet" />
    -->

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

 . . .

</html>

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

We are considering a better CDN option for the themes. Until then, you can use the unpkg workaround above, or local dependency management as described below.

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.

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

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

using Microsoft.AspNetCore.Components.WebAssembly.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.Services.AddBaseAddressHttpClient();
            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 register services 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