Its June and time for another strong Telerik UI for ASP.NET MVC release that includes two new components—Wizard and Pager—plus a new Visual Studio Dashboard project template, and many new enhancements. Read on to see what’s new in the latest release of Telerik UI for ASP.NET MVC!
New UI for ASP.NET MVC Components
New UI for ASP.NET MVC Wizard Component
Wizard Component Overview
The new Telerik UI for ASP.NET MVC Wizard lets you easily create multi-step processes and simplify user input tasks in journeys. Each Wizard step can have its own content (form or other HTML), built-in form validation (via Form component integration) for the input data and a progress indicator showing the number of steps included in the process.
Telerik UI for ASP.NET MVC Wizard Component
Wizard Component Initialization
To add the Wizard in your ASP.NET MVC applications, simply give it a name and add the needed number of steps and content, as shown in the code sample below:
@(Html.Kendo().Wizard() .Name("wizard") .Steps(s=> { s.Add().Content("Initial Step"); s.Add().Content("Second Step"); s.Add().Content("Final Step"); }))Wizard Component Form Integration
Each step of the Wizard can accept a .Form() configuration method which defines all options that are available in the Form control itself. This gives you the benefit of having all the functionality available in the standalone Form component within the Wizard.
Telerik UI for ASP.NET MVC Wizard and Form Integration
A partial example on how to integrate Form component can be found in the code section below (for more details, check out the Wizard Form demo).
@(Html.Kendo().Wizard() .Name("wizard") .Events(ev => ev.Done("onDone")) .Tag("form") .Steps(s => { s.Add() .Title("Registration") .Form(f => f .Validatable(v => { v.ValidateOnBlur(true); v.ValidationSummary(vs => vs.Enable(false)); }) .FormData(new{ Username = "johny", Email = "john.doe@email.com", Password = "pass123", DateOfBirth = String.Format("{0:ddd, dd MMM yyyy}", DateTime.Now)}) .Items(items => { items.Add().Field("Username").Label(label => label.Text("Username:")); items.Add().Field("Email").Label(label => label.Text("Email:")); items.Add().Field("Password").Label(label => label.Text("Password:")).InputHtmlAttributes(new{ @type = "password"}).Hint("Hint: enter alphanumeric characters only."); items.Add().Field("DateOfBirth").Label(label => label.Text("DateOfBirth:").Optional(true)); }) )… )In order to facilitate the scenarios where Forms are integrated within the Wizard, the Telerik UI for ASP.NET MVC Wizard can be initialized either from a <form> or a <div> element. The configuration is set via the .Tag() configuration option.
@(Html.Kendo().Wizard() .Name("wizard") .Tag("form") .ValidateForms(true) .Steps(s=> {…})Wizard Component Loading Content
You can load content in the Wizard steps in multiple ways:
- Using the built-in support for asynchronously loading content from remote URLs via the ContentUrl configuration option (loading data with AJAX)
- Loading local content via the built-in Form configuration
- Loading local HTML content
Wizard Component Layout Options
Using the ContentPosition option, the Wizard layout can be configured in one of the following three rendering modes: a Stepper in a horizontal orientation above the content of the Wizard, vertical left or vertical right side of the Wizard step content.
@(Html.Kendo().Wizard() .Name("wizard") .ContentPosition(WizardContentPosition.Right) .Steps(s=> {…})
Telerik UI for ASP.NET MVC Wizard—Right Vertical Position of Stepper
Wizard Component Accessibility and Keyboard Navigation
The Wizard has built-in Keyboard Navigation that will allow easy navigation and interaction with the steps and inputs of the component using keyboard. It also comes with out-of-the box support for accessibility standards such as WCAG, Section 508 and WAI-ARIA attributes, that let users with disabilities use the Telerik Wizard with ease.
New UI for ASP.NET MVC Pager Component
Pager Component Overview
The Telerik UI for ASP.NET MVC Pager is a responsive standalone UI component which enables splitting content into pages. The Pager component allows integration with other data-bound UI components that do not have built-in paging such as the ListView, and you can use it for paging your data in templates too!
Telerik UI for ASP.NET MVC Pager Component
Using the Pager Component
To add the Pager component to your MVC applications you need to define a standalone data source and pass it by name to the Pager and to the data-bound control that will use it, as shown in the example below:
@(Html.Kendo().DataSource<Kendo.Mvc.Examples.Models.OrderViewModel>() .Name("dataSource1") .Ajax(t=>t.Read(read => read.Action("People_Read", "Pager")).PageSize(20))) @(Html.Kendo().Pager() .Name("pager") .DataSource("dataSource1") .PageSizes(true))Pager Settings and Configuration Options
The Pager component can be configured to show specific number of buttons that will be shown in a numeric page, or accept user input via its type setting:
.Numeric(true) //default.Input(true)Additionally, you have control over which built-in Pager elements are to be rendered:
- PageSizes() - renders the dropdown that allows the user to change the page size
- Refresh() - renders a refresh button
- PreviousNext() - toggles the visibility of buttons for navigating to the first, last, previous and next pages
- Info() - toggles the visibility of the current pager information
Pager Component Built-In Localization
The UI for ASP.NET MVC Pager component has built-in localization support, which makes it easy to translate messages such as: the text of the tooltips for its page and navigation links, information text and labels to any language that your app may require.
New Visual Studio Dashboard Template Project
For those of you building a dashboard-like application, the new Visual Studio Dashboard Project Template will come in handy with its predefined layout and UI building blocks.
Once you update your Telerik UI for ASP.NET MVC version with the latest package, you can create a new project and choose the new Dashboard template from the Create New Telerik Project Wizard.
Telerik UI for ASP.NET MVC Dashboard Project Template
What’s Coming Next in Telerik UI for ASP.NET MVC in R3 2020
Check out the Telerik UI for ASP.NET MVC roadmap page and see what we are already cooking for the R3 2020 release due in September. Not only will you get an insider’s look at our components and features pipeline for Telerik UI for ASP.NET MVC, but you’ll continue to have the opportunity to help us improve the suite with your valuable feedback.
Download the Latest from Telerik UI for ASP.NET MVC
We would like to thank for the continuous support and encourage you to download a free trial version of Telerik UI for ASP.NET MVC, or if you are an active license holder you can just grab the latest and greatest from the Your Account page!
Happy ASP.NET MVC Coding!