CODEWITHSUNDEEP
kendo-uitelerikkendo-gridkendo-asp.net-mvckendo-combobox
vineel
vineel

Reputation: 3683

Kendo UI Cascading ComboBox: Child not disabled on clearing parent combobox

I am using Kendo UI MVC version "version:2016:1.112.545" in our project and there is a bug in Cascading ComboBox which can be reproduced in Telerik Demos in ASP.NET MVC, HTML5/JavaScript, JSP and PHP (http://demos.telerik.com/kendo-ui/combobox/cascadingcombobox).

(Note: Text in the ComboBox needs to be typed)

Steps to reproduce:
Visit the given URL.
Type letter b in Categories ComboBox and select Beverages
Type letter c in Products ComboBox and select Chai
Type letter p in Orders ComboBox and select Portland
Now clear the text in Categories ComboBox and it will populate all categories, But don't select any of them, just click outside
Notice that content in all the ComboBoxes are cleared, But Orders dropdown is still accessible and clicking on it will populate all the orders.

(Note: I checked it in Chrome and Firefox, Also just clicking on the dropdowns does not reproduce this issue. Please follow the instructions as it is)

If someone knows a fix or hack please share it.
(Note: My license is expired, so don't have dedicated support or access to premium forum thread)

Upvotes: 2

Views: 1374

Answers (1)

Jayesh Goyani
Jayesh Goyani

Reputation: 11154

Nice catch. Its bug in kendo-ui and you can also report this bug into kendo-UI bug tracking.

Please try with the below code snippet. 

<!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>

Let me know if any concern.

Upvotes: 2

Related Questions