title: kendoMultiSelect: allow to enter values in addition to selecting from the dropdown list
body: <p>I'm trying to implement with kendoMultiSelect something similar to <a href="http://xoxco.com/projects/code/tagsinput/" rel="nofollow">this</a> jQuery plugin. </p>
  
  <p>The user may either select a value from the dropdown list, or enter a new value. If the new value is entered, the multiselect will display it as if it were selected from the list (same look and feel).</p>
  
  <p>My attempt to implement this is <a href="http://jsfiddle.net/ps0604/kQ5Sm/21/" rel="nofollow">in this jsfiddle</a>. First, I allow the user to enter a new value (hitting the enter key), then I add it to the data source and finally I add it to the selected values. The problem is that the multiselect object is behaving strangely: if you first select a value, and then enter a new value, the previous selected values disappear. If you play with it selecting and entering values you'll see additional strange behavior.</p>
  
  <p>This is the HTML:</p>
  
  <pre><code>&lt;select id="seltags" /&gt;
  </code></pre>
  
  <p>and this is the Javascript:</p>
  
  <pre><code>var data = [
      { text: "Africa" },
      { text: "Europe" },
      { text: "Asia" },
      { text: "Australia" }
  ];
  
  multi = $("#seltags").kendoMultiSelect({
      dataTextField: "text",
      dataValueField: "text",
      placeholder: "Select or enter tags",
      dataSource: data
  }).data("kendoMultiSelect");
  
  
  $('.k-input').keydown ( function(e) {
      var code = e.keyCode || e.which;
      if (code == 13) {  // user pressed enter
          var entered = $('.k-input').val();
          multi.dataSource.add({ text: entered });
          var selected = multi.value();
          console.log("before: "+selected);
          selected.push(entered);
          console.log("after: "+selected);
          multi.value(selected);
      }
  });
  </code></pre>
  
  <p>Any ideas?</p>