Native UI Components for Microsoft’s Blazor Framework

Telerik UI for Blazor

Blazor gives you the ability to write rich web apps with C# rather than JavaScript. Telerik UI for Blazor components have been built from the ground-up to ensure you experience shorter development cycles, quick iterations and cut time to market.

See our Blazor components in action

Grid Default Grid Bootstrap Grid Material
@using Telerik.Blazor.Components.Grid

<TelerikGrid Data=@GridData EditMode="inline"
             Pageable="true" PageSize=@PageSize>
    <TelerikGridToolBar>
        <TelerikGridCommandButton Command="Create" Icon="add">Add Product</TelerikGridCommandButton>
    </TelerikGridToolBar>
    <TelerikGridColumns>
        <TelerikGridColumn Field=@nameof(Product.ProductName) Title="Product Name" />
        <TelerikGridColumn Field=@nameof(Product.UnitPrice) Title="Unit Price">
            <Template>
                @(String.Format("{0:C2}", (context as Product).UnitPrice))
            </Template>
        </TelerikGridColumn>
        <TelerikGridColumn Field=@nameof(Product.UnitsInStock) Title="Units In Stock" />
        <TelerikGridCommandColumn>
            <TelerikGridCommandButton Command="Edit" Icon="edit" OnClick="TriggerEdit">Edit</TelerikGridCommandButton>
            <TelerikGridCommandButton Command="Delete" Icon="delete">Delete</TelerikGridCommandButton>
            <TelerikGridCommandButton Command="Update" Icon="save" ShowInEdit="true" OnClick="UpdateItem">Update</TelerikGridCommandButton>
            <TelerikGridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true" OnClick="CancelItem">Cancel</TelerikGridCommandButton>
        </TelerikGridCommandColumn>
    </TelerikGridColumns>
</TelerikGrid>

@functions {
    public IEnumerable<Product> GridData { get; set; }
    public Product ProductToEdit { get; set; }
    int PageSize = 15;

    protected override void OnInit()
    {
        GridData = new List<Product>();
        for (int i = 0; i < 100; i++)
        {
            GridData.Add(new Product()
            {
                ProductId = i,
                ProductName = "Product" + i.ToString(),
                SupplierId = i,
                UnitPrice = (decimal)(i * 3.14),
                UnitsInStock = (short)(i * 1),
            });
        }
    }

    private void TriggerEdit(GridCommandEventArgs args)
    {
        var product = (args.Item as Product);

        if (product.ProductName == "Product1")
        {
            args.IsCancelled = true;
        }
    }
    private void UpdateItem(GridCommandEventArgs args)
    {
    }
    private void CancelItem(GridCommandEventArgs args)
    {
    }
}
Chart Default Chart Bootstrap Chart Material
@using Telerik.Blazor.Components.Chart
@using Telerik.Blazor

<div style="width:40%; display: inline-block;">
    <TelerikChart>
        <TelerikChartTitle Text="Gross domestic product growth /GDP annual %/"></TelerikChartTitle>
        <TelerikChartLegend Visible="false"></TelerikChartLegend>

        <TelerikChartSeriesItems>
            <TelerikChartSeries Type="ChartSeriesType.Column" Data="@Data" Field="@nameof(ModelData.Series1)"></TelerikChartSeries>
            <TelerikChartSeries Type="ChartSeriesType.Column" Data="@Data" Field="@nameof(ModelData.Series2)"></TelerikChartSeries>
            <TelerikChartSeries Type="ChartSeriesType.Column" Data="@Data" Field="@nameof(ModelData.Series3)"></TelerikChartSeries>
            <TelerikChartSeries Type="ChartSeriesType.Column" Data="@Data" Field="@nameof(ModelData.Series4)"></TelerikChartSeries>
        </TelerikChartSeriesItems>

        <TelerikChartCategoryAxes>
            <TelerikChartCategoryAxis Categories="@Categories"></TelerikChartCategoryAxis>
        </TelerikChartCategoryAxes>
    </TelerikChart>
</div>

