Telerik UI for ASP.NET Core R2 2020 Release

Check out everything that's new in Telerik UI for ASP.NET Core in our latest release, including new Form, TileLayout and Stepper components, improvements to Grid and Scheduler, floating labels and much more.

The R2 2020 release for Telerik UI for ASP.NET Core has arrived! Check out the latest additions to the suite of components like the Form, Stepper, TileLayout, Textbox and new features like Grid data source server-side remote grouping, Scheduler virtualization of resource groups, floating labels for inputs, compatibility with .NET 5.0 latest preview version and more!

With the second release for the year we are excited to share all-new components and features that you can plug into your 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 new in Telerik UI for ASP.NET Core R2 2020!

Compatibility with .NET 5.0 Preview Versions

We are happy to share that Telerik UI for ASP.NET Core R2 2020 release is compatible with .NET 5.0 preview 3 and we aim at staying current with all updates by Microsoft in the preview versions of .NET 5.0 until its official release later this year in November.

New UI for ASP.NET Core Components

New UI for ASP.NET Core Form Component

With the new Form component, creating and customizing forms is a smooth and enjoyable experience. You can easily accomplish the desired form appearance by using default or custom editors, specifying layout and orientation, displaying the editors in groups and columns, and taking advantage of the built-in validation.
                 Telerik UI for ASP.NET Core Form Component

Telerik UI for ASP.NET Core Form Component

A code sample on how to generate the displayed sample Form with its settings can be seen below:

@(Html.Kendo().Form<Telerik.Models.Form.UserViewModel>()
        .Name("formExample")
        .HtmlAttributes(new { action = "Index", method = "POST" })
        .Validatable(v =>
        {
            v.ValidateOnBlur(true);
            v.ValidationSummary(vs => vs.Enable(false));
        })
        .Items(items =>
        {
            items.AddGroup()
                .Label("Registration Form")
                .Items(i =>
                {
                    i.Add()
                        .Field(f => f.UserName)
                        .Label(l => l.Text("Username:"));
                    i.Add()
                        .Field(f => f.Password)
                        .Label(l => l.Text("Password:"))
                        .Hint("Hint: enter alphanumeric characters only.");
                    i.Add()
                        .Field(f => f.Email)
                        .Label(l => l.Text("Email:"));
                     i.Add()
                        .Field(f => f.DateOfBirth)
                        .Label(l => l.Text("Date of Birth:").Optional(true));
                    i.Add()
                        .Field(f => f.Agree)
                        .Label(l => l.Text("Agree to Terms:"));
                });
        })
        .Events(ev => ev.ValidateField("onFormValidateField").Submit("onFormSubmit").Clear("onFormClear"))
    )

The Form component allows you to customize the appearance and behavior of its items. By default, the Form will render default editors based on the data type provided in the model. The Form allows you to customize the field editors.

In the image below you can see how the Form component uses various other Telerik UI for ASP.NET Core editors within it.

                       Telerik UI for ASP.NET Core Form with Custom Editors

Telerik UI for ASP.NET Core Form with Custom Editors

The Form component offers grid layout and two modes of orientation horizontal or vertical – which let you organize form fields in the needed style, and display form fields in logical grouped sections.

Another great thing about the Form component is that it has built-in validation, which is triggered on form submission, but can also be configured to display a validation message when a field is focused on by a user, then blurred without setting its value. You can also enable a validation summary message that shows an unordered list of all validation errors that have occurred in the form fields. And last, but not least important, is the fact that you can customize the validation error message using the templates feature.

Telerik UI for ASP.NET Core Form Built-In Validation
Telerik UI for ASP.NET Core Form Built-In Validation

New UI for ASP.NET Core Tile Layout Component

The new TileLayout is a container UI component, which allows the end users to rearrange and resize the contained tiles inside it in order to create layout that serves their needs the best.

In this code sample you can see how to use the HTML TileLayout tag to generate the layout shown in the image below: 

