In the 2.0.0 release, there are some changes in the Telerik Blazor components that have been brewing for a while due to the evolution of the framework. This article explains what they are and what you need to change.

A shortlist of the changes:

The component namespaces changed, so now you only need to include @using Telerik.Blazor.Components and @using Telerik.Blazor in your main _Imports.razor file, instead of a per-component statement in each view.

Some inner tags changed names for brevity and usability. A detailed list with the changes per component is available below.

Most notably, the Telerik prefix is removed from all child tags, only the root-level components are still <TelerikComponentName>. There are some particular changes for certain components, and they are detailed below.

Some methods that manipulated collections or state are now gone. The way to alter collections (like Action buttons on a Window) is to use conditional markup and looping over collections from a view model. When we were initially creating the components, there were indications that there will be programmatic creation options. It seems this is not going to be the case, and conditional markup plus binding is the way to affect markup. There are details for each component below.

The Window renders at the root of the app.

In case the lists in this article do not suffice, you can go to the concrete component's demos and documentation to see the way it is to be used after these changes. The documentation always reflects the latest version of our components.

The Navigate() method is no longer available in favor of two-way binding for the View and Date parameters. An example is avalable in the Navigate article.

The View and Date parameters should be used with two-way binding, especially when you handle ValueChanged. Otherwise, state changes (like selection) may revert them to the values set in the markup and move the user unexpectedly.

The standalone icon component is now in the Telerik.Blazor.Components.Common.Icon namespace.

The IconName property is now Icon.

The Class property is now IconClass.

If you want to use the Telerik icons together with custom classes, you must ammend those classes instead of using the Icon property. For example, <TelerikIcon IconClass="@("my-class k-icon k-i-" + IconName.File )" />.

All input-type components (DropDownList, DateInput, DatePicker, etc.) no longer have the Height property. Their height is to be controlled through CSS and the font-size through the themes anyway, and the Height property did not always produce expected/proper results.

The Open(), Close(), Minimize(), Maximize(), Restore() methods are removed in favor of parameter binding - for the Visible parameter and the new State parameter.

The Minimized and Maximized parameters are removed in favor of the State parameter.

The AddAction(), RemoveAction() methods are removed in favor of conditional markup.

The window renders at the root of the app and not in place. Thus, its position is relative to the root and maximizing fills it up, instead of the closest parent with special positioning. This also applies to the Top and Left offsets - they are now relative to the app root as well.

Support Resources

Sample Applications

Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.