How Do I Use Dropbox in Kendo Scheduler Custom Template?

Question

I am trying to use a custom edit template in my Kendo, MVC (razor) scheduler object. I can produce simple objects in the template, but can't figure out how to add a dropbox and have it populated with data from the controller. I've seen examples of drop boxes driven from service feeds, but I need to populate the list values from the controller/presentation service. Here is what I have so far:

<div id="SchedulerDiv">        
    @(Html.Kendo().Scheduler<TestModel>()
        .Name("TestScheduler")
        .Date(new DateTime(2013, 6, 13))
        .StartTime(new DateTime(2013, 6, 13, 7, 00, 00))
        .Height(600)
         //.AllDayEventTemplateId("UpdateTemplate")
        .Editable(editable=>editable.TemplateId("UpdateTemplate"))
        .Views(views =>
            {
                views.DayView();
                views.WeekView();
                views.MonthView(monthView => monthView.Selected(true));
            })
        .Timezone("Etc/UTC")
        .Resources(resource =>
            {
                resource.Add(m => m.ReasonId)
                        .Title("Reason")
                        .DataTextField("Text")
                        .BindTo(new[] { 
                            new { Text = "It's Broken", Value = 1, Color = "#f8a398" } ,
                            new { Text = "Damaged", Value = 2, Color = "#51a0ed" } ,
                            new { Text = "Got Tired Of It", Value = 3, Color = "#56ca85" }
                        });

            })

        .DataSource(d => d
            .Read("Read", "Scheduler")
            .Create("Create", "Scheduler")
            .Destroy("Destroy", "Scheduler")
            .Update("Update", "Scheduler")

        )

    )

And My Custom Script is:

<script id="UpdateTemplate" 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>
    <select id="myDropDown" type=... /> @*<==  I would like to data drive this from json data from a controller action*@
</p>

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

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

</p>

The above works, but I would like to drive the rowsource from a controller action, vs. a service call. How do I do this? Thanks!

Steven

Answer 1

Update: If I configure the datasource as follows, I am now pulling rows for the drop down list:

                transport: {
                        read: {
                            url: ('@Url.Action("GetValues")'),
                            dataType: "json"
                        }
                    },
                    pageSize: 12
                });

However, I still don't know how to attach the list's selected value to the model.