New to Telerik UI for Blazor? Download free 30-day trial

What You Need to Use the Telerik Blazor Components

This article describes the packages that provide the Telerik UI for Blazor components, how to get them, and how to manually configure your project to use them.

This article is a shorter, more focused version of the Client-Side Blazor and Server-Side Blazor step-by-step tutorials and targets people who are familiar with the Telerik NuGet Feed and Blazor in general.

Telerik UI for Blazor provides wizards that can automatically configure a project for you:

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 components suite requires the following Telerik-specific NuGet packages:

  • Telerik.UI.for.Blazor - This is the only package that you must reference explicitly because it contains the code for the UI components. Adding the package to your project will automatically add the other necessary dependencies.

  • 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).

  • Telerik.Documents.SpreadsheetStreaming - Code for working with spreadsheet documents (used for exporting).

  • Telerik.Zip - Code for working with zip archives, excel files are actually archives (used for exporting).

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

Get the Telerik Packages

There are four ways to get the Telerik packages:

  • The Telerik private NuGet feed - Requires an Internet connection and authentication. It also informs you about updates and new versions.

  • The Automated MSI installer - You can download it from your Telerik account and then use it 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. It provides an offline version of the demos and allows you to install the VS extensions.

  • The ZIP archive package - You can download it from your Telerik account and then use it without an Internet connection. It does not provide information about new versions and does not require installation. It also provides an offline version of the 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 some assets. Add the following to your main index file (~/Pages/_Host.cshtml for a server-side Blazor app and wwwroot/index.html for a client-side Blazor app):

  • The Telerik stylesheet - For more information, refer to 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>
    
  • The Telerik JS Interop file - 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 Telerik JS Interop file as a static asset. Static assets (the _content folder) are automatically included in the solution from the NuGet package during build, so all you need is to reference the asset as shown in the snippet below. The _content folder is expanded by the framework into the local NuGet cache, and the project copies it from there.

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

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

<!DOCTYPE html>
<html>
<head>
    . . .
    <!-- Choose only one of the themes -->

    <link rel="stylesheet" href="https://blazor.cdn.telerik.com/blazor/2.25.0/kendo-theme-default/all.css" />

    <!-- 
        <link href="https://blazor.cdn.telerik.com/blazor/2.25.0/kendo-theme-bootstrap/all.css" rel="stylesheet" />
        <link href="https://blazor.cdn.telerik.com/blazor/2.25.0/kendo-theme-material/all.css" rel="stylesheet" />
    -->

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

 . . .

</html>

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

If you decide to use a CDN over static assets, you may want to implement a fallback if the CDN is unavailable to your users.

Telerik recommends using the static assets approach instead of a CDN. This approach relies on the static assets feature from the framework and takes the correct file from the 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. Some of these items are common, while others depend on the project type (server-side or client-side), and the steps differ slightly in syntax. To configure the project:

  1. Follow the Common Configuration instructions.

  2. Follow the section for your project type:

Common Configuration

You can set the project to recognize all Telerik components without explicit @using statements on every .razor file. To achieve this, add the following to your ~/_Imports.razor file:

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

To enable the use of detached popups (for example, dropdown lists, menus, grid filters, etc.), you must add a TelerikLayout.razor component at the root level of the DOM:

  1. Next to your main layout file (by default, the ~/Shared/MainLayout.razor file in the Blazor project), add a razor component called TelerikLayout.razor with the following content:

    @inherits LayoutComponentBase
    
    <TelerikRootComponent>
        @Body
    </TelerikRootComponent>
    
  2. Open the main layout file (by default, the ~/Shared/MainLayout.razor file in the Blazor project), and add @layout TelerikLayout as the first line in the file:

    @layout TelerikLayout
    @inherits LayoutComponentBase
    
    @* @Body and other code will be present here depending on your project *@
    

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.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            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
    }
}

Next Steps

Next, you can explore the live demos and the rest of the documentation. You can also find the entire demos project in the demos folder of your local installation. The project is runnable and you can inspect, modify, and copy its code. The project targets the latest official .NET version, and its readme file provides more details on running the project and using older versions of the framework.

Many applications have a data grid component, and you can get started with the full-featured Telerik Grid by visiting the Grid Overview article.

You can also explore the List of Components and pick the ones you are interested in.

See Also

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