Telerik UI for Blazor
Telerik UI for Blazor is the newest edition to the Telerik product line. Right after Microsoft’s announcement we started working on our Blazor suite as we were pretty sure it will be a trailblazer. One thing we did differently this time around is breaking our typical release cycle with monthly releases. Our goal is to have a product that is completely driven by the needs of the community and we believe we have met our goal as you can see from the notes below.
The preview 3 of Blazor WebAssembly is out and it comes the long-anticipated debugging of Blazor WebAssembly apps directly in Visual Studio and Visual Studio Code! This means we can now F5 our Blazor Apps – just F5 and nothing else!
As always Telerik UI for Blazor releases go hand in hand with the preview versions released by Microsoft. We are happy to announce that the latest Telerik UI for Blazor 2.10.0 release is compatible with the latest preview 3 version of Blazor WebAssembly 3.2.0.
We place a lot of love on the Grid but sometimes the data is better suited for a good ListView component. The ListView is available in 2.10.0 and follows the tested recipe of being fully customizable. Bind your data source to the control, use the custom templates for rendering and editing items, and the header and footer of the list. Combine with the built-in buttons like Add and Save or add your own custom buttons to build it exactly as you want it.
The new Telerik UI for Blazor Pager component is a flexible tool for controlling paginated components like the Grid or the ListView we just discussed. You only need to specify the page size and the total number of items and then handle the event we fire every time the user changes the page. Your handler is free to load the data dynamically to avoid loading everything up-front. Or not – it’s up to you.
By introducing a Checkbox control, we are moving a step closer to completing all frequently used input components.Users may pick between 3 states – Checked, Unchecked and Indeterminate (e.g. useful for a “Select All” checkbox). Of course, you are free to redefine the visuals and you get full programmatic control via data-binding and several events to notify you for any user actions.
It won’t be a Telerik UI for Blazor release without an update to the Grid. We are now adding the ability to freeze columns which does exactly as the name suggests – frozen columns stay in-place when the user scrolls horizontally.
The Grid already has a feature which allows you to select multiple rows to execute the same operation on all of them simultaneously. You also have the option to select all rows in the Grid – but this one was a bit unclear – does it select all currently visible rows or all rows in the Grid? We’ve left it to you to decide how should this behave so we’ve added a SelectAllMode attribute which controls exactly that.
Uploading files is now a one-liner:
<TelerikUpload SaveUrl="@SaveUrl" RemoveUrl="@RemoveUrl"/>
Thanks to the Upload component for Telerik UI for Blazor you can make it trivial for users to upload their files to your application. And as always, its fully customizable – pick the file extensions you care about, set limits on min and max file size, upload when a file is selected or wait for the user to press a button – it’s up to you.
The gist of web development is rich visualization of data and one key element of that is the ability to show a Tooltip component. You decide when (click or hover) and where should the tooltip appear (top, bottom, left or right) and there are no limits on what it can contain – text, images or even other components.
The state of the Grid component includes the current sorting, filtering and grouping selections as well as the indices of the expanded hierarchical rows. With this update, you can now programmatically access and modify the grid’s state which is powerful in many ways:
Save and restore the grid to a user’s preferred state (e.g. Peter sorts his online purchases by price, Karen sorts them chronologically)
Group, sort, filter or otherwise control the state from code (e.g. the data is too large so group it by default but also let the user explore it on their own)
It can be very convenient for users to move columns around and resize them in order to see the most of their data. With this latest update, the Telerik UI for Blazor Grid now supports both operations to put even more power in your users’ hands.
Enhancements in our Blazor UI suite continue with new additions to the Grid grouping feature with column aggregates as well as group header and footer templates. These new add-ons will let you easily display totals of your grid data and highlight values worth attention. They also bring us one step closer to having a full-feature Grid component.
Visualizing images, styling headers or adding various actions via button has never been easier with the new column header template grid feature. Use the <HeaderTemplate> tag to define custom content in the Blazor Grid column headers instead of just the title text.
Mark events in the Telerik UI for Blazor Scheduler as recurring – pick the interval in days, weeks, months or years and set a limit on the number of recurrences or an end date.
Progressive Web Applications (PWAs) are on the rise in contemporary web world. Why? Well, PWAs are web apps that uses modern web capabilities to deliver an app-like experience to its users. It can be installed on desktop and mobile, they work offline, and have some nice features like push notifications and so much more.
While dedicated a separate in-depth blog post on building Blazor PWA, we wanted to share with you the new financial demo app built as Blazor WebAssembly PWA.
Setting up a new Blazor project for VS Code users is now much more straightforward – just follow the newly released project wizard and it will do the work for you.
New features & Roadmap
Have a feature request?
Post your feedback via the Blazor UserVoice portal or the Public forums
What's new across all Telerik products?
See the updates feed
See Telerik UI for Blazor in action and check out how much it can do out-of-the-box.
Check out the offers. Purchase an individual suite, or treat yourself to one of our bundles.
Try Telerik UI for Blazor with dedicated technical support.