Kendo UI [kendoDropDownList] - OnSelect default selcectbox value, Change other selectbox values dynamically

Question

I am using Kendo UI DropDownList plugin.

I have one main Selectbox and one Sub select box. If I select any option other than -- Select -- option from Main selectbox, I am showing Sub select box container.

If I select Primary 1 from Main selectbox, instead of Default option 1... from sub select box values should replace as

P1 Sub1 P1 Sub2 P1 Sub3

If I select Primary 2, from Main selectbox, sub select box values should replace as

P2 Sub1 P2 Sub2 P2 Sub3

HTML

<select id="mainSelect" class="required">
  <option>-- Select --</option> 
  <option>Primary 1</option> 
  <option>Primary 2</option>
</select>

<div id="ss-container" style="display:none;margin-top:20px;">
  <select id="subSelect">
    <option>Default option 1</option>
    <option>Default option 2</option>
  </select>
</div>

jQuery Code

jQuery("#mainSelect").kendoDropDownList({
  select: function (e) {
    var index = e.item.index();
    if (index == 0) {
      jQuery('#ss-container').hide();
    }
    else if (index == 1) {
      jQuery('#ss-container').show();
    }
    else if (index == 2) {
      jQuery('#ss-container').show();
    }
    else{            
      jQuery('#ss-container').hide();
    }
  }
});
jQuery("#subSelect").kendoDropDownList({});

Any suggestions please?

Online Demo

Answer 1

You have two ways to do this. Either via javascript array, or via loading it from a json source on the backend.

Via a javascript array:

 var dataSourceForPrimary1 = ['P1 S1', 'P1 S2'];
 var dataSourceForPrimary2 = ['P2 S1', 'P2 S2'];
  jQuery("#mainSelect").kendoDropDownList({
    select: function (e) {
      var index = e.item.index();
      if (index == 0) {
        jQuery('#ss-container').hide();
      }
      else if (index == 1) {
        jQuery('#ss-container').show();
        $("#subSelect").kendoDropDownList({dataSource : dataSourceForPrimary1});
      }
      else if (index == 2) {
        jQuery('#ss-container').show();
        $("#subSelect").kendoDropDownList({dataSource : dataSourceForPrimary2});
      }
      else{            
        jQuery('#ss-container').hide();
      }
    }
  }).data("kendoDropDownList");

Or via getting it as a json result:

  var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "http://testService/comboBoxValues",
      dataType: "jsonp",
      data: {comboBoxIndex: index}
    }
  }
});
$("#dropdownlist").kendoDropDownList({
  dataSource: dataSource,
  dataTextField: "ComboBoxName",
  dataValueField: "DropdownListId"
});