New ASP.NET Core PivotGrid v2 & Avatar UI Components, REPL, enhancements in Editor, Data Grid, ColorPicker, ScrollView, theming options, more Figma UI assets.
Hey, developer folks! It’s Telerik R1 2022 release time, and we’re excited to kick off 2022 with the introduction of new UI components, features, theming enhancements, more Figma UI assets, and Visual Studio Code extension updates!
Below is a summary of the R1 2022 Telerik UI for ASP.NET Core release content shipped between October 2021 and January 2022:
Now let’s take a closer look at the R1 2022 updates for Telerik UI for ASP.NET Core!
Telerik UI for ASP.NET Core library is compatible with .NET 6 and Visual Studio 2022 since November 2021, shortly after the release by Microsoft. You can dive into seamless development with our web components and create new projects using our VS project templates and built-in layouts.
The Telerik REPL for ASP.NET Core is an interactive online environment that reads, compiles and immediately runs your C# server-side code in the browser. The run-ready environment requires no installation, account or special tooling—just jump in and start coding. Additional features include:
Detailed review of the ASP.NET Core REPL capabilities can be found in the dedicated blog post.
The new ASP.NET Core Avatar Component is ideal for showing photos, icons, avatar representations or initials in your apps.
The Avatar component can be customized to meet a variety of UX requirements thanks to its configuration options. This involves defining whether the Avatar should be drawn as a circle, with rounded sides or as a square, as well as what images, icons or initials should be displayed within the component.
You can further customize the look by setting its size (small, medium (default) or large), appearance fill style, border, alt text and more!
Based on your feedback related to theme customizations and design language trends, we are going to address various aspects of our themes in an ongoing effort to make Kendo UI themes more flexible, extensible and customizable to help our users cover more design and UX requirements. (Note: Kendo UI’s common set of themes can be shared across all Telerik and Kendo UI products: UI for Blazor, ASP.NET Core and MVC, as well as Kendo UI for jQuery, React, Vue and Angular).
We have revisited all Telerik UI components across the Default, Bootstrap and Material themes and introduced common options that can be set on a component level that can help with defining the main theme colors, the size and shape of the individual components, and more.
With R1 2022 we have updated the Button, Input, DateInput and DropDown component categories (see the full list of updated components and related appearance documentation here). The rendering update offers the following theme options tailored to the component specifics:
These options have rolled out with the v5 release of the Kendo UI Sass-based themes, which is the latest version of the theme packages as of today. These updates contain breaking changes for anyone that has customized the Telerik UI for ASP.NET Core components. We highly recommend reviewing the documentation article describing in detail the rendering changes and adding some time for addressing breaking changes as a part of any update process you may have planned.
Additional components will be tackled with future releases in 2022. Below is a rough roadmap around what components will be covered next. Keep in mind that things may change here as our roadmap does adjust based on customer feedback, but this should still serve as a rough plan for when certain components will be targeted:
R2 2022 roadmap and beyond: AppBar, BottomNavigation, Badge, Notification, Tooltip, Loader, Toolbar, Window, Dialog, TabStrip, PanelBar, ExpansionPanel, Upload, Editor, Scheduler, and more!
To provide more information about these changes and our general plan around the Kendo UI themes, we recently posted a blog post about the future of Themes in Telerik and Kendo UI.
We officially introduced the Telerik and Kendo UI Kits for Figma a few months back with the goal to help improve the collaboration between designers and developers using Telerik and Kendo UI components. We expanded the initial set of UI components, and I am happy to share that with R1 2022 we have introduced Figma assets for all Telerik and Kendo UI components with only one exception: the charts.
Last month, we announced the release of the new and improved PivotGrid UI component for ASP.NET Core! You can immediately take advantage of the new PivotGridv2, which was built from the ground up and has an updated design to ensure the performance and user experience are as good as they can be. While at the time of its initial release the PivotGridv2 may have fewer features and less functionality than the original PivotGrid, the plans are, in the next few releases, to continue to expand its functionality until it reaches full parity with the original (and even exceed it).
If you are already using the existing PivotGrid, have no fear—nothing will change with this update. We will continue to keep both components existing side by side until we see evidence that most users have migrated to the new component.
Try out the new PivotGrid component and take a spin at the demos showing how to sort, filter, render custom content using templates, and export to PDF.
We expanded the sorting options for the Grid and added more ways to interact with it. End users can now perform sorting over multiple columns when pressing the CTRL button. When clicking on a column header without the CTRL button pressed, the Grid will revert to sorting by a single column.
Using the new autoFitColumns method, you can render a sleek Grid with a minimum possible width for all or selected columns so that their underlying text fits nicely without empty spaces or wrapping.
The ASP.NET Core data grid has built-in functionality that allows end users to reorder single and multiple rows by dragging and dropping them within the Grid and between two Grids.
The Grid’s Search Panel now allows search and filtering for non-string column values.
The Editor UI component for ASP.NET Core has been enriched with Undo and Redo built-in commands, further enhancing the component’s capabilities.
The ASP.NET Core ColorPicker has been expanded with Gradient and Palette views, plus a switch between predefined colors (Palette) and custom colors (Gradient). The component also exposes inputs for both RGB and HEX formats and an option to configure its default format.
Last but not least, the ColorPicker now provides options for checking the color contrast ratio between two colors following the Web Content Accessibility Guidelines (WCAG) AA and AAA levels.
The Telerik UI for ASP.NET Core PanelBar component received a slightly refreshed look and feel, which is most noticeable when all content is expanded, making sure child items stand out better.
With R1 2022 we have improved the panning and zooming in Telerik and Kendo charts. With the current update the zoom is now consistent when zooming in and out using the mouse wheel.
Check out the improved pan and zoom feature in the Chart ASP.NET Core demos.
Another announcement for R1 2022 related to the updating of all of the themes is that the Charts library now supports a new set of default colors out of the box. That gives a more modern feel, more colors to choose from for the chart series and a more consistent design with the UI theme that is being used.
Here’s a quick link to the Telerik UI for ASP.NET Core Charts that shows the new default colors.
To complete the support for referencing Telerik components using both HTML and TAG helpers in ASP.NET Core applications, we added the option to plug the Responsive Panel UI component using Html.Kendo().ResponsivePanel() configuration.
With the current expansion of TAG helper examples, we plan to address your feedback related to easier work with Telerik UI components in ASP.NET Core apps. In R1 2022 we are adding tens (if not hundreds) of code samples for our most-loved components, such as the Data Grid, DropDownList, Menu, TabStrip, Upload and more! Our goal is to tackle additional TAG helper demos with future releases in 2022, so you can expect more updates in R2 & R3 2022 releases.
Telerik UI for ASP.NET Core brings a refreshed and improved Visual Studio Code extension! You can enjoy the updated UX, configure the .NET framework version (including .NET 6.0), and set project themes plus color swatches with a couple of clicks at project creation.
You can also try out the new Admin Dashboard project template with pre-built layout and functionality. Simply plug in your data and bind it to the components—including Grid, Tile Layout, Drawer, Calendar, Form, various Chart types, Card and more.
In the R1 2022 release we have something new for those of you who are using Telerik Document Processing within ASP.NET Core apps! In the latest distribution package, you will find several of the most-wanted items from our Feedback Portal, such as:
Download and try a 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.
Be sure to sign up for the Telerik R1 2022 release webinar and live Twitch sessions to see the newly released components and features in action:
Monday, January 24 | 10:00 am – noon ET I Desktop & Mobile
Tuesday, January 25 | 10:00 am – noon ET I .NET Web
Wednesday, February 2 | 11:00 am – 1:00 pm ET
Thank you for the 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!