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, 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; }
<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
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.