<div style="width:50%; display: inline-block; margin-left:10px;">
    <TelerikChart>
        <TelerikChartTitle Text="What is you favourite sport?"></TelerikChartTitle>
        <TelerikChartLegend Visible="true" Position="ChartLegendPosition.Top"></TelerikChartLegend>

        <TelerikChartSeriesItems>
            <TelerikChartSeries Type="ChartSeriesType.Donut" Data="@DataForDonut" Field="@nameof(DonutData.Value)" CategoryField="@nameof(DonutData.Category)">
                <TelerikChartSeriesLabels Position="ChartSeriesLabelsPosition.OutsideEnd"
                                          Visible="true"
                                          Background="transparent"
                                          Template="#= dataItem.Category # - #= percentage*100 #%"></TelerikChartSeriesLabels>
            </TelerikChartSeries>
        </TelerikChartSeriesItems>
    </TelerikChart>
</div>

@functions {
    public class DonutData
    {
        public string Category { get; set; }
        public Int32 Value { get; set; }
    }

    public List<DonutData> DataForDonut = new List<DonutData>()
    {
        new DonutData()
        {
            Category = "Football",
            Value = 35
        },
        new DonutData()
        {
            Category = "Basketball",
            Value = 25
        },
        new DonutData()
        {
            Category = "Volleyball",
            Value = 20
        },
        new DonutData()
        {
            Category = "Rugby",
            Value = 10
        },
        new DonutData()
        {
            Category = "Tennis",
            Value = 10
        }
    };

    public class ModelData
    {
        public double Series1 { get; set; }
        public double Series2 { get; set; }
        public double Series3 { get; set; }
        public double Series4 { get; set; }
    }

    public string[] Categories = new string[] { "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011" };

    public List<ModelData> Data = new List<ModelData>()
    {
        new ModelData()
        {
            Series1 = 3.907,
            Series2 = 4.743,
            Series3 = 0.01,
            Series4 = 1.988
        },
        new ModelData()
        {
            Series1 = 7.943,
            Series2 = 7.295,
            Series3 = 0.375,
            Series4 = 2.733
        },
        new ModelData()
        {
            Series1 = 7.848,
            Series2 = 7.175,
            Series3 = 1.161,
            Series4 = 3.994
        },
        new ModelData()
        {
            Series1 = 9.284,
            Series2 = 6.376,
            Series3 = 0.684,
            Series4 = 3.464
        },
        new ModelData()
        {
            Series1 = 9.263,
            Series2 = 8.153,
            Series3 = 3.7,
            Series4 = 4.001
        },
        new ModelData()
        {
            Series1 = 9.801,
            Series2 = 8.535,
            Series3 = 3.269,
            Series4 = 3.939
        },
        new ModelData()
        {
            Series1 = 3.89,
            Series2 = 5.247,
            Series3 = 1.083,
            Series4 = 1.333
        },
        new ModelData()
        {
            Series1 = 8.238,
            Series2 = 7.832,
            Series3 = 5.127,
            Series4 = 2.245
        },
        new ModelData()
        {
            Series1 = 9.552,
            Series2 = 4.3,
            Series3 = 3.69,
            Series4 = 4.339
        },
        new ModelData()
        {
            Series1 = 6.855,
            Series2 = 4.3,
            Series3 = 2.995,
            Series4 = 2.727
        }
    };
}
Calendar Default Calendar Bootstrap Calendar Material
@using Telerik.Blazor.Components.Calendar
@using Telerik.Blazor

<TelerikCalendar SelectionMode="@CalendarSelectionMode.Single" Date="@startDate" View="@CalendarView.Year" BottomView="@CalendarView.Year">
</TelerikCalendar>
<TelerikCalendar SelectionMode="@CalendarSelectionMode.Multiple" Date="@startDate">
</TelerikCalendar>

@functions {
    private DateTime startDate = new DateTime(2019, 4, 1);//set the initial date of the calendar
}
Drop Down List Default Drop Down List Bootstrap Drop Down List Material
@using System.ComponentModel.DataAnnotations
@using Telerik.Blazor.Components.DropDownList

<EditForm Model="@employee" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary></ValidationSummary>

    <TelerikDropDownList Data="@DropDownListData" bind-Value=@SelectedValue Height="40" PopupHeight="170" DefaultItem="@DefaultItem" ValueField="ProductId" TextField="ProductName">
    </TelerikDropDownList>
    <TelerikDropDownList bind-Value="@employee.EmployeeId" Height="40" DefaultItem="@DefaultEmployeeItem" Data="@EmployeeData" ValueField="EmployeeId" TextField="Name">
    </TelerikDropDownList>

    <button class="k-button" type="submit">Submit</button>
