DotNetT2 Light_1200x303

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 Overview

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

                                                    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:

  1. Using the built-in support for asynchronously loading content from remote URLs via the ContentUrl configuration option (loading data with AJAX)
  2.  Loading local content via the built-in Form configuration
  3. 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 Stepper Right Orientation
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 -Themes

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 VS Project Dashboard Template

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!


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.