Dynamic DropDownList

Populate DDL from server and select item also delivered from server

HTML

<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
id: <input id='id' value="123">

<p>
<button id='load'> Load </button>
</p>
  
<input id="ddl">
  
<div id='log'></div>

JavaScript

$('#load').click (loadDDL);

function loadDDL () {
  var id = $('#id').val();
  
  $.when ( getInitialText( id ) )
  .then ( loadDropDownList )
  .done ( selectInitialText )
  ;
}

function getInitialText (id) {
  log('git id:'+id);
  
  // $.ajax is already a deferred, .when chain will proceeed only after ajax is done or errors
  
  return $.ajax ({
	  url: '/echo/json/',
    data: { json: '{"id":"'+id+'","initialText":"efg"}' },
    type: 'POST'
	})
}

function loadDropDownList(data) {
  log('load id:'+data.id + ',text:' + data.initialText)
  
  var deferred = $.Deferred();
  
  $('#ddl').kendoDropDownList ({
    dataTextField: 'text',
    dataValueField: 'value',
    dataSource : {
      transport : {
        read : {
          url: '/echo/json/',
          data: { json: '{"results":[{"text":"abc","value":"12345"},{"text":"xyfffffz","value":"23456"},{"text":"efg","value":"34567"},{"text":"uvw","value":"45678"}]}' },
          type: 'POST'
        }
      },
      schema : {
        data: "results"
      }
    },
    dataBound: function () { deferred.resolve(data) }  // .then chain will proceed only after this resolution made when DDL data is bound
  })

  return deferred.promise();
}
    
function selectInitialText (data) {
  log('sit:'+data.id + ',text:' + data.initialText)
  
  $('#ddl').data('kendoDropDownList').search(data.initialText);
}

$('#load').click();

function log(data) {
  $('#log').append(data+'</br>');
}