</EditForm>

@functions  {
    public IEnumerable<Product> DropDownListData { get; set; }

    public Product DefaultItem { get; set; } = new Product()
    {
        ProductId = 0,
        ProductName = "Select a product..."
    };
    public int SelectedValue { get; set; } = 2;

    IEnumerable<DropDownValidationModel> EmployeeData { get; set; }

    DropDownValidationModel employee { get; set; } = new DropDownValidationModel();

    DropDownValidationModel DefaultEmployeeItem { get; set; } = new DropDownValidationModel()
    {
        Name = "Choose an employee"
    };

    protected override void OnInit()
    {
        DropDownListData = new List<Product>();
        for (int i = 0; i < 5; i++)
        {
            DropDownListData.Add(new Product()
            {
                ProductId = i,
                ProductName = "Product" + i.ToString(),
                SupplierId = i,
                UnitPrice = (decimal)(i * 3.14),
                UnitsInStock = (short)(i * 1),
            });
        }

        EmployeeData = new List<DropDownValidationModel>();
        for (int i = 0; i < 10; i++)
        {
            EmployeeData.Add(new DropDownValidationModel()
            {
                Name = "John " + i.ToString(),
                EmployeeId = i
            });
        }

        base.OnInit();
    }

    class DropDownValidationModel
    {
        [Required(ErrorMessage = "Choose an employee")]
        public int? EmployeeId { get; set; }

        public string Name { get; set; }
    }

    string SuccessMessage = string.Empty;

    void HandleValidSubmit()
    {
        SuccessMessage = "Form Submitted Successfully!";
    }
}

Explore our Native UI Blazor Components

Key Features

Template

Template Support

With native components, the Telerik UI for Blazor Grid templates can fully utilize the best features of Blazor to highly customize the user experience.

paralel-min

Native Blazor Validation Integration

The UI for Blazor suite supports and integrates seemlessly into Blazor's Forms and Validation infrastructure. All Telerik UI for Blazor Input components work out of the box when placed inside an EditForm, respond to EditContext changes and provide default invalid styles.

modern_design

Modern design

Telerik UI for Blazor provides Material, Bootstrap and Default themes that you can use to achieve modern design of your Blazor application. Thanks to the Theme Builder you can even customize the existing themes or create a new one to fit your needs.

Boost Your Star

blog_thumbnail
Blog Post

Why Blazor Grid Templates Will Make You Question Everything

Using a template in an application implies that you're creating a custom experience for your user by leveraging a component or framework you're working with. With native components, the Telerik UI for Blazor Grid templates can fully utilize the best features of Blazor to highly customize the user experience.

Video

Telerik UI for Blazor From Scratch

Our goal is to provide our clients with a smooth start using Telerik’s native Blazor components. That is why we have developed video series aimed at helping you kick-start your Blazor project in the easiest way possible. The series created by Ed Charbeneau - Sr. Developer Advocate for Blazor & Microsoft MVP – shows you how to install & use our Blazor components.


Get The Best Value for Your Money

SaveMoney

ROI / Cut Development Time

We combine our winning client-side technology and our server-side solutions in price-friendly bundles. Javascript, ASP.NET, PHP, and JSP – the complete package!

For one low price you get the individual technologies you need for your specific project including our extensive library of components, three major update releases per year, and flexible support options. Value and convenience in one package.

Expert-and-Timely-Support

Leading Support

Get answers to your questions directly from the developers who build this UI suite, even during your trial period.

If you are not a developer or don't have time to evaluate our product, send us your project requirements. We will evaluate your required features and let you know how our products fit your needs.

buy-as-part-of-devcraft-blue-109-131

Buy as Part of Devcraft

Telerik .NET and Kendo UI JavaScript components and Reporting and Productivity tools enable you to build modern and high-performant apps on any web, desktop or mobile platform—fast. Comes with flexible support options designed to cover your every need.

Optimize your time and budget by taking advantage of our intuitive APIs, thousands of demos with source code availability, comprehensive documentation and a full assortment of VS templates.

More about DevCraft

I'm excited to see partners like Telerik creating custom UI controls for Blazor. The Telerik UI controls make building beautiful web apps with lots of rich functionality sooooo easy!

Daniel Roth Program Manager, Microsoft
Blazar_background-min

Ready to Try it Out?

Try now