How do I bind a DropDownList to a DataSource within an editor template using the scheduler?

Question

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:

editable: {
                template: $("#editor").html()
            },

I'm defining the template like this:

<script id="editor" type="text/x-kendo-template">
<h3>Edit Appointment</h3>
   <p>
       <label>Patient: <input name="title" /></label>
   </p>
   <p>
       <label>Start: <input data-role="datetimepicker" name="start" /></label>
   </p>
</script>

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?

Sample code (does not work):

<p>
    <label>Type: </label><input id="appointmentTypeDropDownList" />
</p>
# 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" } ) ;

The error it gives with the above code is: Uncaught Error: Invalid template:'

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.

Update - The latest simplified version of what I'm trying to do is available at this jsfiddle URL. The goal is simply to bind the dropdown list in the most straightforward way possible. Thanks!

Answer 1

If you move your scheduler DataSource into your viewModel you can use the parenting functionality of a kendo Observable to have the DropDownList bind against the correct DataSource.

var viewModel = new kendo.observable({
    appointmentTypes : new kendo.data.DataSource({
        data: [{
            id: 1,
            text: "Wellness Exam"
        }, {
            id: 2,
            text: "Diagnostic Exam"
        }, {
            id: 3,
            text: "Nail Trim"
        }]
    }),
    schedulerData: [{
        id: 1,
        start: new Date("2014/1/27 08:00 AM"),
        end: new Date("2014/1/27 09:00 AM"),
        title: "Breakfast"
    }]
});

Now when you create the scheduler you just have it use the schedulerData property on the view model, as the DataSource for the scheduler.

$("#scheduler").kendoScheduler({
    ...
    dataSource: viewModel.schedulerData,
    ...
});

The last piece is just changing your DropDownList declaration to use the appointmentTypes property on your view model.

<select id="appointmentTypeDropDownList" data-bind="source:appointmentTypes, value:id" data-text-field="text" data-value-field="id" data-role="dropdownlist" data-autobind="true" />

Since your template will be bound against the Observable objects in the schedulerData DataSource, Kendo will climb the parent tree of the object until it's able to resolve the appointmentTypes property that's on viewModel.

Answer 2

The template throws an error because the selector "#appointmentTypeDropDownList" should be escaped and look like this "\\#appointmentTypeDropDownList" (Kendo UI Documentation).

After you fix this you won't receive template errors but it still doesn't bind the data to the KendoDropDownList. I checked what a KendoUI MVC helper will render in this case and it seems that if your template looks like this, it will work.

<script id="editor" type="text/x-kendo-template">
       <h3>Edit meeting</h3>
       <p>
           <label>Title: <input name="title" /></label>
       </p>
       <p>
           <label>Start: <input data-role="datetimepicker" name="start" /></label>
       </p>
       <p>
           <label>Start: <input data-role="datetimepicker" name="end" /></label>
       </p>

        <p>
            <label>Type: </label><input id="appointmentTypeDropDownList" />

                <script>
                    var dataSource = new kendo.data.DataSource({ transport: { read: { url: "http://demos.kendoui.com/service/products", dataType: "jsonp" } } }); 

                    jQuery(function() { jQuery("\\#appointmentTypeDropDownList").kendoDropDownList({ dataSource: dataSource, dataTextField: "ProductName", dataValueField: "ProductID" } ); });
                 <\/script>
        </p></script>

Answer 3

It's not necessary to put any javascript in the template, you can use Kendo's data-attribute initialization features.

So, your template would look something like:

<label>Type: </label>
<input id="appointmentTypeDropDownList" data-text-field="ProductName" data-value-field="ProductID" data-bind="value:ProductID" data-source="dataSource" data-role="dropdownlist" data-autobind="true" />

Then you would have Javascript outside of your template:

var dataSource = new kendo.data.DataSource({
  transport: { 
    read: { 
      url: "http://demos.kendoui.com/service/products", 
      dataType: "jsonp"
    }
  }
});

As long as dataSource is defined globally, you're good to go. There's more info on data attribute initialization here http://docs.telerik.com/kendo-ui/getting-started/data-attribute-initialization

Edit: just noticed your comment "data will depend on the selected datetime". You could always try re-defining the datasource options in the edit event, which is called prior to displaying the popup editor window. I've not used this scenario, but I don't see why it wouldn't work.