@(Html.Kendo().TileLayout()
        .Name("tilelayout")
        .Columns(5)
        .RowsHeight("235px")
        .ColumnsWidth("300px")
        .Containers(c => {
            c.Add().Header(h => h.Text("Page Views")).BodyTemplateId("views-chart-template").ColSpan(3).RowSpan(1);
            c.Add().Header(h => h.Text("Conversion Rate")).BodyTemplateId("conversion-rate").ColSpan(1).RowSpan(1);
            c.Add().Header(h => h.Text("Currently")).BodyTemplateId("current").ColSpan(1).RowSpan(1);
            c.Add().Header(h => h.Text("Most Visited Pages")).BodyTemplateId("pages-chart-template").ColSpan(2).RowSpan(1);
            c.Add().Header(h => h.Text("Conversions by Channel")).BodyTemplateId("conversions-grid-template").ColSpan(2).RowSpan(2);
            c.Add().Header(h => h.Text("Bounce Rate")).BodyTemplateId("bounce-rate").ColSpan(1).RowSpan(1);
            c.Add().Header(h => h.Text("Users by Channel")).BodyTemplateId("users-grid-template").ColSpan(2).RowSpan(2);
            c.Add().Header(h => h.Text("Visitors")).BodyTemplateId("visitors-chart-template").ColSpan(1).RowSpan(2);
            c.Add().Header(h => h.Text("Conversion This Month")).BodyTemplateId("conversion-chart-template").ColSpan(2).RowSpan(1);
        })
        .Reorderable(true)
        .Resizable(true)
        .Events(e=>e.Resize("onTileResize"))
    )

Telerik UI for ASP.NET Core TileLayout Component

Telerik UI for ASP.NET Core Tile Layout Component

In essence, the TileLayout component is a two-dimensional grid-based sandbox surface based on CSS Grid (with all its features) that enables you to display content in tiles. Each container tile has configurable dimensions, header and body content which can be plain text or a complex template with components in it.

Users can resize its containers by snapping to the available columns and row units and rearrange the position of the tile containers with drag and drop.

Telerik UI ASP.NET Core TileLayout Resizing 

Telerik UI ASP.NET Core TileLayout Resizing

New UI for ASP.NET Core Stepper Component

The new ASP.NET Core Stepper is a feature-rich UI component that navigates users through a sequence of logical steps and visualizes the process progress. The Stepper is perfect match to walk users through processes like registration, application, purchase, booking or configuration.
Telerik ASP.NET Core Stepper Component

Telerik UI for ASP.NET Core Stepper – Horizontal

To initialize the Stepper simply call it and give it a name:

@(Html.Kendo().Stepper()
    .Name("stepper")
)

You can configure the number and name of steps, mark a step as selected or add icon to a step as shown in the example below:

@(Html.Kendo().Stepper()
        .Name("stepper")
        .Steps(s =>
        {
            s.Add().Label("First Step");
            s.Add().Label("Second Step").Selected(true);
            s.Add().Label("Last Step").Icon("save");
        })
  )

In addition to that, the UI for ASP.NET Core Stepper provides a set of modes that define the way the user will interact with the Stepper. You can configure the Stepper logical steps sequence (linear configuration option) – whether users have to follow it, or if they can jump to any step irrespective of the steps sequence.
                                                             Telerik ASP.NET Core Stepper Component - Vertical

Telerik UI for ASP.NET Core Stepper – Vertical

The Stepper component has both horizontal and vertical orientation which can be set via its Orientation property and allows full customization of its labels, indicators and steps.

@(Html.Kendo().Stepper()
        .Name("stepper")
        .Orientation(StepperOrientationType.Vertical)
        .Label(false)
        .Indicator(true)
)

Like all other Telerik UI for ASP.NET Core components, the Stepper has built-in keyboard navigation, accessibility and right-to-left support.
Telerik UI for ASP.NET Core Stepper RTL Support

Telerik UI for ASP.NET Core Stepper RTL Support

New UI for ASP.NET Core Textbox Component

With the new TextBox component you easily convert an <input> element in your ASP.NET Core applications into a styled textbox.

The Textbox provides multiple configuration options such as value, placeholder, floating label, change event (that fires each time a new value is set by the user) and comes with built-in accessibility and right-to-left support.
Telerik UI for ASP.NET Core TextBox Component

Telerik UI for ASP.NET Core Textbox Component

UI for ASP.NET Core Component Enhancements

Data Source Remote Grouping

With the new data source remote (server-side) grouping you can significantly boost the Grid performance when handling large volumes of data in your ASP.NET Core application. The data Grid works seamlessly with large data sets, because records are processed on the server and the data for each group is loaded only when the user expands the group. 

