combobox in schedule template

[Alan Mosley]

Using the editable template I want to have a drop down for my resources, so far I have

<div class="k-edit-field" data-container-for="TeamId">
    <input data-role="combobox" data-bind="value: TeamId" />
</div>

This gives me the value, but not the list, how do I get the list ?
 thanks

[Alexander Popov]

Hello Alan,


You should also bind the DataSource - when using data attribute initialization it is done as shown below:

<div class="k-edit-field" data-container-for="TeamId">
    <input data-role="combobox" data-bind="value: TeamId" data-bind="source: yourDataSource" />
</div>

Also if the above solution doesn't work for you - please provide runable project where the issue is reproduced. 

Additional information on source binding in MVVM can be found here.

Regards,
Alexander Popov
Telerik

[Alan Mosley]

Before I create a sample project with a schedule, can you explain what I should include as yourdatasource.
I am using MVC wrappers. and my resources are coming from the server. I tried binding to a kendo observable viewmodel but that did not seem to work.
see my schedule and my template below.
Thanks

@code
    Dim s As Kendo.Mvc.UI.Scheduler(Of BO.Models.Bookings.BookingEvent) = Html.Kendo().Scheduler(Of BO.Models.Bookings.BookingEvent)() _
    .Name("scheduler") _
    .Date(Date.Today) _
    .StartTime(Date.Today.AddHours(7)) _
    .Height(600) _
    .Timezone("Etc/UTC") _
    .Editable(Function(e) e.TemplateId("ScheduleEditTemplate")) _
    .Resources(Function(resource) resource.Add(Function(m) m.TeamId) _
                                           .Title("Owner") _
                                           .DataTextField("Name") _
                                           .DataValueField("TeamId") _
                                            .DataColorField("Color") _
                                           .DataSource(Function(d) d.Read("resouces", "services", New With {.area = String.Empty}))) _
    .Views(Sub(views)
                   views.DayView()
                   views.WeekView(Function(weekView) weekView.Selected(True))
                   views.MonthView()
                   views.AgendaView()
           End Sub) _
    .DataSource(Function(d) d.Model(Sub(m)
                                            m.Id(Function(f) f.BookingId)
                                    End Sub) _
    .Read("read", "services") _
    .Create("create", "services") _
    .Destroy("destroy", "services") _
    .Update("update", "services"))

    s.Render()

End Code

<script id="ScheduleEditTemplate" type="text/x-kendo-template">
    <section class="schedule-template row-fluid">


        <p class="span12">
            <span>${Address}</span>
        </p>
        <p class="span12">
            <label>Start: <input data-role="datetimepicker" data-bind="value: start" /></label>
        </p>
        <p class="span12" data-container-for="TeamId">
            <label>
                Team:
                <select id="teams" data-role="combobox" data-bind="value: TeamId" data-bind="source: yourdatasouce" />
            </label>
        </p>
        <p class="span12">
            <label>Notes: <textarea data-bind="value: notes" /></label>
        </p>
        <p>
            <input type="checkbox" value="${Completed}" /><button data-schedule-edit-booking-complete="${BookingId}">Mark complete</button>
        </p>
    </section>

</script>

[Alexander Popov]

Hi Alan,

I apologize for misleading you. Obtaining the DataSource for this ComboBox from the EditorTemplate is a complicated task. A simpler approach would be to open a script tag in your template and initialize a ComboBox or DropDownList widget using the Scheduler's resources as a DataSource. For convenience I prepared a small example demonstrating how to populate a DropDownList in a custom EditorTemplate.


Regards,
Alexander Popov
Telerik

[Alan Mosley]

Thanks for your reply.
The example works in chrome but not in IE 10, any ideas?
Thanks again

[Alan Mosley]

Sorry it seems to work in my project in IE 10, just did not work in jsbin with IE 10
Thanks