New ASP.NET Core UI Components and Features with Telerik R3 2020 Release

It’s September and time for the R3 2020 release of Telerik UI for ASP.NET Core! It is massive and includes great time-saving controls such as Image Editor, App Bar, Loader, Text Area, Wizard, Pager and new features like Grid Sticky Columns, Gantt Planned vs Actuals, Column Options and Templates, TreeList Checkbox Selection, Drag, Drop & Reorder, compatibility with .NET 5.0 and more!

With the third major release for 2020 we are excited to share all new components, features and enhancements that you can plug into your ASP.NET Core projects and create modern and engaging applications. As always, we listened to your feedback and included in the release many of the most voted items and features. Read ahead and see what’s included in Telerik UI for ASP.NET Core R3 2020!

Compatibility with .NET 5.0 Release Candidate

We are happy to announce that Telerik UI for ASP.NET Core R3 2020 release is compatible with .NET 5.0 Release Candidate, and we aim at staying aligned with all updates by Microsoft with its official release later this year in November.

New Telerik UI for ASP.NET Core Components

UI for ASP.NET Core Image Editor Component

Image Editor Overview

The new Image Editor is a flexible graphics editing UI component that allows end users to modify their images directly in their browser, without installing any third-party software. The ImageEditor comes with a canvas and handy toolbar exposing the built-in options to load, crop, resize, use zooming features, undo and redo commands and download the modified image.

Telerik UI for ASP.NET Core Image Editor Component

Image Editor Resizing

When resizing an image, the ImageEditor displays a tool panel with options that will let you adjust width, height and lock aspect ratio. As you modify the image size settings and preview the applied changes, you can easily switch back and forth using the Undo/Redo buttons in the toolbar.

Telerik UI for ASP.NET Core Image Editor Resizing

Image Editor Cropping

Cropping an image also comes with a tool panel, which enables you to tweak aspect ratio, orientation, width and height of the image. Again, you can view the applied changes in real-time and have the option to revert a step back using the Undo button or confirm the changes and download the modified image.

Telerik UI for ASP.NET Core Image Editor Cropping

Image Editor Zoom Options

