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

Question

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)

i was not able to reproduce this. Works as expected, Tested with Google Chrome — Daniel, Mar 11 '16 at 19:59
Thanks for looking into it Daniel. 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, Follow the instructions as it is to reproduce) — vineel, Mar 11 '16 at 23:53
Funny thing: Goto: http://demos.telerik.com/kendo-ui/combobox/cascadingcombobox Click on ´Edit this sample`. Try it in Kendo Dojo - works. Maybe this is a bug on their website? — Daniel, Mar 12 '16 at 00:04
I see the same issue happening in "http://dojo.telerik.com/". I tried that before posting in stackoverflow. — vineel, Mar 12 '16 at 00:07
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/106063/discussion-between-vineel-and-daniel). — vineel, Mar 12 '16 at 00:15

score 2 · Accepted Answer · answered Mar 14 '16 at 12:45

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.

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

1 Answers1