What’s New in Telerik UI for ASP.NET Core R1 2021

Happy New 2021, Fellow Developers! We hope it brings above all health, inspiration and prosperity to all of you! With the first Telerik UI for ASP.NET Core release of the year we are excited to share all new components, features and tools that you can plug into your projects and create modern and engaging applications in half the time.

The Telerik R1 2021 release includes five new Telerik UI for ASP.NET Core components like the Floating Action Button, Bottom Navigation, Expansion Panel, Radio Group, Checkbox Group plus new Grid, ListView, TileLayout and Editor features, brand new Visual Studio Code Wizard and many more! Read ahead and see what’s new in Telerik UI for ASP.NET Core R1 2021!

New UI for ASP.NET Core Components

New UI for ASP.NET Core Bottom Navigation Component

Bottom Navigation Overview

In addition to the App Bar component we shipped with Telerik R3 2020 last September, we are adding a Bottom Navigation Component and expanding the collection of navigational components to ease the development of your ASP.NET Core apps. The BottomNavigation component enables intuitive movement between primary destinations in an app (typically between three and five) represented by icon and optional text labels. The component comes with large number of configuration settings, events, built-in accessibility, keyboard navigation and right-to-left support (RTL).

Telerik UI for ASP.NET Core Bottom Navigation Component

Bottom Navigation Component Customization

The bottom navigation appearance can be completely adapted to your app scenario and you can quickly set its: orientation, theme color, border, fill type, shadow and item flow to achieve the desired look and feel.

Telerik UI for ASP.NET Core Bottom Navigation Custom Appearance

The bottom navigation control also exposes specific configuration attributes for each of its items: text (optional), icon, CSS class, selected & enabled states and more.

Bottom Navigation Component Templates

In addition to customizing the appearance, you can render completely custom HTML including other Telerik UI for ASP.NET Core components in the bottom navigation.

Telerik UI for ASP.NET Core Bottom Navigation Templates

New UI for ASP.NET Core Floating Action Button

Floating Action Button Overview

The Telerik UI for ASP.NET Core Floating Action button (FAB) comes handy when you need to enable quick access to the most common action in your apps UI. The name of the FAB button comes from the fact that it floats above the screen content and displays one primary action contextual to the current screen. The Telerik UI for ASP.NET Core FAB button comes with large number of configuration settings, events, built-in accessibility, keyboard navigation and right-to-left support (RTL).

Telerik UI for ASP.NET Core Floating Action Button

Floating Action Button Configuration and Customization

The Floating Action Button can be easily customized according to your app requirements thanks to its large number of settings related to appearance and functionality:

• Alignment: Using the Align, AlignOffset and PositionMode settings you have full control over the FAB button position (fixed, absolute and even offset)
• Appearance: Name, Icon, Text, Shape, Size, Theme Color
• Speed dial actions: You can also configure the FloatingActionButton to display additional related actions (speed dial actions)

Telerik UI for ASP.NET Core Floating Action Button Shapes

Floating Action Button Templates

In case you need to go beyond customization and render custom content for the floating action button items (for example for its speed dial actions) you can easily achieve that using the FAB button templates feature.

Floating Action Button Events

The Floating Action Button component exposes several events to enable you to handle business logic in your ASP.NET Core apps: OnExpand, OnCollapse, OnItemClick, OnClick.

New UI for ASP.NET Core Expansion Panel Component

Arrange your app content nicely with areas that can easily be expanded and collapsed with the new Telerik UI for ASP.NET Core Expansion Panel component.

Telerik UI for ASP.NET Core Expansion Panel

The Expansion panel can be easily configured with the provided properties: Name, Title, SubTitle and Content. Additionally, it comes with options to:

• Enable/disable it via its Disabled property
• Expand/collapse via its Expanded property
• Prevent expansion/collapse via its Toggleable property
• Disable visual animation when expanding collapsing via its Animation property

And like most other Telerik UI for ASP.NET Core components it includes RTL support and requires zero work to interact with it using just keyboard thanks to its built-in keyboard navigation support.

New UI for ASP.NET Core CheckBox Group Component

CheckBoxGroup Component Overview

The Telerik CheckBoxGroup component for ASP.NET Core provides an out-of-the-box way to have a data bound styled list of checkboxes. The checkbox group control includes many configuration settings, events, built-in accessibility, keyboard navigation and right-to-left support (RTL).

Telerik UI for ASP.NET Core CheckboxGroup Component

CheckBoxGroup Binding

CheckBoxGroup data binding is available via the two methods: Items () and BindTo(). You can use the Items() method for binding each of checkbox group items and BindTo() methods when binding the checkboxgroup to a data model.

CheckBoxGroup Labels and Layout

The CheckBoxGroup list items can be arranged in horizontal and vertical positions and for further custom looks you have full control over the labels positioning. See how in the official docs.

Telerik UI for ASP.NET Core CheckboxGroup Layout and Labels

New UI for ASP.NET Core Radio Group Component

RadioGroup Overview

The new RadioGroup component represents a styled list of radio buttons, similar to the CheckBoxGroup component, however users are able to select just one option from the list.

Telerik UI for ASP.NET Core RadioGroup Component