Telerik UI Data Source Remote Server Grouping

Telerik UI for ASP.NET Core Data Source Remote Grouping

Scheduler Enhancements

The Telerik UI for ASP.NET Core Scheduler has several new features to enable further customization of the already powerful component, and which allow you to deliver sleek visualization of events. These include:

Virtualization of Scheduler Resource Groups

If you need to boost performance of complex scenarios involving multiple resource groups and subgroups in the Scheduler component, then the new virtualization feature is just for you.

Enabling the virtualization of resource groups, you can achieve up to five times reduction of the rendering time and users can scroll smoothly through a heavy loaded Scheduler.

Check out the Scheduler examples of vertical resource grouping with and without virtualization with two groups and three subgroups and see the difference yourself.

Scheduler Search Bar

Users can easily find appointments from their schedule using the new Search events feature of the Scheduler component.  Simply start typing and the Scheduler automatically filters only the matching events.

Telerik UI for ASP.NET Core Scheduler Search Box

Telerik UI for ASP.NET Core Scheduler Search Box

Integration with iCalendar

You can easily integrate the Scheduler component with other appointment management applications such as Google or Apple calendar by utilizing a third-party library (in this case ical.js) that supports the iCalendar standard. Check out the UI for ASP.NET Core Scheduler iCalendar import/export demo.

Setting Working and Non-Working Days

Using the new WorkDays configuration, you can easily set specific days as working/ non-working in the Scheduler calendar. Based on the configured days in WorkDays, the Week and TimelineWeek views of the Scheduler will display working days in white, and the non-working days in light grey background colors.

Telerik UI for ASP.NET Core Non-Working Days

Telerik UI for ASP.NET Core Non-Working Days

Floating Labels for Inputs

You can now add fancy Floating Labels to the Textbox, Masked Textbox and Numeric Textbox components.
 Telerik UI ASP.NET Core Floating Label

                                   Telerik UI ASP.NET Core Floating Label for Numeric Textbox

Floating labels reside inside the inputs they describe in rest mode and float nicely once the user starts typing into the corresponding element.

Here's an example of how to add floating label to ASP.NET Core Numeric textbox:

@(Html.Kendo().NumericTextBox<decimal>()
        .Name("numerictextbox")
        .Format("n0")
        .Label(l => l.Content("Age").Floating(true))
)

New Rendering for Calendar, DatePicker, TimePicker and DateTimePicker

In R2 2020 we introduce a new rendering property called ComponentType that provides two separate modes (classic and modern) for the Telerik UI for ASP.NET Core Calendar, DatePicker, TimePicker and DateTimePicker components.
Telerik UI for ASP.NET Core DateTime Picker Modern Rendering

Telerik UI for ASP.NET Core Date and Time Pickers New Rendering

All existing applications will continue to work with the default classic mode, and if you want to take advantage of the new rendering simply set the property ComponentType to modern as shown in the example below:

@(Html.Kendo().Calendar()
         .Name("calendar")
         .ComponentType("modern")
)

Theming Specific Component

The Telerik UI for ASP.NET Core suite has 20+ built-in themes such as Default (our own styling), Material (based on the Material Design guidelines) and Bootstrap (which looks like the Bootstrap styling to integrate better). You can easily customize any of the out-of-the-box themes, or create a new theme to match your colors and branding by using the Telerik SASS ThemeBuilder application.

We added a convenient option to style specific components directly within the component demos.
                 Edit  Specific Component in Telerik ThemeBuilder

Launch ThemeBuilder from any ASP.NET Core component demo page

By clicking on the "Edit in Theme Builder" button in a specific component demo, the Telerik ThemeBuilder tool launches, preloads the particular component and lets you customize it. Note that despite the theming of a specific component, depending on the settings you need to change, there may still be modifications on the application level.

Telerik ThemeBuilder Edit Specific Component

Style specific components with Telerik ThemeBuilder

Download the Latest from Telerik UI for ASP.NET Core

We would like to thank you for your 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.

Sign-up for Telerik R2 2020 Webinar

Be sure to sign up for the Telerik R2 2020 release webinar on Thursday May 21, 2020 @11:00 am – 12:00 pm ET for a deeper look at all the new Telerik components and features in the release.

Happy ASP.NET Core 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.