Telerik UI for ASP.NET MVC R2 2021 Release!

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.

TL;DR Telerik UI for ASP.NET MVC R2 2021

  • New components: Task Board, SkeletonContainer, ActionSheet and Circular Gauge
  • New Grid features: Data Range Selection plus sleek option to copy or export to Chart & File
  • New Editor feature: Image resizing
  • New TreeList features: Filter row & row template
  • New Scheduler features: Hierarchical grouping support, Year View, normal display of 24-hour events
  • New QR Code features: Swiss QR Code, support for logo/image in QR Code
  • New Drawer feature: Hierarchical items
  • New Map feature: Support for Azure Maps
  • Forums revamp
  • Telerik Document Processing .doc file format support
  • Online technical training: Available now for both active trials and license holders

Deep Dive into R2 2021 Release of UI for ASP.NET MVC

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.

New UI for ASP.NET Core TaskBoard Component

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.

Two side-by-side vertical lists show stacked cards with large icons. The To-Do list on the left has a 'Send newsletter' card being grabbed and moved—possibly to the Done list on the right.

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.

Over top of the lists we saw last, there is a window open called 'Edit Campaigns', with fields for title ('Campaigns' is written here) and description ('Create a new landing page for campaign').

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.”

Two more lists, To-Do and In Progress, have cards with a title in pink text and description in black text, and then the left edges of the cards show a yellow, blue or green narrow bar of color.

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.

New UI for ASP.NET MVC Circular Gauge Component

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.

A Circular Gauge shows temperature. A slider at the bottom is adjusted from 56 to 25, and the gauge correspondingly shrinks its orange arc highlight of the gray circle border.

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.

A similar gauge, but this one uses a salmon color and has ticks on the outside of the circle.

Telerik UI for ASP.NET MVC Circular Gauge Customizations

New UI for ASP.NET MVC Action Sheet Component

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.

A popup menu has grayed out the screen behind it. The message is on the bottom part of the screen and has these words listed: Select item, edit item, add to favorites, upload now, cancel.

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.

New UI for ASP.NET MVC Skeleton Container 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.

A skeleton loading image shows the same key structure as a card beside it, just in gray rather than with the details. The gray is changing in color, indicating something is happening.

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.

A grid of information shows gray bars rather than the text that will ultimately fill the rows. When the text appears, it feels like everything loaded smoothly.

Telerik UI for ASP.NET MVC Skeleton Grid Integration

New UI for ASP.NET MVC Features

New Grid Advanced Selection and Export

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.

Some sections of a Grid are highlighted, and the option selected is Export to Chart. We see the selected data presented in a bar graph.

Telerik UI for ASP.NET MVC Grid Range Selection & Export to Chart

The MVC Grid selection modes include:

  • Individual or multiple Grid cells selection
  • Grid single range selection
  • Grid multiple ranges selection

Two separate groups of rows have been selected in a grid.

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.

The dropdown options for the previous example include 'Export with Headers'.

Telerik UI for ASP.NET MVC Grid Range Selection & Export to Excel

New Editor Feature: Image Resizing

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.

An editor window laid out with text and an image brings up the little resizing squares around the image.

Telerik UI for ASP.NET MVC Editor Resize Image

New TreeList Features: Filter Row, Row Template

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.

A table of employees shows their name, title and picture in a nested format, showing hierarchy. Other columns show the employees' country flags and length of service.

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.

The Last Name column brings up a smart search as the user types W...

Telerik UI for ASP.NET MVC TreeList Component Filter Row

New Scheduler Features: Hierarchical Grouping Support, Year View, Normal Display of 24-hour Events

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.

A calendar for June 2020 shows some events. At the left, two columns show Meeting Room 101, and Alex

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.

A calendar set to Year View shows very simple calendars for January-April 2021 (the scroll bar would show more months). A small dot appears below the dates with an event. January 20 has been clicked, bringing up a tooltip of the agenda for that day with two appointments at 3:00 (Helpdesk Weekly Meeting) and 6:00 (Dance Practice), and these are stacked in a green and a blue box.

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.

In a weekly team calendar, a 25-hour dev hackathon is shown as an event running in a vertical bar from 9am on Monday through 10am Tuesday.

Telerik UI for ASP.NET MVC Scheduler >24-hour Event

New QR Code Features: Swiss QR Code, Support for Logo/Image in QR Code

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.

A Swiss QR Code, which looks much like any QR code but has a 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.

This QR code has a Telerik UI character in the center

Telerik UI for ASP.NET MVC QR Code Image Support

New Drawer Feature: Hierarchical Items

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.

On the left is a navigation menu. Getting Started is collapsed. Overview is expanded and selected. Its text content is displayed on the right. The menu items below it are About Kendo and All Kendo Components. Below that is Most Popular Components.

Telerik UI for ASP.NET MVC Drawer Hierarchical Items

New Map Feature: Support for Azure Maps

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.

Online Technical Training

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.

New Features in Telerik Document Processing

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 Forums Revamp

The Telerik Forums got a major update as well as a favorite place where we love hanging out. Check out the complete story of why and what in the dedicated blog post.

Telerik and Kendo UI Forums Hub

Telerik and Kendo UI Forums Hub

Download Now UI for ASP.NET MVC

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.

Download UI for ASP.NET MVC

Special Twitch Sessions & Webinar

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:

  • Telerik R2 2021 Release Webinar on Tuesday, May 18 I 11:00 am – 1:00 pm ET
  • Live Twitch session on Wednesday, May 19 I 9:00 – 10:30 am ET (Blazor, WinUI, Xamarin)
  • Live Twitch session on Thursday, May 20 I 1:30 – 3:00 pm ET (Blazor, WinUI, Xamarin)

Reserve Your Telerik Webinar Seat

Thank you for your continuous support and happy coding.


Maria Veledinova
About the Author

Maria Veledinova

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.

Related Posts

Comments

Comments are disabled in preview mode.