<!DOCTYPE html>
<html>

  <head>
    <link data-require="kendoUI@2013.3.1119" data-semver="2013.3.1119" rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" />
    <link data-require="kendoUI@2013.3.1119" data-semver="2013.3.1119" rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" />
    <script data-require="jquery@2.0.3" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="kendoUI@2013.3.1119" data-semver="2013.3.1119" src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <select id="company"></select>
    <select id="country"></select>
  </body>

</html>

var companyData = {
  "d": [{
    "__type": "ComboObject",
    "Value": "AAA",
    "Text": "ADMIN AAA",
    "ParentId": null
  }, {
    "__type": "ComboObject",
    "Value": "BBB",
    "Text": "ADMIN BBB",
    "ParentId": null
  }, {
    "__type": "ComboObject",
    "Value": "CCC",
    "Text": "ADMIN CCC",
    "ParentId": null
  }, {
    "__type": "ComboObject",
    "Value": "DDD",
    "Text": "ADMIN DDD",
    "ParentId": null
  }]
};

var countryData = {
  "d": [{
    "__type": "ComboObject",
    "Value": "1",
    "Text": "IT - ITALY",
    "ParentId": "BBB"
  }, {
    "__type": "ComboObject",
    "Value": "2",
    "Text": "US - UNITED STATES",
    "ParentId": "BBB"
  }, {
    "__type": "ComboObject",
    "Value": "3",
    "Text": "MX - MEXICO",
    "ParentId": "BBB"
  }, {
    "__type": "ComboObject",
    "Value": "4",
    "Text": "DO - DOMINICAN REPUBLIC",
    "ParentId": "BBB"
  }, {
    "__type": "ComboObject",
    "Value": "5",
    "Text": "BR - BRAZIL",
    "ParentId": "BBB"
  }, {
    "__type": "ComboObject",
    "Value": "6",
    "Text": "CL - CHILE",
    "ParentId": "BBB"
  }, {
    "__type": "ComboObject",
    "Value": "7",
    "Text": "US - UNITED STATES",
    "ParentId": "AAA"
  }, {
    "__type": "ComboObject",
    "Value": "8",
    "Text": "IT - ITALY",
    "ParentId": "AAA"
  }, {
    "__type": "ComboObject",
    "Value": "9",
    "Text": "CL - CHILE",
    "ParentId": "CCC"
  }, {
    "__type": "ComboObject",
    "Value": "10",
    "Text": "US - UNITED STATES",
    "ParentId": "CCC"
  }]
};
$(function() {

  $('#company').kendoDropDownList({
    dataTextField: 'Text',
    dataValueField: 'Value',
    dataSource: {
      data: companyData,
      schema: {
        data: function(response) {
          return response.d || {};
        }
      }
    }
  });

  $('#country').kendoDropDownList({
    dataTextField: 'Text',
    dataValueField: 'Value',
    dataSource: {
      data: countryData,
      schema: {
        data: function(response) {
          return response.d || {};
        }
      }
    },
    cascadeFrom: 'company',
    cascadeFromField: 'ParentId'
  });

});
/* Styles go here */