kendo ui dropdownlist- How to do manual Cascading?

Question

So im currently trying to adapt some previous code to use with dynamic dropdownlists, the problem seems to be that the cascadeFrom property only takes an id. So i need to use another alternative. Here's my code:

       fieldsDiv.html(dynForms + dynFormFields);

       var appendedForms=fieldsDiv.find(".dynamicForms");
       var appendedFormFields= fieldsDiv.find(".dynamicFormFields");


       debugger;
       $(appendedForms).kendoDropDownList({
           dataTextField: "name",
           dataValueField: "id",
           dataSource: {
               type: "json",
               serverFiltering: true,
               transport: {
                   read: "${pageContext.request.contextPath}" + "/newlayout/mySearchesDynForms.do"
               }

       }});
       $(appendedFormFields).kendoDropDownList({
           dataTextField: "name",
           dataValueField: "id",
           dataSource: {
               type: "json",
               serverFiltering:true,
               transport: {

                   read:{
                       url:"${pageContext.request.contextPath}" + "/newlayout/mySearchesFormFieds.do",
                       data:function(){
                           return {formId:  $(appendedForms).val()
                           };
                       }
                   }
               }
           },
           cascadeFrom:  "appendedFormFields"
       });

How can i use the dom object matching the second dropdownlist for the cascading? I've seen this code:

    function OnChangeOfParentCombo(e){
 var child = $('#ChildCombo').data().kendoComboBox;
 child.enable(true);
 child.dataSource.read({myFilter:this.value()});}

,here, but im not following how do i adapt to my case.

Here's how i think going to be:

 $(appendedForms).kendoDropDownList({
       dataTextField: "name",
       dataValueField: "id",
       dataSource: {
           type: "json",
           serverFiltering: true,
           transport: {
               read: "${pageContext.request.contextPath}" + "/newlayout/mySearchesDynForms.do"
           },
       change:function(){
             var formId = this.val()
             appendedFormFields.val("").data("kendoDropDownList").text("");
             var formFields = $(appendedFormFields).data("kendoDropDownList");
             formFields.dataSource.read({ formId: formId });               
       }
   }});
   $(appendedFormFields).kendoDropDownList({
       dataTextField: "name",
       dataValueField: "id",
       dataSource: {
           type: "json",
           serverFiltering:true,
           transport: {
               read:{
                   url:"${pageContext.request.contextPath}" + "/newlayout/mySearchesFormFieds.do",
                   data:function(){
                       return {formId:  $(appendedForms).val()
                       };
                   }
               }
           }
       }
   });

Does the property formId from the data function from the second dropdownlist (appendedFormFields) needs to match the formFields.dataSource.read({ formId: formId }); from the first one change function?

Answer 1

Add a change event or maybe try an onclose event if it isn't picking up the correct value to "dropdown1"

On that change event get the value of that selected item

var advertiserId = $("#AdvertiserDDL").val();

clear the contents of "dropdown2" and re read the data source

$("#OpportunityDDL").val("").data("kendoDropDownList").text("");

    var opportunity = $("#OpportunityDDL").data("kendoDropDownList");
    opportunity.dataSource.read({ Id: advertiserId });

EDIT:: I think it's cleaner to call a JS function on the change event of the 1st ddl

 $(appendedForms).kendoDropDownList({...

   change:function(){
     YourFunction();
}
     YourFunction() {
         var ddlID = appendedForms.val()
         appendedFormFields.val("").data("kendoDropDownList").text("");
         var formFields = $(appendedFormFields).data("kendoDropDownList");
         formFields.dataSource.read({ formId: ddlID });  
       }

No you can name that property whatever you want, just make sure the property of the data function matches the parameter in the controller. Just to be safe I make .dataSource.read({ formId: ddlID }); different variables

Answer 2

I find that using MVVM and HTML declarative binding is much simpler and looks a lot cleaner. Instead of initializing each Kendo UI control via JavaScript functions, you could harness the power of Kendo's declarative binding. It has its limitations, but the technique covers most use-cases. The power is hidden in data- attributes and the kendo.bind() method.

HTML:

<body>
  <select id="types" 
          data-role="dropdownlist" 
          data-option-label=" " 
          data-text-field="name" 
          data-value-field="id" 
          data-bind="source: types, value: type, events: { change: typeChange }">
  </select>
  <select id="items" 
          data-role="dropdownlist" 
          data-option-label=" " 
          data-bind="enabled: type, source: items, value: item">
  </select>
</body>

JavaScript:

var items = [
  ['Apple', 'Orange', 'Pear'],
  ['Carrot', 'Lettuce', 'Spinach']
];

var vm = kendo.observable({
  type: 0,
  item: '',
  types: [{ id: 1, name: 'Fruits'}, { id: 2, name: 'Vegetables'}],
  items: [],
  typeChange: function(e) {
    var index = e.sender.dataItem().id - 1;
    this.set('items', items[index]);
  }
});

kendo.bind($('body'), vm);

Here is an example of the above code that implements manual cascading drop-down lists in JSBin: click here.