Learn about the latest of our 40+ components, plus new features, Visual Studio extensions and more in Telerik UI for Blazor.
It’s officially Telerik R2 2020 time and we are happy to share all the new components, features, Visual Studio and Visual Studio Code extensions that Telerik UI for Blazor has shipped over the last four months! A year after we officially released the first version of Telerik UI for Blazor, we now have reached a new milestone of 40+ native Blazor product-ready components that work in both WebAssembly (WASM) and Server-side Blazor apps.
Following to the previously announced MultiSelect, Upload, Tooltip, ListView, Pager and Checkbox components, along with 15+ Grid enhancements, with this release we've got a lot to offer. That includes shipping two new components in Blazor Drawer and DateRangePicker, new features like Export Blazor Grid to Excel, Calendar Range Selection, Visual Studio Convert Wizard, Mac installer, compatibility with Blazor WebAssembly release candidate and more! As always, we listened to your feedback and included in the release many of the most voted items and features. Read ahead and see what’s new in Telerik UI for Blazor!
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 announced by Microsoft later this month.
The UI for Blazor Drawer component is a dismissible or permanently visible panel for navigating in responsive web applications. It allows for switching the content of different sections of the page.
Telerik UI for Blazor Drawer Component
To use the Telerik UI for Blazor Drawer, all you have to do is add the <TelerikDrawer> tag, populate its Data property, and place the desired content in the <Content> tag.
The Drawer can be used as a menu allowing navigation between pages in Blazor apps. To use the Drawer for such a scenario you need to add the Drawer to the MainLayot.razor of your app, place the @Body tag in the <Content> tag of the Drawer and provide a collection of models that describe the pages you want the user to navigate to.
Depending on the Blazor app requirements you may need to position the Drawer left or right in relation to the page content. This can easily be achieved with just setting the Drawer Position parameter to either DrawerPosition.Right or DrawerPosition.Left.
Telerik UI for Blazor Positions – Left and Right
To give you further flexibility the Drawer component provides the following modes for displaying its content:
When the Drawer is in a collapsed state, you can enable its “mini mode” or “mini view” which means that when the Drawer is minimized, it will display only the item icon.Telerik UI for Blazor Drawer Mini Mode
To enable it you have to set the MiniMode parameter to true as shown in the code sample below (in its default false the Drawer will not be visible when collapsed).
The Drawer is, by default, a data-bound component and renders an entry for each item in its Data collection. You can customize its appearance via the templates it offers:
Telerik UI for Blazor Drawer Item Template
Telerik UI for Blazor Drawer Template
The Drawer component exposes SelecteditemChanged and ExpandedChanged events to let you handle user interactions and component state changes:
The Drawer component has built-in keyboard navigation allowing end users to easily navigate, focus and click on Drawer items using their keyboard.
The new Blazor DateRangePicker component allows users to select date periods directly from a calendar popup or edit date ranges from start and end date inputs. The date interval is visualized in real time in an animated dropdown. The values of the date inputs and calendar are synchronized to enable further change of the chosen date range.
Telerik UI for Blazor DateRangePicker Component
To add a date range selection in your Blazor application, simply add the TelerikDateTimePicker tag and configure the component with relevant Min, Max, Format values.
You have several events available for capturing and handling changes to the date range values in the DateRange picker component:
When working with date ranges you can also define certain dates as disabled i.e. preventing users from selecting them as start and end date of the interval. However, these dates can still be part of the period selection.
Telerik UI for Blazor DateRangePicker Disabled Dates
To disable specific dates just set them in the DisabledDates list of values in the TelerikDateRangePicker as shown in the example below.
The UI for Blazor DateRangePicker has built-in localization and globalization which allows automatic culture-aware formats of the client, so users see the dates that are standard for their country/region. For example by setting format to “d,” people in different locations will see different formats: MM/dd/yyyy (for US) or dd/MM/yyyy (for UK). Month names and button texts are easily translatable to any language.
The built-in keyboard navigation in the DateRange Picker component brings flexibility to users to perform interaction with the component with keyboard only.
Users in Blazor applications can now easily export Grid data to Excel with a click of a button. The exported file will preserve the Grid settings, so that filtering, sorting, paging, grouping, column order and column size are applied to data in the xlsx document.
Export Telerik Blazor Grid Data to Excel
To enable the Grid Excel export, add a command button with the ExcelExport command name to the toolbar.
Additionally, you can specify whether to export current or all pages of the Grid, plus the resulting file name as shown in the example below.
In this release we enhanced the Calendar control with option to select range of dates in Blazor applications (in addition to the existing single and multiple selection of dates).
Telerik UI for Blazor Calendar Range Selection
To enable the selection of date ranges you have to set the calendar SelectionMode to Range, and to retrieve the selected dates by users in the application you can either use two-way binding for the RangeStart (representing the first date of the selection) and the RangeEnd (the last date of the selection) parameters, or handling the RangeStartChanged and RangeEndChanged events.
With this release, we added new handy Visual Studio extension for quickly adding Telerik UI for Blazor components in existing Blazor applications (both server and WebAssembly).
The extension can be started from both the main Extensions menu in Visual Studio -> Telerik > Telerik UI for Blazor > Convert to Telerik Application, or by directly right-clicking your existing Blazor project and selecting Telerik UI for Blazor > Convert to Telerik Application.
Telerik UI for Blazor Convert Wizard Launch
The new VS wizard does all the needed work – from getting the required Telerik Blazor packages in your project and adding client assets, to ensuring you can smoothly integrate any Telerik Blazor component in your app.
In addition to the existing Telerik UI for Blazorinstaller for Windows (.msi file), with this release we automated the installation for Mac users.You can now easily setup and enjoy the Telerik UI for Blazor components via the new Mac installer (.pkg file).
Telerik UI for Blazor macOS Installer
The automated UI for Blazor installer for both Windows and macOS platforms provides the necessary Nuget package files, offline version of Telerik Blazor component demos that you can run and inspect in your IDE, document processing Nuget package files, and shortcuts to our online demos.
We will continue to expand the Telerik UI for Blazor suite and we already have exciting plans for the upcoming 2020 releases. If you want a sneak peek of what’s coming, we encourage you to keep using the Telerik UI for Blazor Roadmap Page. Not only will you get an insider’s look at our features pipeline, but you’ll continue to have the opportunity to help us improve with your valuable feedback. Your input helps make the Telerik UI for Blazor bigger and better for everyone.
We would like to thank everyone for the continuous support and encourage you to download a free trial version of Telerik UI for Blazor, or if you are an active license holder you can just grab the latest and greatest from the Your Account page! Share your thoughts with us on our dedicated Blazor feedback portal and help us shape the future of UI for Blazor.
Be sure to sign up for the Telerik R2 2020 release webinar on Thursday May 21, 2020 @11:00 am – 12:00 pm ET for a deeper look at all the new Telerik components and features in the release.
And in case you need more Telerik UI for Blazor, we have lined up another great deep-dive webinar on Tuesday, June 2, 2020 starting at 11am ET. During the webinar, "Blazor in-depth: Full-Stack C# with Telerik UI for Blazor and Entity Framework," you'll learn how to use a variety of Telerik UI for Blazor controls to build a full-fledged app in no time. Stay tuned.
Happy Blazor Coding!
Maria Veledinova is Product Manager for Telerik UI .NET Web components - Blazor, ASP.NET Core, MVC and AJAX. She has experience in the field of product development and transformations of organizations towards forward-looking, innovative and impactful software products. Maria believes that behind every great product along with the cutting-edge technology stands challenging the status quo, close collaboration with the customers, and spirit of experimentation. Follow her on Twitter or LinkedIn.
Subscribe to be the first to get our expert-written articles and tutorials for developers!