The Telerik R2 2021 release brings new sleek and feature-rich components, plus big new features to some of your favorite components.
Hey developer folks, it’s time for another massive release with new ASP.NET MVC UI components, features and tooling for your applications.
The Telerik R2 2021 release brings sleek and feature rich MVC components such as Task Board, Circular Gauge, Action Sheet and Skeleton , plus new features in the Grid, Editor, Drawer, TreeList, QR Code, Scheduler and Map components, online technical training available for both active trials and license holders and more. Read ahead the dedicated release blog post to find out a summary and a detailed description of the new release gems.
And if you want to learn more about the latest additions to Telerik UI for ASP.NET MVC, read ahead and see in detail all the new components, features and tooling that will help you speed up development.
Whether you utilize it as a kanban board, agile board, workflow management board or a simple to-do list, the new TaskBoard for ASP.NET MVC was built with the intent to save you a ton of time and provide maximum flexibility through its numerous features, configuration options and events.
Telerik UI for ASP.NET MVC Task Board Component
The TaskBoard component has full built-in support for all types of CRUD operations on both column and task level, and exposes multiple events and APIs, allowing you to easily accomplish various validation scenarios. For example, limit the number of cards allowed in a column, known as WIP (work in progress) limit, or enforce rules when moving cards between the board columns.
Telerik UI for ASP.NET MVC TaskBoard Card Editing
Using the Resources color configuration option of the TaskBoard, you can quickly make tasks stand out on the board. You can associate type of work or resources assigned to a task with specific color. Alternatively, you can use the different color notations for visualizing different task statuses or task priorities such as “low,” “medium” and “high.”
Telerik UI for ASP.NET MVC TaskBoard Categorization
The TaskBoard for ASP.NET MVC also comes with multiple template options for its columns and cards, so you can render custom content, use a search panel, utilize RTL (right-to-left) support, as well as work with built-in keyboard navigation support and accessibility.
We are happy to add a new Circular Gauge component to Telerik Data Visualization UI library. It has functionality and features similar to the well-known Arc Gauge but visualizes the values as a complete sleek circle.
Telerik UI for ASP.NET MVC Circular Gauge
The UI for ASP.NET MVC Circular Gauge supports full customization of the center text, scale and color capabilities. The Gauge’s visual appearance can be completely customized—you can easily set a different fill color depending on the current value or range of values, set the colors of its labels and ticks, configure the visibility of major and minor ticks, set the direction clockwise or counterclockwise, and more.
The Circular Gauge UI component exposes methods for exporting its visualization to PDF, PNG or other preferred image file format. Check out the Circular Gauge API for a complete reference of its capabilities.
Telerik UI for ASP.NET MVC Circular Gauge Customizations
The ActionSheet UI component encourages users to take action from a list of rendered options/buttons or alternatively dismiss it if they want to continue interacting with the application. The UI for ASP.NET MVC ActionSheet comes with multiple configuration options, events and built-in keyboard navigation and accessibility.
Telerik UI for ASP.NET MVC ActionSheet Component
Using the ActionSheet Items configuration, you can set specific attributes such as: Text, Icon, Description, Click event handler name and Group (ActionSheet items can be segregated in two groups—top and bottom).
For handling custom programming logic related to the interaction with the ActionSheet, you can subscribe to the exposed Open and Close events of the component.
The new SkeletonContainer for ASP.NET MVC UI component improves user experiences by displaying a preview placeholder of your content before data gets loaded. SkeletonContainers are becoming the perfect replacement for traditional loaders because they focus on progress rather than wait times and increase the perceived performance for users.
Telerik UI for ASP.NET MVC Skeleton Component
The Telerik SkeletonContainer accepts either a template or a CSS Grid. While you have the flexibility to pass almost anything with the template, using the CSS Grid, you benefit from the Item object that has a set of handy predefined properties that give you granular control over the Skeleton configuration: ColStart, ColSpan, RowStart, RowSpan and Shape.
Telerik UI for ASP.NET MVC Skeleton Grid Integration
With the R2 2021 release, we boosted the Grid for MVC with the option to select cells and ranges and export a subset of the Grid data to a chart.
Telerik UI for ASP.NET MVC Grid Range Selection & Export to Chart
The MVC Grid selection modes include:
Telerik UI for ASP.NET MVC Grid Range Selection
For those working with file formats such as Excel, the selected data can be easily selected and exported, or copied and pasted with the option to preserve column headers.
Telerik UI for ASP.NET MVC Grid Range Selection & Export to Excel
The UI for ASP.NET MVC Editor component now offers built-in image resizing functionality via drag handles that enable users to adjust image dimensions easily.
Telerik UI for ASP.NET MVC Editor Resize Image
The TreeList for ASP.NET MVC row template feature enables you to apply custom styling and content—you can render text, images, icons, link buttons and even other UI components.
Telerik UI for ASP.NET MVC TreeList Row Template
And with the new TreeList filter row feature, you can enable users with handy filtering options right beneath the column headers by setting the .Filterable property to mode row. In its default behavior, the filter row displays the corresponding filter type based on the TreeList column data types. However, you also have flexibility to set preselected filter operands or customize the filtering options with templates.
Telerik UI for ASP.NET MVC TreeList Component Filter Row
Another top UI component that received a boost in the R2 2021 release is the Scheduler for ASP.NET MVC.
With the new hierarchical resource grouping functionality, you can display the schedule of appointments associated with resources with parent-child relationship. The new grouping works in both vertical and horizontal orientation and visualizes the parent resource as a main group under which the related child resources are shown with the corresponding appointments per date/time.
Telerik UI for ASP.NET MVC Scheduler Hierarchical Grouping
Another major enhancement is the Scheduler Year View, which displays appointments in a 12-month outlook. Each day with associated appointment(s) shows a visual clue, and when clicked presents an expanded day view with all the events scheduled for that day.
Telerik UI for ASP.NET Core Scheduler Year View
The third Scheduler enhancement that is part of the R2 2021 release is the option to display the Scheduler All-Day Events (24-hour) either as an appointment in the “all day” section of the scheduler or as a normal 24-hour span event.
Telerik UI for ASP.NET MVC Scheduler >24-hour Event
With the modernization of the Swiss payment transactions with QR-bill, the QR Code component now supports the Swiss payment standard with its identifying sign of the Swiss Cross in the center.
Telerik UI for ASP.NET MVC Swiss QR Code
In addition to that, The Telerik QR Code for ASP.NET MVC also supports different types of overlay including image type, which lets you add a company logo or other custom image in the QR Code. The dimensions and size of the image are configurable and let you customize it as needed.
Telerik UI for ASP.NET MVC QR Code Image Support
You can now provide hierarchical structure within the Drawer component. The parent item can have its indented children by using and applying built-in classes.
Telerik UI for ASP.NET MVC Drawer Hierarchical Items
Earlier this year, Microsoft announced the deprecation of Bing Maps in favor of Azure Maps. We ensured that our UI for ASP.NET Core component is fully compatible with Azure’s png tile API and created an example demonstrating how you can implement Azure Maps’ geospatial capabilities with our Map component.
To speed up the onboarding process and help you get started developing ASP.NET MVC apps faster, we’ve unlocked the Telerik UI for ASP.NET MVC online training for everyone with an active trial or license. The training has an approximate duration of three hours and includes several modules that help you learn at your own speed and interest.
To get started with the Telerik UI for ASP.NET MVC technical online training, visit our learning portal with all Progress Products Virtual Classroom Courses or jump directly to Telerik UI for ASP.NET MVC Online Training.
In the latest distribution package of UI for ASP.NET MVC, you will find Telerik.Documents.Flow.FormatProviders.Doc NuGet (part of Telerik Document Processing) that will allow you to import .doc file format, and then manipulate, convert and export it to any of the other supported format providers.
Telerik and Kendo UI Forums Hub
Download and try a trial version of Telerik UI for ASP.NET MVC, 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 MVC.
Be sure to sign up for the Telerik R2 2021 release webinar and live Twitch sessions to see the newly released components and features in action:
Thank you for your continuous support and happy 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!