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

The new 2021 steps in with the massive Telerik R1 release for the year! We are happy to announce what we have been working on and to share with you the latest and greatest in the Telerik UI for ASP.NET MVC. Get a taste of all the new components, improvements and features we have added to the UI set to further enhance your MVC applications!

With the Telerik R1 2021 release, you can enjoy five new components that we are introducing to our UI for ASP.NET MVC, which are: Floating Action Button, Bottom Navigation, Expansion Panel, Checkbox Group and Radio Group. We also further enhanced the Telerik Grid as well as added new features to the Editor, TileLayout and the ListView. Read till the end to find out more about everything that’s new in Telerik UI for ASP.NET MVC!

New UI for ASP.NET MVC Floating Action Button Component

Floating Action Button Overview

The ASP.NET MVC Floating Action Button (FAB) is positioned above the screen content and displays a contextual primary action that the user can perform. You have an easy access to the most logical action that corresponds to the content of your application or the current page UI. The FAB component is easily customizable in terms of appearance, position and other configuration settings, and it comes with built-in Accessibility, Keyboard Navigation and Right-to-Left support.

Telerik UI for ASP.NET MVC Floating Action Button Component

Floating Action Button Customization Options

The component provides a large number of configuration options that allow you to integrate and modify the FAB component according to your personal preferences and application requirements:

• Alignment – You can adjust the position of the Floating Action Button by using the Align, AlignOffset and PositionMode configuration settings which specify respectively how the FAB is aligned relative to its container, the horizontal and vertical offset and its CSS position in the document
• Appearance – You have full control over the component’s look and feel by specifying its size, shape, color, text, as well as icon settings

Telerik UI for ASP.NET MVC Floating Action Button Customization

Floating Action Button Templates

On top of using the component as a single button with a single action, you can also choose to render other related actions or speed dial actions. You can do so by using the Floating Action Button Templates and setting up the speed dial action items inside the button.

Accessibility, Keyboard Navigation and RTL Support

The ASP.NET MVC Floating Action Button is made to be accessible to all users and provides WAI-ARIA, Section 508, WCAG 2.1 support. In addition, it can be fully operated using just the keyboard thanks to the available Keyboard Navigation. The component also provides RTL support for users who communicate through right-to-left languages.

Telerik UI for ASP.NET MVC Floating Action Button RTL Support

New UI for ASP.NET MVC Bottom Navigation Component

Bottom Navigation Overview

We are introducing another navigational component to our Telerik UI for ASP.NET MVC set which is the Bottom Navigation. Its purpose is to switch views and navigate you between primary destinations within an application with a click of an icon. You have a full control over the component’s appearance, its items and optional text, as well as available Keyboard Navigation, Accessibility and RTL Support.

Telerik UI for ASP.NET MVC Bottom Navigation Component

Bottom Navigation Customization Options

The Bottom Navigation component comes with different configuration options to fully customize its look and feel:

• Items – Configure the items of the Bottom Navigation component by setting specific attributes. Based on your app and its requirements, you can choose what icons to add to the items and include text label if necessary. You can also set the enabled and selected state of the items.
• Appearance – Adjust the overall appearance of the component by using the item flow, theme color, border, shadow and fill settings and more!

Telerik UI for ASP.NET MVC Bottom Navigation Appearance

Bottom Navigation Templates

For a more customized look, the Bottom Navigation provides templates options which allow you to include custom elements or other Telerik UI for ASP.NET MVC controls.

Telerik UI for ASP.NET MVC Bottom Navigation Templates

New UI for ASP.NET MVC Expansion Panel Component

Expansion Panel Overview and Properties

The Expansion Panel is a collapsible component that the user can expand to reveal its content area. It provides several configuration options which allow you to:

• Configure its Default state by setting its Expanded property to true or false
• Disable or enable expansion through the Disabled property
• Set its Toggleable property to false or true to prevent or allow expansion and collapse
• Configure the Animation state by setting to true or false the Animation property

Telerik UI for ASP.NET MVC Expansion Panel Component

Keyboard Navigation and RTL Support

The component also comes with built-in Keyboard Navigation that allows you to work with and toggle the content using just your keyboard. It also provides RTL rendering for users who communicate through right-to-left languages.

New UI for ASP.NET MVC CheckBox Group Component

CheckBoxGroup Overview

This new component provides checkbox functionality to list items. The CheckBoxGroup comes with several configuration options for data bind, labels and layout customization.

Telerik UI for ASP.NET MVC CheckBoxGroup Component

CheckBoxGroup Data Binding

For Data Binding you can use one of the two methods—Items() for binding the checboxgroup items to the component, or BindTo() for binding it a data model.

CheckBoxGroup Customization

You can customize the labels texts and the labels positioning—before or after the checkbox—based on your own preference. Choose also horizontal or vertical orientation for the CheckBoxGroup layout.

Telerik UI for ASP.NET MVC CheckBoxGroup Customization

New UI for ASP.NET MVC Radio Group Component

RadioGroup Overview

The RadioGroup component defines a radio buttons list. Unlike the CheckBoxGroup, the users can select only one item from the provided options.

Telerik UI for ASP.NET MVC RadioGroup Component

Similar to the CheckBoxGroup, the RadioGroup component also provides Data Binding through one of the two methods—Items() or BindTo().

RadioGroup Customization

With this component, you can also select a vertical or horizontal layout, set custom labels texts and choose label positioning—before or after the radio button. See more in the official documentation.

Telerik UI for ASP.NET MVC RadioGroup Customization

Keyboard Navigation and RTL Support

Both CheckBoxGroup and RadioGroup components come with built-in RTL support for those who use right-to-left languages, and Keyboard Navigation which allows operation and selection of items without using your mouse.

New UI for ASP.NET MVC Grid Features

In addition to all new components that ship with the Telerik R1 2021 release, we are also introducing new features and enhancements to our existing components. Here is how we improved the Telerik Grid:

• Exportable Property for Grid Columns – We added an Exportable property to the ASP.NET MVC Grid which allows you to configure which columns to include or not in the exported file of the Grid. You can also choose a column to be exportable to one file format but not to another.
• Organize Items in the Grid Column Menu – We are adding options for sorting and grouping items in a Column Menu for a better user experience. There is also a new styling option that can be applied to the Grid column menu. The user can choose the default “classic” look or select the new “modern” rendering mode.

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

New UI for ASP.NET MVC Editor Features

List with Roman Numbers in Editor

The Editor component is further enhanced with the option to add bulleted unordered list of items, as well as numbered lists indicated with Roman or Arabic numerals. You can find examples of the feature in our Editor All Tools demo.

Telerik UI for ASP.NET MVC Editor List with Roman Numbers

Table Aligning Tool in Editor

The ASP.NET MVC Editor now offers an aligning tool with which users can adjust the alignment of tables to the left, right or center with a click of a button. Check out how this feature works in the Editor All Tools demo by selecting the table and choosing the desired aligning option from the toolbar.

Telerik UI for ASP.NET MVC Editor Table Aligning Tool

New UI for ASP.NET MVC TileLayout Features

With R1 2021, we are implementing a new Add or Remove Items feature to the TileLayout component. You will be able to drag and drop elements from the side bar to the dashboard-like area and remove them by using a close button visible on each tile. This will allow you to fully customize the content in the component and decide what is most relevant to present.

Telerik UI for ASP.NET MVC TileLayout Add and Remove Items

New UI for ASP.NET MVC ListView Features

The ASP.NET MVC ListView component is now enhanced with a new Grouping option. This allows you to display data in a more organized and structured way in the ListView. You can achieve this with the DataSource grouping capability. To learn more about the grouping feature, see our documentation article.

Telerik UI for ASP.NET MVC ListView Grouping

Accessibility and Keyboard Navigation

We are also continuing to improve our components in terms of accessibility and keyboard navigation and in the Telerik R1 2021 release we added support for WAI-ARIA, Section 508 and WCAG 2.1 and built-in keyboard navigation for the ScrollView, Drawer, Timeline and TileLayout.

Highlight of Area Charts Improvements

The Area Charts are now further enhanced with a Highlight on hover option. When the user hovers on the desired chart series, the rest of the areas will become transparent giving a visual indication and a spotlight to the area that the user is interested in.

New WordsProcessing Support for Content Controls 

With the R1 2021 release, we are also adding a new feature to the Telerik Document Processing for those who use it within the Telerik UI for ASP.NET MVC projects. The WordsProcessing now offers support for Content Controls which gives you full control over the components. You can change and restrict their behavior, as well as create templates for filling in specific data inside the document.

Try It Out

You can try out all new components and features from Your Account Page if you are an active license holder or download a trial version and dive into creating applications with Telerik UI for ASP.NET MVC! We also encourage you to share your ideas in the feedback portal and let us know how we can further expand and improve the UI set.

Download Now 

Join the Live Twitch Session and Webinar

If you want to see all that is new in action from the Telerik UI for ASP.NET MVC and across all Telerik products, you are welcome to join us for the Telerik R1 2021 Webinar on Tuesday, January 26 at 11 am – 1 pm ET, and for the full-day live Twitch Session on Friday, January 29 at 8 am – 5 pm ET.

Save Your Webinar Seat