chore(demos): add wizard dynamic step example

Telerik.Examples.Mvc/Telerik.Examples.Mvc/Controllers/Wizard/DynamicStepController.cs

@@ -0,0 +1,27 @@
+using Microsoft.AspNetCore.Mvc;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Telerik.Examples.Mvc.Models;
+
+namespace Telerik.Examples.Mvc.Controllers.Wizard
+{
+    public class DynamicStepController : Controller
+    {
+        public IActionResult DynamicStep()
+        {
+            return View("/Views/Wizard/DynamicStep.cshtml");
+        }
+
+        [HttpPost]
+        public IActionResult DynamicStep(UserDetailsModel model)
+        {
+            return Json(model);
+        }
+        public IActionResult Load_Step(string type)
+        {
+            return PartialView("_DynamicStepPartial", type);
+        }
+    }
+}

Telerik.Examples.Mvc/Telerik.Examples.Mvc/Models/UserDetailsModel.cs

@@ -0,0 +1,42 @@
+using System.ComponentModel.DataAnnotations;
+
+namespace Telerik.Examples.Mvc.Models
+{
+    public class UserDetailsModel
+    {
+        public string Type
+        {
+            get;
+            set;
+        }
+        public AccountDetailsModel AccountDetails
+        {
+            get;
+            set;
+        }
+
+        public CompanyDetailsModel CompanyDetails
+        {
+            get;
+            set;
+        }
+    }
+    public class AccountDetailsModel
+    {
+        [Required]
+        public string Username { get; set; }
+
+        [Required]
+        public string Email { get; set; }
+    }
+
+    public class CompanyDetailsModel
+    {
+        [Required]
+        public string Country { get; set; }
+
+        [Required]
+        public string CompanyName { get; set; }
+
+    }
+}

Telerik.Examples.Mvc/Telerik.Examples.Mvc/Views/Shared/_DynamicStepPartial.cshtml

@@ -0,0 +1,43 @@
+@{
+    Layout = "";
+}
+
+@model string
+@{
+    if (Model.Equals("Individual"))
+    {
+        <form id="accountDetailsForm" class="k-form k-form-vertical" data-role="validator" novalidate="novalidate">
+            <div class="k-form-field">
+                <label for="AccountDetails.Username" class="k-form-label">Username:</label>
+                <span class="k-form-field-wrap">
+                    <input type="text" class="k-input k-textbox k-input-solid k-input-md k-rounded-md" name="AccountDetails.Username" id="AccountDetails.Username" required="required" />
+                </span>
+            </div>
+            <div class="k-form-field">
+                <label for="AccountDetails.Email" class="k-form-label">Email:</label>
+                <span class="k-form-field-wrap">
+                    <input type="text" class="k-input k-textbox k-input-solid k-input-md k-rounded-md" name="AccountDetails.Email" id="AccountDetails.Email" required="required" />
+                </span>
+            </div>
+
+        </form>
+
+    }
+    else
+    {
+        <form id="companyDetailsForm" class="k-form k-form-vertical" data-role="validator" novalidate="novalidate">
+            <div class="k-form-field">
+                <label for="CompanyDetails.CompanyName" class="k-form-label">CompanyName:</label>
+                <span class="k-form-field-wrap">
+                    <input type="text" class="k-input k-textbox k-input-solid k-input-md k-rounded-md" name="CompanyDetails.CompanyName" id="CompanyDetails.CompanyName" required="required" />
+                </span>
+            </div>
+            <div class="k-form-field">
+                <label for="CompanyDetails.Country" class="k-form-label">Country:</label>
+                <span class="k-form-field-wrap">
+                    <input type="text" class="k-input k-textbox k-input-solid k-input-md k-rounded-md" name="CompanyDetails.Country" id="CompanyDetails.Country" required="required" />
+                </span>
+            </div>
+        </form>
+    }
+}

Telerik.Examples.Mvc/Telerik.Examples.Mvc/Views/Wizard/DynamicStep.cshtml

@@ -0,0 +1,65 @@
+@{
+    ViewData["Title"] = "WizardDynamicStep";
+}
+
+<h1>@ViewData["Title"]</h1>
+
+@(Html.Kendo().Wizard()
+        .Name("wizard")
+        .Tag("form")
+        .HtmlAttributes(new { @novalidate = "", action = Url.Action("DynamicStep", "DynamicStep"), method = "POST" })
+        .Steps(s =>
+        {
+            s.Add()
+            .Title("First")
+            .Form(f => f
+                .Validatable(v =>
+                {
+                    v.ValidateOnBlur(true);
+                    v.ValidationSummary(vs => vs.Enable(false));
+                })
+                .Items(items =>
+                {
+                    items.Add()
+                        .Field("Type")
+                        .Label(l => l.Text("Is Individual:"))
+                        .Editor(e => e.RadioGroup()
+                                  .Items(items =>
+                                  {
+                                      items.Add().Label("Individual").Value("Individual");
+                                      items.Add().Label("Company").Value("Company");
+                                  })
+                        );
+                })
+            )
+            .Buttons(b =>
+            {
+                b.Next();
+            });
+
+            s.Add().Title("Second").Content("<div id='secondStepContent'></div>").Buttons(b => b.Done());
+
+        })
+        .Events(e => e.Activate("onActivate"))
+
+
+)
+
+<script>
+    function onActivate(e) {
+        var secondStepWrapper = document.getElementById("secondStepContent");
+        if (e.step.options.title == "Second") {
+            var selectedType = $("#Type").data("kendoRadioGroup").value();
+
+            $.ajax({
+                url: "@Url.Action("Load_Step","DynamicStep")",
+                type: "GET",
+                data: { "type": selectedType },
+                success: function(response){
+                    secondStepWrapper.innerHTML = response;
+                }
+            })
+
+        }
+    }
+</script>