Pixata.Blazor.Sample

Telerik grid

This page shows a Telerik grid using two components, the TemplateHelper (which has nothing to do with Telerik, and can be used in any component that accepts templates) and the TelerikGridBoolFilter component.

The TemplateHelper cuts down on the amount of code you need to write when supplying a template, as it allows you to use a helper method to build the HTML for the template.

The TelerikGridBoolFilter component changes the row filter that the Telerik grid uses on a bool column from a default dropdown containing "All", "Is true" and "Is False" to a checkbox. This takes up a lot less space (usually a benefit on a bool column, as the contents tend to be smaller) and is more intuitive.

The grid below uses the TemplateHelper component as follows:

Date: This does two things to the date, it sets the text colour based on the temperature, and turns the text into a link (which doesn't go anywhere in this example). Both of these use the Link method overload that accepts a Func for the style, CSS and link title. This allows you to set these based on entity properties.
Temperature (C and F): These use the simple overload of the Text method that takes a plain string for the style and CSS. In the sample below, it merely right-aligns the text
Rain: Uses a Rain bool property that I added to the standard weather forecast model, and uses the Func overload of the Text method to set an icon based on whether or not it will rain. As you can see, the result is a lot better than the default (which you can see in the "Rain default" column)

It also uses the TelerikGridBoolFilter component in the Rain column to create a much simpler filter than the one the Telerik grid supplies by default.

See the source code for this page for the code that produces the grid below, or the TemplateHelper source code for the method definitions and comments