title: Kendo DropDownList first item remains selected after user chooses second item
body: <p>I have a project where I am using a Kendo DropDownList in the MVVM paradigm.  The dropdownlist sources its data from a JavaScript array in the viewmodel and its value is bound to a property in the same viewmodel. </p>
  
  <p>The problem is the dropdownlist always remains on the first item.  I can choose "inactive" (the second item) and it updates viewModel.data.IsActive to "true" but the first "Active" item remains selected in the dropdown.  </p>
  
  <p>If you change the initial viewModel.data.IsActive to false, then upon load the second "Inactive" item is selected in the dropdown.  But once I change it to "Active", it's stuck there, I can't get back to "Inactive"</p>
  
  <p>What is wrong with this code?  Am I missing something simple?</p>
  
  <p>Thanks,
  Rod Early</p>
  
  <p>The viewmodel:</p>
  
  <pre><code>var viewModel = {};
  viewModel.data = {};
  viewModel.data.IsActive = true;
  viewModel.lookupData = {};
  viewModel.lookupData.status = [{
      value: true,
      text: "Active"
  }, {
      value: false,
      text: "Inactive"
  }];
  </code></pre>
  
  <p>The html:</p>
  
  <pre><code>&lt;div class="container"&gt;
          &lt;div style="margin: 10px 0 20px 20px"&gt;
            &lt;span style="display:inline"&gt;Selected data&lt;/span&gt;
            &lt;span data-bind="text: data.IsActive"&gt;none provided&lt;/span&gt;
          &lt;/div&gt;
     &lt;select id="theDropdown" data-role="dropdownlist" data-bind="source: lookupData.status, value: data.IsActive" data-text-field="text" data-value-field="value" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the binding:</p>
  
  <pre><code>kendo.bind($(".container"), kendo.observable(viewModel));
  </code></pre>
  
  <p>This is all implemented in a jsfiddle <a href="http://jsfiddle.net/rodearly/RTD4m/3/" rel="nofollow">http://jsfiddle.net/rodearly/RTD4m/3/</a></p>
  
  <p>Thanks!
  Rod</p>