Working with new Telerik UI controls for Blazor

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&gt;
    <TelerikGridColumns&gt;
        <TelerikGridColumn Field=@nameof(Product.ProductId) Title="Id" /&gt;
        <TelerikGridColumn Field=@nameof(Product.ProductName) Title="Product Name" /&gt;
        <TelerikGridColumn Field=@nameof(Product.UnitPrice) Title="Unit Price" /&gt;
    </TelerikGridColumns&gt;
</TelerikGrid&gt;

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

    protected override void OnInit()
    {
        List<Product&gt; products = new List<Product&gt;();
        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&gt;</Grid&gt;

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.

One thought on “Working with new Telerik UI controls for Blazor

  1. Very nice controls. So nice as a car without wheels. No eny event if you need to select item from grid or tree view. Absolutely unusable controls. My be in future it will be fixed. But why need to publicate controls without any important event handlers? I kill several hours while make sad conclusion – I can not to use these controls now.

    Like

Leave a Reply to Андрій Кравченко Cancel reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s