Telerik UI for Blazor

Use when building or modifying Blazor applications that use Telerik UI for Blazor components (Grid, Charts, DropDownList, Scheduler, DatePicker, etc.).

Prerequisites

Interactive render mode required – Telerik components do not work in static SSR. Use Global Interactivity (recommended) or Per page/component interactivity.
.NET 8+ for Blazor Web App; supports Blazor Server, Blazor WebAssembly, Blazor Hybrid.
License – Trial or commercial license required. Place telerik-license.txt at:
- Windows: %AppData%\Telerik\telerik-license.txt
- Mac/Linux: ~/.telerik/telerik-license.txt

Setup

1. NuGet Source

dotnet nuget add source https://nuget.telerik.com/v3/index.json \
  --name TelerikOnlineFeed \
  --username api-key \
  --password <YOUR-NUGET-API-KEY> \
  --store-password-in-clear-text

2. Install Package

dotnet add package Telerik.UI.for.Blazor

For Blazor Web App with WebAssembly/Auto: add to both Server and Client projects.

3. Client Assets (App.razor or index.html)

<head>
  <link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" />
  <script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js"></script>
</head>

4. Register Service (Program.cs)

builder.Services.AddTelerikBlazor();

5. _Imports.razor

@using Telerik.Blazor
@using Telerik.Blazor.Components
@using Telerik.SvgIcons
@using Telerik.FontIcons

6. TelerikRootComponent (MainLayout.razor)

@inherits LayoutComponentBase

<TelerikRootComponent>
    @Body
</TelerikRootComponent>

TelerikRootComponent must wrap all content. For Per page/component interactivity, add it to each interactive page that uses Telerik components.

Quick Reference: Key Components

Component	Tag	Key Properties
Grid	`<TelerikGrid>`	`Data`, `OnRead`, `PageSize`, `Sortable`, `Filterable`
GridColumn	`<GridColumn>`	`Field`, `Title`, `DisplayFormat`
DropDownList	`<TelerikDropDownList>`	`Data`, `TextField`, `ValueField`, `@bind-Value`
ComboBox	`<TelerikComboBox>`	Same as DropDownList + `Filterable`
DatePicker	`<TelerikDatePicker>`	`@bind-Value`
DateTimePicker	`<TelerikDateTimePicker>`	`@bind-Value`
Button	`<TelerikButton>`	`OnClick`, `ThemeColor`
TextBox	`<TelerikTextBox>`	`@bind-Value`
NumericTextBox	`<TelerikNumericTextBox>`	`@bind-Value`
Chart	`<TelerikChart>`	`CategoryAxis`, `Series`
Scheduler	`<TelerikScheduler>`	`Data`, `Date`

Common Patterns

Grid with Data Binding

<TelerikGrid Data="@MyData" Pageable="true" PageSize="10" Sortable="true" Filterable="true" Height="400px">
    <GridColumns>
        <GridColumn Field="@nameof(Product.ProductID)" Title="ID" />
        <GridColumn Field="@nameof(Product.ProductName)" Title="Product Name" />
        <GridColumn Field="@nameof(Product.UnitPrice)" Title="Unit Price" DisplayFormat="{0:C}" />
    </GridColumns>
</TelerikGrid>

@code {
    private List<Product> MyData { get; set; }
}

Grid with OnRead (Server-Side Paging/Sorting)

<TelerikGrid TItem="Product"
             OnRead="@OnReadHandler"
             Pageable="true"
             PageSize="10"
             Sortable="true"
             Filterable="true">
    <GridColumns>
        <GridColumn Field="@nameof(Product.ProductName)" Title="Name" />
    </GridColumns>
</TelerikGrid>

@code {
    private async Task OnReadHandler(GridReadEventArgs args)
    {
        var result = await MyService.GetProducts(
            args.Request.Page,
            args.Request.PageSize,
            args.Request.Sorts,
            args.Request.Filters);
        args.Data = result.Data;
        args.Total = result.Total;
    }
}

DropDownList with Objects

<TelerikDropDownList TItem="Category"
                    TValue="int?"
                    Data="@Categories"
                    TextField="Text"
                    ValueField="Value"
                    @bind-Value="@SelectedCategory"
                    DefaultText="Select category..."
                    ValueChange="@OnCategoryChange" />

@code {
    private List<Category> Categories { get; set; }
    private int? SelectedCategory { get; set; }

    private void OnCategoryChange(int? value)
    {
        SelectedCategory = value;
        // Refresh grid, etc.
    }
}

DropDownList in Grid Editor (Popup/Inline Editing)

<GridColumn Field="@nameof(Order.CategoryId)" Title="Category">
    <EditorTemplate>
        <TelerikDropDownList TItem="Category"
                            TValue="int"
                            Data="@Categories"
                            TextField="Text"
                            ValueField="Value"
                            @bind-Value="@context.CategoryId" />
    </EditorTemplate>
</GridColumn>

Custom Cell Template

<GridColumn Field="@nameof(Product.Discontinued)" Title="Discontinued">
    <Template>
        <input type="checkbox" checked="@context.Discontinued" disabled />
    </Template>
</GridColumn>

Button with Click Handler

<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Primary"
               OnClick="@SayHello">Click Me</TelerikButton>

@code {
    private void SayHello() { /* ... */ }
}

Theming

Add the theme stylesheet in App.razor or index.html:

<link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" />

Other themes: kendo-theme-bootstrap, kendo-theme-material, kendo-theme-fluent. Customize with ThemeBuilder.

Gotchas

Static SSR: Telerik components will not work in static server-side rendering. Charts, Barcodes, Gauges, Maps, QR Codes won’t render at all in static SSR.
Account/Identity pages: Blazor Web App identity section is static; Telerik components won’t work there.
Per component interactivity: Wrap each interactive page with <TelerikRootComponent> or use Global Interactivity.
@bind-Value vs Value + ValueChanged: Use @bind-Value for two-way binding, or Value + ValueChanged for one-way with manual updates.
Grid reference: Use @ref to get a TelerikGrid reference for .Rebind(), .ExportToExcel(), etc.
GridColumn Field: Prefer @nameof(Model.Property) to avoid typos.

alyssamichelle/skills-blazor.md

Select an option

No results found