title: kendo ui dropdownlist- How to do manual Cascading?
body: <p>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:</p>
  
  <pre><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"
         });
  </code></pre>
  
  <p>How can i use the dom object matching the second dropdownlist for the cascading?
  I've seen this code:</p>
  
  <pre><code>    function OnChangeOfParentCombo(e){
   var child = $('#ChildCombo').data().kendoComboBox;
   child.enable(true);
   child.dataSource.read({myFilter:this.value()});}
  </code></pre>
  
  <p>,<a href="https://stackoverflow.com/a/13848727/382115">here</a>, but im not following how do i adapt to my case.</p>
  
  <p>Here's how i think going to be:</p>
  
  <pre><code> $(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()
                         };
                     }
                 }
             }
         }
     });
  </code></pre>
  
  <p>Does the property formId from the data function from the second dropdownlist (appendedFormFields) needs to match the <code>formFields.dataSource.read({ formId: formId });  from the first one change function?</code></p>