feat: add Cascading MultiSelect example

Author: StoyanGoranov

Telerik.Examples.Mvc/Telerik.Examples.Mvc/Controllers/MultiSelect/Cascading_MultiSelectController.cs

@@ -0,0 +1,36 @@
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.Rendering;
+using System;
+using System.Linq;
+
+namespace Telerik.Examples.Mvc.Controllers.MultiSelect
+{
+	public class Cascading_MultiSelectController : Controller
+	{
+		public IActionResult Cascading_MultiSelect()
+		{
+			return View();
+		}
+		public IActionResult ReadParent()
+		{
+			var results = Enumerable.Range(1, 10).Select(i => new SelectListItem
+			{
+				Text = "Super cool item " + i,
+				Value = i.ToString()
+			});
+			return Json(results);
+		}
+
+		public IActionResult ReadChild()
+		{
+			var selectionList = this.Request.Form.ToList().Select(item => (Int32.Parse(item.Value)));
+			var listMax = selectionList.Max(value => value);
+			var results = Enumerable.Range(1, listMax).Select(i => new SelectListItem
+			{
+				Text = "Nice item " + i,
+				Value = i.ToString()
+			});
+			return Json(results);
+		}
+	}
+}

Telerik.Examples.Mvc/Telerik.Examples.Mvc/Views/MultiSelect/Cascading_MultiSelect.cshtml

@@ -0,0 +1,51 @@
+<h4>Parent MultiSelect</h4>
+
+
+@(Html.Kendo().MultiSelect()
+		.Name("parent")
+		.Placeholder("Select ...")
+		.DataTextField("Text")
+		.DataValueField("Value")
+		.DataSource(source =>
+		{
+			source.Read(read => read.Action("ReadParent", "Cascading_MultiSelect"));
+		})
+		.AutoClose(false)
+		.Events(e => e.Change("onChange"))
+)
+
+<br />
+<br />
+<h4>Child MultiSelect</h4>
+
+@(Html.Kendo().MultiSelect()
+		.Name("child")
+		.AutoBind(false)
+		.Enable(false)
+		.Placeholder("Select ...")
+		.DataTextField("Text")
+		.DataValueField("Value")
+		.DataSource(source =>
+		{
+			source.Read(read => read.Action("ReadChild", "Cascading_MultiSelect").Data("parentData").Type(HttpVerbs.Post));
+		})
+)
+
+<script>
+
+	function onChange(e) {
+		var child = $("#child").data("kendoMultiSelect");
+		if (e.sender.value().length > 0) {
+			child.enable(true);
+			child.dataSource.read();
+		} else { 
+			child.enable(false);
+		}
+	}
+	function parentData() {
+		var parent = $("#parent").data("kendoMultiSelect");
+		var value = parent.value();
+		var additionalData = Object.assign({}, value);
+		return additionalData;
+	}
+</script>