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.

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.5.0/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 by 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#**

    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();
            }
        }
    }

Project Configuration

To have the framework recognize the Telerik Components, you must register them in the Startup.cs file of your Blazor project (if you are using client-side Blazor, this is the Client web application's 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
    }
}

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 Considerations

If you are using a client-side Blazor project:

  1. Open the Client .csproj file and add the following configuration setting:

    .csproj

      <ItemGroup>
        <BlazorLinkerDescriptor Include="Linker.xml" />
      </ItemGroup> 
    
  2. Add a Linker.xml file to the Client project with the following content (make sure to use your actual app name at the end):

    Linker.xml

    <?xml version="1.0" encoding="UTF-8" ?>
    <!--
      This file specifies which parts of the BCL or Blazor packages must not be
      stripped by the IL Linker even if they aren't referenced by user code.
    -->
    <linker>
        <assembly fullname="mscorlib">
            <!--
          Preserve the methods in WasmRuntime because its methods are called by
          JavaScript client-side code to implement timers.
          Fixes: https://github.com/aspnet/Blazor/issues/239
        -->
            <type fullname="System.Threading.WasmRuntime" />
        </assembly>
        <assembly fullname="System.Core">
            <!--
          System.Linq.Expressions* is required by Json.NET and any
          expression.Compile caller. The assembly isn't stripped.
        -->
            <type fullname="System.Linq.Expressions*" />
            <type fullname="System.Linq.Queryable*" />
            <type fullname="System.Linq.Enumerable*" />
            <type fullname="System.Linq.EnumerableRewriter*" />
        </assembly>
        <!--
        In this example, the app's entry point assembly is listed. The assembly
        isn't stripped by the IL Linker.
      -->
        <assembly fullname="ClientBlazorApp.Client" />
    </linker>
    

    You can read more about configuring the linker in MSDN: https://docs.microsoft.com/en-us/aspnet/core/host-and-deploy/blazor/configure-linker?view=aspnetcore-3.0#control-linking-with-a-configuration-file.

    Without such a linker configuration, the linker strips aggressively extension methods and this breaks our components.

See Also

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