Currently, the Content function for Steps in a Wizard only accepts a string value (see API here).
This means that in order to add a partial view (bound to the current model and its properties), the most straightforward way I could find was to put the partial view (and any wrappers) in its own file and add an extension method "ToHtmlString()". For example:
@model MyModel
@(Html.Kendo().Wizard().Steps(step => {
step.Add().Content(Html.Partial("~/Path/To/View/Wrapper.cshtml", Model).ToHtmlString());
})
using Microsoft.AspNetCore.Html;
using System.IO;
public static class HtmlContentExtensions
{
public static string ToHtmlString(this IHtmlContent htmlContent)
{
if (htmlContent is HtmlString htmlString)
{
return htmlString.Value;
}
using StringWriter writer = new();
htmlContent.WriteTo(writer, System.Text.Encodings.Web.HtmlEncoder.Default);
return writer.ToString();
}
}
@model MyModel
@(Html.Kendo().TabStrip().Items(tabstrip => {
tabstrip.Add()
.Content(@<div id="@Model.TabContainer" class="myTabWrapperClass">
@await Html.PartialAsync("~/Path/To/View.cshtml", Model)
</div>);
})
Currently, the Wizard displays any server-side errors that are added to the ModelState in the respective form fields within the Wizard steps (which is great).
The problem is that those errors are not "cleared" when the field is edited/changed. This prevent the form from being posted or the user to move to the next step if the form validation is enabled within the Wizard.
The only way to work with server-side error in the wizard form at the moment is to either disable form validation altogether or to attach an "onchange" event to each of the fields and clear any server-side errors manually once the field is changed.
Both solutions are far from ideal. It would be great if this was part of the default behaviour of the wizard form (like it already is for client-side errors).
In a Wizard with form integration, once you click on the "Done" button, the form is posted to the server, if the server returns the page with any errors in the ModelState, the wizard is displayed again from the first step and any errors are added to their respective fields.
The problem is that if the errors are not in the first step, the user simply sees the Wizard returning to the first step with no obvious indication of why. Only when he navigates to the next steps he will understand that an error was found. If the Wizard has many steps and the error in only in the last ones, the user can get confused.
It would be nice if the wizard could display an icon/badge on top of the step icon indicating that an error was found in that step.
Currently, to set a field's label and text the Wizard's Label() and Title() options must be used:
items
.Add()
.Field(p => p.DropdownId)
.Label(l => l.Text("Dropdown"))
.Title("Dropdown")
It would be helpful if the Wizard can be configured to get these from the data annotation attributes in the model:
[Display(Name = "Dropdown")]
public int DropdownId{ get; set; }
The Wizard's stepper does not allow manual navigation when the select() method is used on the last step.
Done
button.The Wizard's stepper does not allow manual navigation when the .select() method is used on the last step and navigates back to the first index of the Stepper.
The Wizard's stepper should allow manual navigation when the .select() method is used on the last step and navigates back to the first index of the Stepper.
Is it possible to implement an option to change the position of the Wizard ActionBar (Buttons and Pager elements)?
For example:
Currently, when a Telerik UI Form is nested inside a Telerik UI Wizard, the user should click twice on the Submit button after they have changed a field.
Steps to replicate:
1. Nest a form inside a Wizard.
2. Change a field in the form.
3. Click on the submit button.
4. The form is not submitted as the blur validation consumes the click. The user has to click the button submit again.
Short video demonstration:
<kendo-wizard name="wizard" on-done="onDone">
<wizard-steps>
<wizard-step title="Start">
<wizard-step-buttons>
<wizard-step-button name="next" text="Next"></wizard-step-button>
</wizard-step-buttons>
<wizard-step-content>
</wizard-step-content>
</wizard-step>
<wizard-step title="User details">
<wizard-step-buttons>
<wizard-step-button name="previous" text="Previous"></wizard-step-button>
<wizard-step-button name="done" text="Register"></wizard-step-button>
</wizard-step-buttons>
<wizard-step-content>
</wizard-step-content>
</wizard-step>
</wizard-steps>
</kendo-wizard>
js exception on using the Wizard tag helper in an editor template
no js exceptions on using the tag helper in an editor template