Kendo cascasding DropDownlists and available dropdown items

I'm using KendoUI to create a cascading dropdownlists. The problem is the second and third dropdowns in the cascade only have 1 of the 3 items that should be in them.

The HTML

<div id="goodies">
        <input id="uno"  data-bind="source: unoTypes, value: uno" />
        <input id="dos"  data-bind="source: dosTypes, value: dos" />
        <input id="tres"  data-bind="source: tresTypes, value: tres" />
</div>

And the javascript

data = window.kendo.observable({
    uno: null,
    dos: null,
    tres: null,
    baseRomType: null,
    unoTypes: [
                { name: "Bing", id: 1 },
                { name: "Bang", id: 2 },
                { name: "Bong", id: 3 }
    ],
    dosTypes: [
              { name: "Ding", id: 1 },
              { name: "Dang", id: 2 },
              { name: "Dong", id: 3 }
    ],
    tresTypes: [
              { name: "Ring", id: 1 },
              { name: "Rang", id: 2 },
              { name: "Rong", id: 3 }
    ],


});

window.kendo.bind($("#goodies"), data);

$('#uno').kendoDropDownList({
    dataTextField: "name",
    dataValueField: "id",
    optionLabel: 'Please Select for Uno'
});

$('#dos').kendoDropDownList({

    dataTextField: "name",
    dataValueField: "id",
    optionLabel: 'Please Select for Dos',
    cascadeFrom: "uno"
});

$('#tres').kendoDropDownList({
    dataTextField: "name",
    dataValueField: "id",
    optionLabel: 'Please Select for Tres',
    cascadeFrom: "dos"
});

See the JS fiddle

Am I doing anything wrong or is this a bug? I'm on KendoUI 2013.Q1 (2013.1.319)

Answers


I know this is an old question, but I just came across it and figured I would provide an answer in case others are having similar issue.

From what I can tell, you don't actually need cascading dropdowns, but instead you just want to enable the next dropdown after the previous one has been selected (as opposed to cascading which would filter the items in the next dropdown based on the option selected in the previous dropdown)?

First, update your HTML to add enabled bindings.

<div id="goodies">
    <input id="uno"  data-bind="source: unoTypes, value: uno" />
    <input id="dos"  data-bind="source: dosTypes, enabled: uno, value: dos" />
    <input id="tres"  data-bind="source: tresTypes, enabled: dos, value: tres" />
</div>

Then, update your javascript to remove the cascadeFrom settings:

$('#dos').kendoDropDownList({
    dataTextField: "name",
    dataValueField: "id",
    optionLabel: 'Please Select for Dos',
    //cascadeFrom: "uno"
});

$('#tres').kendoDropDownList({
    dataTextField: "name",
    dataValueField: "id",
    optionLabel: 'Please Select for Tres',
    //cascadeFrom: "dos"
});

You can see upated jsFiddle here


Need Your Help

C# MVC using multiple atrributes with the OR condition

c# model-view-controller custom-attributes

My goal is to create a validated IP address field that will be validated against an IP address regular express or an dynamic DNS address. So basically if the user enters an valid IP address OR a va...

Random Tab validation

jquery ajax tabs

I can't seem to find any examples that are exactly like what I'm trying to do, even though it would seem like the most common kind of example. I'm using JSP for my backend and hitting the database ...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.