Question

我正在尝试在页面上使用多个Kendo [MVC] MultiSelect控件，我希望其中一些可以相互依赖。

示例

MultiSelect 1

@(Html.Kendo().MultiSelectFor(m => m.FilterRateCodeGroups)
    .Name("param_Rate_Code_Groups")
    .BindTo(Model.AvailableRateCodeGroups)
    .Filter(FilterType.Contains)
    .HighlightFirst(true)
    .Placeholder("Select Rate Code Groups")
    .Value(new[] {"-1"})
    .Events(evt => evt.Select("onSelectRateCodeGroup")))

MultiSelect 2

@(Html.Kendo().MultiSelectFor(m => m.FilterRateCodes)
    .Name("param_Rate_Details")
    .BindTo(Model.AvailableRateCodes)
    .Filter(FilterType.Contains)
    .HighlightFirst(true)
    .Placeholder("Select Rate Codes")
    .Value(new[] {"-1"}))

我希望MultiSelect 2中显示的选项取决于1.如果需要，我不反对在第二个中使用AJAX绑定。

非常感谢任何指导或示例！

Answer 1

为Kendo UI团队提供了一个示例代码，用于执行级联多个Kendo UI MultiSelect小部件。以下示例演示了如何...

     <!DOCTYPE html>
     <html>
    <head>
        <meta charset="utf-8" />
        <title>Kendo UI Snippet</title>

        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css" />
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css" />
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.silver.min.css" />
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css" />

        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
    </head>
    <body>

        supplier: <select id="suppliers"></select>
        product: <select id="products"></select>
        <script>
            $(function () {
                var productsDataSource = new kendo.data.DataSource({
                    type: "odata",
                    serverFiltering: true,
                    transport: {
                        read: {
                            url: "http://demos.kendoui.com/service/Northwind.svc/Products",
                        },
                        parameterMap: function (data) {
                            return kendo.data.transports.odata.parameterMap.call(this, data);
                        }
                    }
                });

                $("#products").kendoMultiSelect({
                    autoBind: false,
                    dataTextField: "ProductName",
                    dataValueField: "ProductID",
                    dataSource: productsDataSource
                });

                $("#suppliers").kendoMultiSelect({
                    autoBind: false,
                    dataTextField: "CompanyName",
                    dataValueField: "SupplierID",
                    dataSource: {
                        type: "odata",
                        serverFiltering: true,
                        transport: {
                            read: {
                                url: "http://demos.kendoui.com/service/Northwind.svc/Suppliers"
                            }
                        }
                    },
                    change: function () {
                        var filters = buildFilters(this.dataItems());
                        productsDataSource.filter(filters);
                    }
                });

                function buildFilters(dataItems) {
                    var filters = [],
                        length = dataItems.length,
                        idx = 0, dataItem;

                    for (; idx < length; idx++) {
                        dataItem = dataItems[idx];

                        filters.push({
                            field: "SupplierID",
                            operator: "eq",
                            value: parseInt(dataItem.SupplierID)
                        });
                    }

                    return {
                        logic: "or",
                        filters: filters
                    };
                }
            });
        </script>
    </body>
    </html>

Answer 2

这样的事情应该有效：

@(Html.Kendo().MultiSelectFor(m => m.FilterRateCodeGroups)
    .Name("param_Rate_Code_Groups")
    .BindTo(Model.AvailableRateCodeGroups)
    .Filter(FilterType.Contains)
    .HighlightFirst(true)
    .Placeholder("Select Rate Code Groups")
    .Value(new[] {"-1"})
    .Events(evt => evt.Change("onChangeRateCodeGroup")))


function onChangeRateCodeGroup() {
        //modify data source of the other multi select
    };

Kendo MultiSelect级联

2 个答案: