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.
We are happy to share that Telerik UI for Blazor is compatible with Blazor WebAssembly release candidate and we promise to be fully compatible with the official release shortly after it is officially announced by Microsoft later this month.
The newly added Telerik UI for Blazor ToggleButton is the perfect tools when you want to provide users with capabilities of flipping a switch in your app – whether it’s muting/unmuting the volume in a media player or toggling between dark and light mode, the ToggleButton looks sleek and is highly customizable to fit any page. See it in action on the demo page.
The Telerik UI for Blazor ButtonGroup component takes the other new component – the ToggleButton and expands it. Manage multiple toggle buttons to implement groups exclusive options like radio buttons. Or make them non-exclusive, for example to implement Bold, Italic and Underline in a text editor.
Whenever a row in the Grid is clicked or double-clicked, the corresponding event is fired and you can handle it to do interesting things like showing a detailed view of that row in a separate control or fetching/sending more data about this particular item to the server. Read the full guide in the docs.
The Telerik UI for Blazor Grid can also use data from a weakly-typed ExpandoObject. This is often the case when connecting to a backend based on older technologies and usually makes integration much harder the Grid takes care of it.
The Telerik UI for Blazor Grid can also use data from a DataTable object. This makes it easier to connect with legacy code which is still using DataTables – like in this example.
Custom filter rows and Custom filter menus provide you with the ability to replace the built-in filters on top of each column in the Grid with a more user-friendly filter for your specific case. Discover how can you use both in the filter row demo and in the filter menu demo.
The Telerik UI for Blazor Chart component now exposes a Click event, triggered when the user clicks on the chart. Handling this event opens the door for new interactions like showing detailed info about clicked chart element like in our sample app.
Users can now hover over the Telerik UI for Blazor Chart to get more detailed information about a particular data point on it and developers can customize the tooltip to show whatever relevant information is necessary.
The OnItemClick and SelectedItemsChanged events will now fire to let you react to more user actions and provide appropriate results.
Nodes in the TreeView can be Selected so they can be processed in some way – e.g. selecting an item in TreeView displaying file and folder structure can open the file contents in a separate component like in this example.
There are several new minor parameters have been added to Telerik UI for Blazor TextBox component like control over AutoComplete, InputMode, PlaceHolder and TabIndex.
The Telerik UI for Blazor Drawer component is a navigation component which provides a dismissive panel. It is the perfect choice for when you need to hide unnecessary details in your menus but still give users the option to bring them back when they need them. Customize it to your heart’s content and enable any of the various operation modes to achieve what you need.
The new DateRangePicker component for Telerik UI for Blazor allows users to pick date ranges. The range can be selected from a calendar popup or edited via start/end date inputs. Both options work in sync so users can use either. The control provides related events and the ability to exclude certain dates from selection.
A new selection mode was added to the Telerik UI for Blazor Calendar component. Users can now select range of dates in Blazor applications to specify time intervals for whatever needs your application might have.
We now support exporting Grid data directly to Excel with a single click. We strived to preserve everything so the generated file will have the same filtering, sorting, paging, grouping, column order and size as the original Grid component.
We also released a Visual Studio Extension. The wizard streamlines interactions with the Telerik UI for Blazor suite and makes setting up projects easy – convert your existing Blazor project to a Telerik UI for Blazor-enabled project in seconds.
Mac users, rejoice! You can now install the Telerik UI for Blazor suite via the new Mac installer.
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.
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.
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.
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)
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.
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 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.
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 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.
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 Telerik UI for Blazor Schedular not only has Day, MultiDay and Week views, it now offers Scheduler Month view. To keep the view of the month well-coordinated, up to two activities appear each day at the slot. For cases where there are more than two appointments a day an ellipsis button provides access to the detailed DayView for the specific day.
You can simultaneously allow multiple views, so your users can easily turn to the Scheduler's preferred way of visualizing events as seen in the example below.
When binding your model to a Grid component, wouldn’t it be better if you could just pass the data and have the Grid figure out your components? If you are working on a big application, you likely have many properties, and if you are working on a small one, then data is likely to change. In both cases, you avoid modifiying your UI with the new AutoGenerated columns feature of Telerik UI for Blazor’s Grid.
You only need to enable the AutoGenerated feature and the Grid itself will create a column for every property on your model. Check how to use enable it in our demo.
Since this might not be enough for some of you, we also allow the autogenerated columns to be customized – with additional attributes you can specify alternative column titles, specific column order, column width or you can even run validation! Check out the sample code demonstrating the behavior of auto-generated columns using custom attributes.
Dealing with a large number of columns while using the Telerik UI for Blazor data grid just got easier with our new Grid column virtualization feature. It is a great addition for all of you who need to look for ways to optimize both user experience and performance. The Grid Column Virtualization works well with both Virtualized Rows and AutoGenerated Columns. If you would like to see a detailed example of how to enable both features visit our release blog post.
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.
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.