html - Kendo cascasding DropDownlists and available dropdown items -
i'm using kendoui create cascading dropdownlists. problem second , third dropdowns in cascade have 1 of 3 items should 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 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 uno' }); $('#dos').kendodropdownlist({ datatextfield: "name", datavaluefield: "id", optionlabel: 'please select dos', cascadefrom: "uno" }); $('#tres').kendodropdownlist({ datatextfield: "name", datavaluefield: "id", optionlabel: 'please select tres', cascadefrom: "dos" });
see js fiddle
am doing wrong or bug? i'm on kendoui 2013.q1 (2013.1.319)
i know old question, came across , figured provide answer in case others having similar issue.
from can tell, don't need cascading dropdowns, instead want enable next dropdown after previous 1 has been selected (as opposed cascading filter items in next dropdown based on option selected in previous dropdown)?
first, update html 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 javascript remove cascadefrom settings:
$('#dos').kendodropdownlist({ datatextfield: "name", datavaluefield: "id", optionlabel: 'please select dos', //cascadefrom: "uno" }); $('#tres').kendodropdownlist({ datatextfield: "name", datavaluefield: "id", optionlabel: 'please select tres', //cascadefrom: "dos" });
you can see upated jsfiddle here
Comments
Post a Comment