The zooming options are split into easily accessible Zoom-In and Zoom-Out buttons (as more common operations), and a separate dropdown for “Fit to Screen” and “Show Actual Size” operations. When using the “Show Actual Size” option, the image is displayed in its 100% size (if it's bigger than the image area, a scrollbar will be displayed). When the “Fit to Screen” option is selected, the image is displayed at its maximum with regards to the paddings of the area.

Image Editor Built-In Keyboard Support

Like most of the Telerik UI for ASP.NET Core Components, the ImageEditor comes with out-of-the box keyboard navigation support.

UI for ASP.NET Core App Bar Component

AppBar Component Overview

The new App Bar is a component that can serve as header or footer template of a page and is used to provide contextual information and actions related to the application current screen. Using the AppBar templates you can easily include plain text or other controls and customize the component, so it matches your app requirements.

 

Telerik UI for ASP.NET Core AppBar Component

AppBar Configuration and Customization

As application scenarios vary a lot, we ensured that the AppBar is fully customizable, and you can easily adapt it as needed. You can configure the AppBar position mode (static, fixed or sticky), position (none, top, bottom), theme color (light, dark or inherited from the respective theme) and the array of AppBar items. 

AppBar Items Configuration and Customization

Furthermore, as the AppBar component serves as a container for other items, you can configure both the AppBar and each of its items. On the AppBar items level you can specify CSS class name, width, type – spacer item or content item, as well as support for templates.

AppBar Event

The AppBar supports resizing, and we have exposed a resize event that is fired when the window gets resized and let you have control over the showing and hiding of AppBar items when the visible part of the viewport changes.

UI for ASP.NET Core Loader Component

Loader Component Overview

The new ASP.NET Core Loader component is a great match for cases where you need to indicate to users in your apps that a process is in progress—loading data, submitting a form or performing large volume of updates. The Loader provides multiple built-in options for configuring its animation, size and colors.

Telerik UI for ASP.NET Core Loader Component

Loader Component Customization

The Loader component allows for complete customization and comes in different shapes, animations, colors and sizes.

• Available Loader animations include: Pulsing (default), InfiniteSpinner and ConvergingSpinner.
• Using the ThemeColor property of the Telerik Loader component, you can easily set its color to one of the predefined colors from the Theme Builder.
• In addition to the colors, you can also adjust the Loader size, so that it fits your app scenario. The possible out-of-the box Loader sizes include small, medium and large.
  
  

Telerik UI for ASP.NET Core Loader Component Colors

Loader Component Integration

The Loader UI control can be easily integrated with other ASP.NET Core UI components to indicate that an operation is executing. Check out a demo on how to integrate a Loader with a Button component.

 Telerik UI for ASP.NET Core Loader Component Button Integration

UI for ASP.NET Core Text Area Component

TextArea Component Overview

The Text Area UI component is a nice addition for any application requiring wider or multi-line text editing capabilities such as descriptions, comments or address details. The control comes with multiple built-in features that let you easily customize every aspect of its look and behavior, such as defining maximum length of the text, number of columns and rows, placeholder, enabling/disabling, resizing and labels.  Additionally, it exposes a Change event, to let you handle the business logic of your ASP.NET Core app.

Telerik UI for ASP.NET Core TextArea Component

TextArea Component Labels

The ТextArea can have label associated with it. You can choose from three labeling options—the textarea label can be added in front of the input, within the content or as a fancy floating label.

 Telerik UI for ASP.NET Core TextArea Component with Floating Label

TextArea Right-To-Left Support

Like most of the Telerik UI for ASP.NET Core Components, the Text Area comes with out-of-the box RTL support.

UI for ASP.NET Core Wizard and Pager Components

Earlier in June, we announced the availability of another two gems that are part of R3 2020 scope—the Wizard and Pager for ASP.NET Core components. While we already received quite positive feedback about their usage and benefits, for those of you who missed their announcement, make sure to check out their full review in this blog post.

Telerik UI for ASP.NET Core Wizard Component

Telerik UI for ASP.NET Core Component Features

Along with the multiple new components, we focused efforts on enhancing some of your favorite components: Grid, Gantt, TreeList, Scheduler, Spreadsheet and Numeric Textbox.

New UI for ASP.NET Core Gantt Component Features

The Gantt component received a lot of enhancements with this release and several highly requested features were included in the latest version of Telerik UI for ASP.NET Core. Namely: comparing planned versus actual task execution, multiple configuration column options for the task section of the Gantt, column templates that let you render custom task content and more! We hope that providing these built-in features will help you save a ton of time when working on ASP.NET Core applications related to project management, task management, resource management and productivity applications.

Gantt Planned vs Actual Comparison

The Gantt is a go-to tool, not just for task planning and execution, but also a great visual way to compare if tasks are progressing according to plan. With the new Gantt feature Planned vs Actuals you can easily compare if a task's actual start and end dates are according to plan. 

You will get visual indicators that show if planned start and end dates are kept, or if a task's actual date is after or before the planned start/end dates.

 Telerik UI for ASP.NET Core Gantt - Planned vs Actual

Gantt Column Templates

The Gantt column templates feature will let you render any content you may need, not just plain text. Whether is it images, links, or formatted multi-line description—all of that is now possible.

 Telerik UI for ASP.NET Core Gantt Column Templates

Gantt Column Options 

To give further flexibility to both you as a developer and your app users, we enabled multiple Gantt column options and attributes:

• Sorting
• Filtering
• Expanding
• Header template and attributes
• Hidden
• Menu
• Using editors
• And more

Telerik UI for ASP.NET Core Gantt Column Sorting

New UI for ASP.NET Core Grid Features

Grid Sticky Columns

The new Grid Columns Sticky feature is specifically beneficial for grids with a large number of columns that need to be visualized on limited screen space.  The concept of sticky columns enables certain column(s) to stay visible in the viewable area, while leaving the rest of the non-sticky columns scrollable.

The Sticky columns feature is available alongside frozen columns. If you wonder what the difference between frozen and sticky columns is, here is the answer: while the frozen columns in the Grid are rendered on the left side of the widget, the sticky columns are displayed in the scrollable area with the non-frozen columns.

To try out the new feature, simply set the Sticky property of the corresponding column to true, and this will make the column sticky. Sticking/unsticking columns is enabled in the Grid Column Menu, so end users can easily configure the data in a way they prefer.

 Telerik UI for ASP.NET Core Grid Sticky Column

Grid Foreign-Key Binding to Remote Collection

With this new feature you can easily bind a foreign-key column to a remote data source. In order to bind the column to a remote collection of items, supply an URL Action instead of a static collection. In order to ensure that the column values will be bound to the correct foreign value, you also need to supply the DataValueField and DataTextField options. Check out the code sample and demo of implementing grid column foreign-key binding.

New UI for ASP.NET Core TreeList Features

TreeList Component Drag, Drop & Reorder

With the R3 2020 release, we enhanced the TreeList drag-and-drop feature with an option to reorder items. When enabled, the items of the TreeList can be dragged and dropped across all levels (by default reordering is be disabled). The functionality also includes tooltips/markers that show users where exactly the tree list item will be dropped.

TreeList Component Checkbox Selection 

The TreeList now supports checkbox selection: you can select and have access to parent items with all of its related children rows, or just a single tree list item.

Telerik UI for ASP.NET Core TreeList Checkbox Selection

UI for ASP.NET Core PivotGrid Row and Column Header Sorting

With the new PivotGrid feature you can now perform data sorting by row and column header values. This allows you to sort values on top level dimension members, as well as drill-down dimension hierarchy, view sliced values and again sort on lower level dimension members.

UI for ASP.NET Core Spreadsheet: Render Cells Using Custom HTML 

With the R3 2020 release, we shipped a highly requested Spreadsheet feedback portal item. By adding a single property .Html(true) and setting it to true, you can render the Spreadsheet cell value as custom HTML. Additionally, we exposed a method that will let you set the HTML property dynamically. You can try it yourself with a runnable example in the documentation API here.

UI for ASP.NET Core Scheduler Recurrence Editor Section 508 and WCAG 2.0 compliant 

Further improving the accessibility of the Scheduler UI component, in R3 2020 we ensured that recurrence editor conforms to Section 508 and WCAG 2.0 standards.

UI for ASP.NET Core Numeric Textbox: Selecting All Text on Focus 

The new SelectOnFocus property of the numeric textbox editor will be handy for users performing data editing and need to start typing immediately after the focus is placed on specific NumericTextBox. When SelectOnFocus is set to true, the whole text will be selected upon focus.

Telerik ASP.NET Core Numeric TextBox - Selecting all text on focus

Convert ASP.NET Core Projects to Telerik UI for ASP.NET Core Projects

With the new Visual Studio wizard, you can quickly and easily convert existing ASP.NET Core projects to Telerik UI for ASP.NET Core, meaning you will get automatically all the needed NuGet references and visual studio project templates.

Telerik UI for ASP.NET Core Convert Wizard

Visual Studio Dashboard Project Template 

Announced earlier in June, the new Visual Studio Dashboard project template for ASP.NET Core, is already seen as real time-saver by developers creating dashboard-like applications, so make sure you check out its original announcement in the blog post.

Telerik Document Processing Enhancements

SpreadProcessing: Support for XLS Import and Export

The RadSpreadprocessing library now supports import and export to and from XLS file format (Excel 97 - Excel 2003 binary file format, developed by Microsoft for representing spreadsheets).

Check out the features help topic and learn how to work with XLS files in SpreadProcessing, using XlsFormatProvider.

PdfProcessing: 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 predefined in the PDF format CMap Tables 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.

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 Core. With the Telerik R3 2020 release, we completely revamped the ASP.NET Core demos and documentation with the goal of making your journey better and faster.

Check out the new Telerik UI for ASP.NET Core components demos and documentation and let us know what you think!

Download Telerik UI for ASP.NET Core

Download the Latest from Telerik UI for ASP.NET Core

We would like to thank for the continuous support and encourage you to download a free trial version of Telerik UI for ASP.NET Core, 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 Core.

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

Happy ASP.NET Core Coding!