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.

LibMan.json: https://gist.github.com/EdCharbeneau/959ab0c7b171764025a7d05681bebdcd

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) />
	...
</KendoGrid>

Templates

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)>
        <Template>
            @( $"{(context as OrderViewModel).OrderDate:d}" )
        </Template>
    </KendoGridColumn>

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)>
        <Template>
            @{
                var item = context as OrderViewModel;
                <KendoButton OnButtonClick=@(()=> HandleDelete(item))>Delete</KendoButton>
            }
        </Template>
    </KendoGridColumn>

Full code sample can be found here: https://gist.github.com/EdCharbeneau/b8d4d7aca5d9856204d4b84eb3f00492

News Items

• Introducing the Telerik UI for Blazor Early Preview
• Blazor Converters
• Blazor Full-Stack Web Dev in ASP .NET Core
• Blazor Web Workers
• Telerik Webinar

Interop Poll

If you're using or interested in using #Blazor. If you see a library of Blazor JavaScript Interops, do you think:

— Ed Charbeneau #Blazor #StateHasChanged (@EdCharbeneau) January 25, 2019

Blazor Community Chat

Chat with other devs about the Blazor project.