combobox in schedule template

6 posts, 1 answers
  1. Alan Mosley
    Alan Mosley avatar
    200 posts
    Member since:
    Apr 2010

    Posted 25 Aug 2013 Link to this post

    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


  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 27 Aug 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Alan Mosley
    Alan Mosley avatar
    200 posts
    Member since:
    Apr 2010

    Posted 27 Aug 2013 Link to this post

    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>

  5. Answer
    Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 29 Aug 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Alan Mosley
    Alan Mosley avatar
    200 posts
    Member since:
    Apr 2010

    Posted 29 Aug 2013 Link to this post

    Thanks for your reply.
    The example works in chrome but not in IE 10, any ideas?
    Thanks again
  7. Alan Mosley
    Alan Mosley avatar
    200 posts
    Member since:
    Apr 2010

    Posted 29 Aug 2013 Link to this post

    Sorry it seems to work in my project in IE 10, just did not work in jsbin with IE 10
    Thanks
Back to Top
UI for ASP.NET MVC is VS 2017 Ready