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!
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.
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
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
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
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.
Like most of the Telerik UI for ASP.NET Core Components, the ImageEditor comes with out-of-the box keyboard navigation support.
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
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.
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.
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.
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
The Loader component allows for complete customization and comes in different shapes, animations, colors and sizes.
Telerik UI for ASP.NET Core Loader Component Colors
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
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
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
Like most of the Telerik UI for ASP.NET Core Components, the Text Area comes with out-of-the box RTL support.
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
Along with the multiple new components, we focused efforts on enhancing some of your favorite components: Grid, Gantt, TreeList, Scheduler, Spreadsheet and Numeric Textbox.
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.
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
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
To give further flexibility to both you as a developer and your app users, we enabled multiple Gantt column options and attributes:
Telerik UI for ASP.NET Core Gantt Column Sorting
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
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.
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.
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
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.
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.
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.
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
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
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.
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.
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.
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.
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.
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.
Happy ASP.NET Core 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!