Выпадающий список KendoUI зависит от других выпадающих меню с фильтрацией сервера

Для решения этой проблемы требуется:

• Представление MVC с полями ввода (Kendo генерирует раскрывающиеся списки с помощью javascript)
• Логика выпадающего списка JavaScript для KendoUI и привязка данных
• Контроллеры с действиями, предоставляющими данные JSON для раскрывающихся меню.
• Специальные классы для фильтрации данных (фильтр необходим для привязки данных раскрывающегося списка продуктов)

Шаг за шагом:

<сильный>1. Представление MVC

<input id="Category" required="required" name="Category" />
<input id="Language" required="required" name="Language" />
<input id="ProductId" required="required" name="ProductId" />

<сильный>2. Скрипт для представления MVC

<script>
    $(document)
        .ready(function () {
            var categories = $("#Category")
                .kendoDropDownList({
                    autoBind: false,
                    optionLabel: "Select category...",
                    dataTextField: "Name",
                    dataValueField: "Id",
                    dataSource: {
                        type: "json",
                        serverFiltering: true,
                        transport: {
                            read: "@Html.Raw(Url.Action("GetProductCategories", "OfflineLicenses"))"
                    }
                }
            }).data("kendoDropDownList");


            var languages = $("#Language")
                .kendoDropDownList({
                    autoBind:false,
                    optionLabel: "Select language...",
                    dataTextField: "Name",
                    dataValueField: "Id",
                    dataSource: {
                        type: "json",
                        serverFiltering: true,
                        transport: {
                            read: "@Html.Raw(Url.Action("GetProductLanguages", "OfflineLicenses"))"
                        }
                    }
                })
                .data("kendoDropDownList");

            var products = $("#ProductId")
                .kendoDropDownList({
                    autoBind: false,
                    enable: false,
                    optionLabel: "Select product...",
                    dataTextField: "Name",
                    dataValueField: "Sku",
                    dataSource: {
                        type: "json",
                        serverFiltering: true,
                        transport: {
                            read: {
                                url: "@Url.Action("GetProducts", "OfflineLicenses")",
                                dataType: "json",
                                type: "POST",
                                contentType: "application/json; charset=utf-8"
                            },
                            parameterMap: function (options) {
                                return JSON.stringify(options);
                            }
                        }
                    }
                }).data("kendoDropDownList");

                languages.bind("cascade", cascade);
                categories.bind("cascade", cascade);

                function cascade() {
                    if(languages.value() && categories.value()) {
                        products.enable(true);
                        products.dataSource.filter([
                            { field: "Language", operator: "eq", value: languages.value() },
                            { field: "CategoryId", operator: "eq", value: parseInt(categories.value()) },
                        ]);
                    } else {
                        products.value("");
                        products.enable(false);
                    }
                }
        });
</script>

<сильный>3. Методы контроллера

public ActionResult GetProductLanguages()
{
    return Json(Languages.Select(x => new { Id = x.Name, x.Name }).ToList(), JsonRequestBehavior.AllowGet);
}

public ActionResult GetProductCategories()
{
    return Json(Categories.Select(x => new { x.Id, x.Name }).ToList(), JsonRequestBehavior.AllowGet);
}

public ActionResult GetProducts([FromUri]FilterContainer filter = null)
{
// use filter by your own

return Json(Products.OrderBy(x => x.Name)
            .Select(x => new { Sku = x.Sku, x.Name }).ToList(), JsonRequestBehavior.AllowGet);
}

<сильный>4. Классы фильтров кендо

public class SortDescription
{
    public string field { get; set; }
    public string dir { get; set; }
}

public class FilterContainer
{
    public FilterDescription[] filters { get; set; }
    public string logic { get; set; }
}

public class FilterDescription
{
    public string @operator { get; set; }
    public string field { get; set; }
    public string value { get; set; }
}

Не забудьте проверить имена ваших свойств (в этом примере я использую некоторые специальные имена свойств).