Working with new Telerik UI controls for Blazor

Posted on by drewsheneman

With Blazor now in official preview I have been experimenting with its client-side applications and will be using it more extensively going forward.

Blazor is a Web UI framework created by Microsoft that can run on WebAssembly or the server. It allows developers to use C# when creating client-side applications.

The Telerik UI controls for Blazor are now also in preview, and I was able to begin leveraging these controls using their private nuget feed (you must sign up for a trial to get started). Below is an example of using a Grid control with paging and sorting, using sample data.

Once installed, create a new class called Product.cs in the ‘Shared’ class library that was created in the solution:

    public class Product
    {
        public int ProductId { get; set; }

        public string ProductName { get; set; }

        public int SupplierId { get; set; }

        public decimal UnitPrice { get; set; }

        public int UnitsInStock { get; set; }
    }

Then create a new razor component in the ‘Pages’ directory, called ‘Grid.razor’:

@page "/grid"

@using TelerikBlazorApp.Shared
@using Telerik.Blazor.Components.Grid

<TelerikGrid Data=@GridData
             Height=@Height
             Sortable=true
             Pageable=true PageSize=@PageSize>
    <TelerikGridColumns>
        <TelerikGridColumn Field=@nameof(Product.ProductId) Title="Id" />
        <TelerikGridColumn Field=@nameof(Product.ProductName) Title="Product Name" />
        <TelerikGridColumn Field=@nameof(Product.UnitPrice) Title="Unit Price" />
    </TelerikGridColumns>
</TelerikGrid>

@functions {
    public IEnumerable<Product> GridData { get; set; }
    int PageSize = 10;
    decimal Height = 400;

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

        GridData = products.AsQueryable();
    }
}

Now the Grid component can be added to ‘Index.razor’:

@page "/"

<Grid></Grid>

Here is the Grid display:

A sample of a Blazor client-side application I created can be found here. This is a Blazor (ASP.NET Core hosted) project I created using Telerik UI controls for Blazor.

1