title: How do I bind a DropDownList to a DataSource within an editor template using the scheduler?
body: <p>I'm trying to customize my use of the Kendo UI kendoScheduler widget.  I'm specifying a custom template for the editable window that pops up when you go to add/edit an appointment in the scheduler, like so:</p>
  
  <pre><code>editable: {
                  template: $("#editor").html()
              },
  </code></pre>
  
  <p>I'm defining the template like this:</p>
  
  <pre><code>&lt;script id="editor" type="text/x-kendo-template"&gt;
  &lt;h3&gt;Edit Appointment&lt;/h3&gt;
     &lt;p&gt;
         &lt;label&gt;Patient: &lt;input name="title" /&gt;&lt;/label&gt;
     &lt;/p&gt;
     &lt;p&gt;
         &lt;label&gt;Start: &lt;input data-role="datetimepicker" name="start" /&gt;&lt;/label&gt;
     &lt;/p&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>So now I want to add a Kendo UI DropDownList and configure it to populate from a remote datasource.  How do you configure such things within a template?</p>
  
  <p>Sample code (does not work):</p>
  
  <pre><code>&lt;p&gt;
      &lt;label&gt;Type: &lt;/label&gt;&lt;input id="appointmentTypeDropDownList" /&gt;
  &lt;/p&gt;
  # var dataSource = new kendo.data.DataSource({ transport: { read: { url: "http://demos.kendoui.com/service/products", dataType: "jsonp" } } });
  # $("#appointmentTypeDropDownList").kendoDropDownList({ dataSource: dataSource, dataTextField: "ProductName", dataValueField: "ProductID" } ) ;
  </code></pre>
  
  <p>The error it gives with the above code is:
  <strong>Uncaught Error: Invalid template:'</strong></p>
  
  <p>Probably this is just a script encoding issue; I'm more interested in the proper way to place a bound DropDownList inside of a template.</p>
  
  <p>Update - The latest simplified version of what I'm trying to do is available at this <a href="http://jsfiddle.net/AzAe3/2/" rel="nofollow">jsfiddle URL</a>.  The goal is simply to bind the dropdown list in the most straightforward way possible.  Thanks!</p>