kendo ui dropdownlist- How to do manual Cascading?

后端未结

关注

 2  861

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

相关标签:

2条回答

渐次进展

2021-01-15 07:48

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.

0 讨论(0)

终归单人心

2021-01-15 08:01

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

0 讨论(0)