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 us

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