RadioGroup Binding

Just as with the CheckBoxGroup, the binding can be performed via the Items() and BindTo() methods.

RadioGroup Labels and Layout

The RadioGroup items can be arranged in a horizontal or vertical position. For further custom looks you have full control over the labels positioning. See how in the official docs.

Telerik UI for ASP.NET Core RadioGroup Layout & Labels

Form Component Integration

Last but not least both RadioGroup and CheckBoxGroup components fit nicely as built-in configuration items in the Form component.

New Telerik UI for ASP.NET Core Features

Grid Export to CSV

The Telerik UI for ASP.NET Core Grid has been enhanced with option to export its data to a CSV file (in addition to the existing options to export to PDF and Excel formats). By default, the Telerik UI Grid exports all rows, however you can configure it to export only selected rows. More information on available Grid export options can be found on the dedicated documentation page.

Telerik UI for ASP.NET Core Grid Export to CSV

Organize Items in the Grid Column Menu

The Grid column menu has been enhanced with a new rendering mode available as configuration option that can be easily set. By default, the column menu is initialized with the "classic" render mode, and if you would like to take advantage of the new styling you can easily switch it to "modern."

Telerik UI for ASP.NET Core Grid Column Menu Modern Rendering

Exportable Property for Grid Columns

The Telerik UI for ASP.NET Core Grid columns now have a new Exportable property that lets you define which columns will be exported and which skipped. In addition to that, you can set a column as exportable only when specific file format is used (for example exportable for CSV, but not for PDF).

New Editor Feature: Import, Edit and Export Files

The Telerik UI for ASP.NET Core Editor component can easily serve as a rich text editor by allowing you to import, edit and export its content. Supported file import formats include: DOCX, RTF, HTML and TXT, and with regards to the export supported formats, these include: DOCX, RTF, PDF, HTML, TXT.

Telerik UI for ASP.NET Core Editor - Import, Edit & Export

New Editor Feature: List with Roman Numerals as Bullets

The Telerik UI for ASP.NET Core Editor component now supports unordered lists of items, as well as the option to create numbered lists with both Arabic and Roman numerals. An example of the new features can be found in the Editor All Tools demo.

New Editor Feature: Table Aligning Tool

When working with tables in Editor users can now easily align them using the new built-in tools for aligning to left, center or right. In the Editor All Tools demo you can select the editor table and the alignment options will appear in the toolbar allowing you to perform the needed alignment with a click of a button.

New TileLayout Feature: Add/remove items options

The Telerik TileLayout component now supports dynamically adding and removing tiles. It's a perfect fit for dashboard-like applications where app users will have the flexibility to reorganize KPIs, add new items by dragging and dropping them from a side bar into the main visual area or completely remove them.

Telerik UI for ASP.NET Core TileLayout Add & Remove Items

New ListView Grouping Feature

ListView items can now be organized into groups using the DataSource grouping capability and proper configuration of the ListView template, so that it can accommodate the grouped data as shown in the List View grouping demo.

Telerik UI for ASP.NET Core ListView Grouping

Keyboard Navigation and Accessibility

With the R1 2021 release we added built-in keyboard navigation and support for the accessibility standards WAI-ARIA, Section 508 and WCAG 2.1 for several components: ScrollView, Drawer, Timeline and TileLayout.

New Visual Studio Code Wizard

In previous releases we gave lots of love to Visual Studio and expanded our extensions and templates for it. With R1 2021 shipped a new Visual Studio Code wizard that will ease the process of project creation with Telerik UI for ASP.NET components. Using the wizard, you can easily get started with predefined project templates that already integrate Telerik UI for ASP.NET Core components like the Grid, Chart and form inputs. You can also quickly configure a SASS theme and pick among Default, Material and Bootstrap.

Visual Studio Code Wizard with UI for ASP.NET Core Templates

Improved Highlight of Area Series

Area charts can now have a visual indication when user hover over the various series. With the new feature the area charts will make non-hovered series transparent to give focus on the series that user is most interested in.

New Features in Telerik Document Processing: WordsProcessing Support for Content Controls

With R1 2021 release we have something new and for those of you who are using Telerik Document Processing within their ASP.NET Core apps! Content Controls enable users to add specific semantics to the document: restricting input, modifying editing behavior, etc. Usually, the content controls are used to create a template that allows you to fill specific data by interaction with the document (using checkboxes, predefined options, calendars). With the latest version of the RadWordsprocessing library you can create and manipulate the content controls inside a document.

Download the Latest Telerik UI for ASP.NET Core Now

Download and try a trial version of Telerik UI for ASP.NET Core, 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 feedback portal and help us shape the future of UI for ASP.NET Core.

Special Twitch Session & Webinar

Be sure to sign up for the Telerik R1 2021 release webinar on Tuesday, January 26 | 11 am – 1 pm ET or join the full-day live session on Twitch on Friday, January 29, 8:00 am – 5:00 pm ET to see the newly released components and features in action and get ideas on how to use them in your projects for a deeper look at all the new features in the release.

Reserve Your Webinar Seat

Thank you for your continuous support & happy ASP.NET Core coding!