Telerik UI for Blazor Grid Demos

Blazor StateHasChanged() Jan. 24, 2019

This week on Blazor StateHasChanged(), we take a tour of the Telerik UI for Blazor Grid. On the show we saw how to install the Telerik UI for Blazor. We learned how to add a local NuGet package, declare dependencies, fetch css styles and use the grid in our project.

Adding the CSS

For the demos LibMan was used to get CSS resources. There are currently 3 themes for Telerik UI for Blazor. Adding this libman.json file to the root of your project will add the dependencies.


Data Binding, Sorting, Paging

Using the Telerik Data Grid we bound data by simply connecting the grid’s Data parameter with any IEnumerable<T>. Paging and Sorting are simply enabled by setting the respective parameters to true.

<KendoGrid Data=@Orders Pageable=true Sortable=true>
	<KendoGridColumn Field=@nameof(OrderViewModel.Freight) />


We saw a variety of template options by setting column templates. Starting with a simple data format template and ending with a fully featured delete button column.

To enable simple string formatting a <Template> is used within the <KendoGridColumn>. The following example will format a date from 10/15/2018 12:00:00 PM to 10/15/2018.

    <KendoGridColumn Field=@nameof(OrderViewModel.OrderDate)>
            @( $"{(context as OrderViewModel).OrderDate:d}" )

Adding a button column follows a similar pattern, but we use a the @{} syntax within the template. The button OnButtonClick event passes custom parameters to the handler by a simple lambda expression where the argument is the current item in the grid row.

    <KendoGridColumn Field=@nameof(OrderViewModel.OrderID)>
                var item = context as OrderViewModel;
                <KendoButton OnButtonClick=@(()=> HandleDelete(item))>Delete</KendoButton>

Full code sample can be found here:

News Items

Interop Poll

Blazor Community Chat

Chat with other devs about the Blazor project.

Ed Charbeneau

Ed Charbeneau

I'm Ed Charbeneau, web enthusiast, speaker, writer, design admirer, and Developer Advocate for Progress.