title: Kendo MVVM Template Dropdown with HTML
body: <p>I have a kendo template in which I am binding a kendo DropDownList.  I am having trouble getting HTML to show in the text of the dropdown.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
      var field = {
          DisplayValue : "Blue",
          OptionListDetails : [
              { Text : "&lt;span style=\"color:#F00\"&gt;Red&lt;/span&gt;", Value : "Red" },
              { Text : "&lt;span style=\"color:#0F0\"&gt;Green&lt;/span&gt;", Value : "Green" },
              { Text : "&lt;span style=\"color:#00F\"&gt;Blue&lt;/span&gt;", Value : "Blue" }
          ]};
    
      var fieldObservable = kendo.observable(field);
      var controlTemplate = kendo.template($("#dropdownTemplate").html());
      var view = new kendo.View(controlTemplate(fieldObservable), { model: fieldObservable, wrap: false });
      view.render($("#renderPlace"));
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="//cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"&gt;&lt;/script&gt;
  &lt;link href="//cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet"/&gt;
  &lt;link href="//cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet"/&gt;
  &lt;script type="text/x-kendo-template" id="dropdownTemplate"&gt;
    &lt;select data-bind="value: DisplayValue, source: OptionListDetails" data-role="dropdownlist" data-text-field="Text" data-value-field="Value" &gt;
    &lt;/select&gt;
  &lt;/script&gt;
  &lt;div id="renderPlace"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there some sort of binding I can pass to get the HTML to work?</p>