What’s New in Telerik UI for ASP.NET AJAX R3 2020

The R3 2020 Telerik UI for ASP.NET AJAX release is here! Discover more about the new Web Forms Card component, the latest new features in the Chart component, our upcoming Telerik Web Products R3 2020 release webinar and what’s next on the R1 2021 roadmap due in January!

ASP.NET AJAX Card Component

RadCard Overview

The Card UI component will give you a great way to organize page layouts in flexible content containers. It consists of a header element (with title and subtitle), footer, body that serves as container for the Card content, actions, separators and more. Card components are a perfect match for applications such as hub pages, catalogs, analytical dashboards, blogs, ecommerce and social platforms.

Telerik UI for ASP.NET AJAX Card Component

Card Components

The ease of use of the RadCard comes from its building blocks that let you directly plug them as tags within the main RadCard tag and fully customize them. Depending on the type of Card you need to build, you can add:

• Header – renders as <div>
• Title – renders as <h5> element
• Subtitle – renders as <h6> element
• Body - renders as <div>
• Footer - renders as <div>
• Action containers and actions - renders as <div>, respectively <hr>
• Media - renders as <div>
• Separators - renders as <div>

RadCard Styles

There are several predefined states as properties of the RadCard tag, that you can use to change the Card appearance. The available CardState options are default, primary, info, success, warning, error.

RadCard Content and Customization

The RadCard control allows any type of HTML content or control to be accommodated within its body—plain text, links, action buttons, icons, images, videos and more. You also have also full control and flexibility over how the content is arranged, and you can even add or create other components within the Card itself. The Card also provides complete configuration of its header and actions, so you can easily implement any requirement in no time.

Additionally, the RadCard component exposes several CSS classes that let you easily arrange series of cards into various layouts:

• Deck of Cards – using the .k-card-deck class, you can render a single row of cards detached from one another;
• Group of Cards – using the .k-card-group class, you can render a single row of cards attached from one another;
• List of Cards – using the .k-card-list class, you can render a column of cards detached from one another;
• Custom Layout – to achieve flex layout you can use one of the following classes: .k-vbox, .k-hbox or .k-column;

RadCard Orientation

The Card component can organize its content (Header, Body, Footer, Actions) in vertical and horizontal layout. Additionally, actions alignment can be configured to: start, centered, end, stretched and none.

Telerik UI for ASP.NET AJAX Card Orientation – Vertical and Horizontal

RadCard Comes with Variety of Skins 

The RadCard component comes with 20+ out-of-the box skins like Material, Bootstrap. You can easily customize the cards to match the needs of your web site and modify the built-in themes as they are based purely on HTML5 and CSS3. 

Telerik UI for ASP.NET AJAX Card Component Skins

RadCard Right-to-Left Support

Like most of the Telerik web forms components, the RadCard control provides built-in support for right-to-left presentation.

RadChart New Features

In R3 2020, along with the new Card component, the RadChart has been enhanced with the following features: Crosshairs, DashType property, reverse legend items order and more. Read ahead to learn in detail what new customizations you can apply to your charts.

Crosshairs

Crosshairs are thin vertical and horizontal lines centered on a data point in a chart. Crosshairs in charts allow users to see the exact value of a point at the current cursor position. 

Telerik RadChart Crosshairs Feature

DashType Property

In R3 2020 we added a DashType Property for Area, Line and ScatterLine charts. You can choose between Dash, DashDot, Solid or any of the other four types and style your chart lines, xAxis, yAxis, major and minor grid lines as needed.

Telerik RadChart DashType Property

Appearance Settings for the Series Border

Series borders can now be customized with additional settings for width, dash type, color and opacity. Checkout the demo (Series settings -> Borders section on the right) and see the various options for configuring chart border series work.

Telerik RadChart Series Border Settings

Option to Reverse Legend Items Order

With the new feature, you can easily reverse the default order of items in the chart legend. More on chart legend configuration options can be found in the dedicated demo (press the Reverse Items button in the legend configurator).

Turn on/off the Highlight Effect when Series are Hovered

Programmatically turn on and off the highlight effect of series hover, or easily enable your users to do it themselves with a single click. Check out how on the demo page here (go to the Series Settings tab in the configurator and play with the highlights radio list).

New and Improved Documentation and Demos

As we know how important the documentation and examples are for developers, we continuously dedicate efforts to improve the resources related to Telerik UI for ASP.NET AJAX. In R3 2020 we completely revamped the demos and documentation with the goal to make your journey better and faster.

Take a look at the Telerik Web Forms components demos and documentation and let us know what you think!

Telerik Document Processing Libraries New Features

RadSpreadProcessing: XLS Format Support

Create and modify XLS documents in code-behind with the new XlsFormatProvider. The new class enables you to import and export documents of the Excel 97 - Excel 2003 Binary file format.

RadPdfProcessing: CMap Tables Support

The CMap Tables in the PDF documents define mappings between character codes and character selectors. Now you can seamlessly import documents containing the CMap Tables predefined in the PDF format and ensure even the custom ones are imported as expected. Find out how to enable the support for them in the CMap Tables help topic.

Telerik UI for ASP.NET AJAX R1 2021 Roadmap

We will continue to expand the Telerik web forms suite and we already have exciting plans for the next R1 2021 release due in January. If you want a sneak peek of what’s coming, we encourage you to keep using the Telerik UI for ASP.NET AJAX Roadmap Page. Not only will you get an insider’s look at our features pipeline, but you’ll continue to have the opportunity to help us improve with your valuable feedback. Your input helps make the Telerik UI for ASP.NET AJAX suite bigger and better for everyone.

Download Now Telerik UI for ASP.NET AJAX

We would like to thank you for the continuous support and encourage you to download a new Telerik UI for ASP.NET AJAX trial, or if you are an active license holder you can just grab the latest and greatest from the Your Account page!

Once you try it out and let us know what you think on our feedback portal.

Telerik Web Products R3 2020 Webinar

Join the live dedicated to Telerik Web Products R3 2020 release webinar on Monday, September 28, 2020, starting at 11 am ET as Ed Charbeneau and Sam Basu present the major updates for Telerik UI for ASP.NET MVC, Core, AJAX and Blazor in detail.

Reserve Your Webinar Seat