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

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.

This article is a shorter, more focused version of the Getting Started articles and targets people who are familiar with the Telerik NuGet Feed and Blazor in general. If you are looking for step-by-step tutorials, see the Client-side Blazor - Tutorial and Server-side Blazor - Tutorial articles.

If you want to add the Telerik components to an existing Blazor 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 manually.

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

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

    // 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>
    . . .
    <!-- Choose only one of the themes -->

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

    <!-- 
        <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.20.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>
    . . .
    <!-- Choose only one of the themes -->

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

    <!-- 
        <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.20.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.

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

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.

  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:

    TelerikLayout.razor

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

    MainLayout.razor

    @layout TelerikLayout
    
    @* more 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 - it is fully runnable and you can inspect, modify and copy the code from it. 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 fully featured Telerik Grid in 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