Kendo UI Cascading ComboBox:清除父组合框时未禁用子项

时间:2016-03-11 17:19:06

标签: kendo-ui telerik kendo-grid kendo-asp.net-mvc kendo-combobox

我在我们的项目中使用了Kendo UI MVC版本“版本:2016:1.112.545 ”,并且Cascading ComboBox中存在一个错误,可以在 ASP中的Telerik Demos中重现。 NET MVC HTML5 / JavaScript JSP PHP http://demos.telerik.com/kendo-ui/combobox/cascadingcombobox)。

(注意:需要输入ComboBox中的文字

重现的步骤
访问给定的URL 在“类别”组合框中键入字母b,然后选择“饮料” 在Products ComboBox中键入字母c并选择Chai
在Orders ComboBox中键入字母p并选择Portland
现在清除Categories ComboBox中的文本,它将填充所有类别,但不要选择任何类别,只需点击外面
请注意,所有ComboBox中的内容都已清除,但仍然可以访问Orders下拉列表并单击它将填充所有订单。

(注意:我在Chrome和Firefox中查看过,只需单击下拉菜单就不能重现此问题。请按照说明进行操作)

如果有人知道修复或黑客请分享。
(注意:我的许可证已过期,因此没有专门的支持或访问高级论坛帖子)

1 个答案:

答案 0 :(得分:2)

很好听。它在kendo-ui中的错误,您也可以将此错误报告给kendo-UI错误跟踪。

请尝试使用以下代码段。

<!DOCTYPE html>
<html>
<head>
    <title>Jayesh Goyani</title>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.1.112/js/angular.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.1.112/js/jszip.min.js"></script>
    <script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
    <script src="http://rniemeyer.github.io/knockout-kendo/js/knockout-kendo.min.js"></script>
    <style>

    </style>
</head>
<body>

    <input id="categories" />
    <br />
    <br />
    <input id="products" disabled="disabled" />
    <br />
    <br />
    <input id="orders" disabled="disabled" />

    <script>
        $(document).ready(function () {
            var categories = $("#categories").kendoComboBox({
                filter: "contains",
                placeholder: "Select category...",
                dataTextField: "CategoryName",
                dataValueField: "CategoryID",
                dataSource: {
                    type: "odata",
                    serverFiltering: true,
                    transport: {
                        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
                    }
                }
            }).data("kendoComboBox");

            var products = $("#products").kendoComboBox({
                autoBind: false,
                cascadeFrom: "categories",
                filter: "contains",
                placeholder: "Select product...",
                dataTextField: "ProductName",
                dataValueField: "ProductID",

                dataSource: {
                    type: "odata",
                    serverFiltering: true,
                    transport: {
                        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
                    }
                }
            }).data("kendoComboBox");

            var orders = $("#orders").kendoComboBox({
                autoBind: false,
                cascadeFrom: "products",
                filter: "contains",
                placeholder: "Select order...",
                dataTextField: "Order.ShipCity",
                dataValueField: "OrderID",
                dataBound: onDataBound,
                dataSource: {
                    type: "odata",
                    serverFiltering: true,
                    transport: {
                        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Order_Details?$expand=Order"
                    }
                }
            }).data("kendoComboBox");
        });

        function onDataBound(e) {
            if ($("#products").data("kendoComboBox").selectedIndex == -1) {
                $("#orders").data("kendoComboBox").enable(false);
            }
        }

    </script>

</body>
</html>

如果有任何疑虑,请告诉我。