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!
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
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:
Telerik UI for ASP.NET MVC Floating Action Button Customization
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.
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
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
The Bottom Navigation component comes with different configuration options to fully customize its look and feel:
Telerik UI for ASP.NET MVC Bottom Navigation Appearance
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
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:
Telerik UI for ASP.NET MVC Expansion Panel Component
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.
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
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.
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
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().
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
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.
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:
Telerik UI for ASP.NET MVC Grid Column Menu Modern Rendering
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
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
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
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
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.
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.
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.
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.
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.
Simona Yaneva is a part of the Product Management team for the Telerik Fiddler Family of products—Fiddler Everywhere, Fiddler Classic, Fiddler Jam, FiddlerCap and FiddlerCore. She is interested in the variety of areas of work that Product Management covers and the processes that make a product or technology successful and most valuable to users. In her free time, Simona enjoys good food, music and dancing.
Subscribe to be the first to get our expert-written articles and tutorials for developers!