Scheduler dropdownlist not working with datasource binding

3 posts, 0 answers
  1. Support
    Support avatar
    3 posts
    Member since:
    Aug 2017

    Posted 17 Nov Link to this post

    I have a scheduler code like below, but it is not working although it has rendered a drop-down list but no data inside. Any help?

    <script id="popup_editor" type="text/x-kendo-template">
        <div class="k-edit-form-container">
            <div class="k-edit-label"><label for="Product">Product</label></div>
            <div id="example" class="k-edit-field" data-container-for="ProductID">
                <input data-role="dropdownlist" data-text-field="Name" data-value-field="Id" data-bind="source: arr" />
            </div>
        </div>
    </script>

    @(Html.Kendo().Scheduler<KendoUI.Northwind.Dashboard.Controllers.ScheduleTableViewModel>()
        .Name("scheduler")
        .Editable(editable => editable
            .EditRecurringMode(SchedulerEditRecurringMode.Dialog)
        .TemplateId("popup_editor")
        )
        .Selectable(false)
        .Views(views =>
        {
            views.DayView();
            views.WeekView();
            views.WorkWeekView(workWeekView => workWeekView.Selected(true));
            views.MonthView();
            views.AgendaView();
            views.TimelineView();
        })
        .DataSource(d => d
            .Model(m =>
            {
                m.Id(f => f.RecId);
                m.Field(f => f.Title).DefaultValue("No title");
                m.RecurrenceId(f => f.RecurrenceID);
            })
            .Read(read => read.Action("ScheduleTables_Read", "SchedulerMvc"))
            .Create(create => create.Action("ScheduleTables_Create", "SchedulerMvc"))
            .Update(update => update.Action("ScheduleTables_Update", "SchedulerMvc"))
            .Destroy(destroy => destroy.Action("ScheduleTables_Destroy", "SchedulerMvc"))
        )

    <script>
        var arr = new kendo.data.ObservableArray([
        { Name: "John Doe", Id: 23 },
        { Name: "Jane Doe", Id: 34 }
        ]);

        var viewModel = kendo.observable({
            arr: arr //Temp solution, eventually will bind to a remote datasource
        });

        kendo.bind($("#popup_editor"), viewModel);
    </script>

  2. Support
    Support avatar
    3 posts
    Member since:
    Aug 2017

    Posted 20 Nov Link to this post

    I found the reason, since it is in Edit screen, it should initialize during the edit event for bind method.

    Html.Kendo().Scheduler<KendoUI.Northwind.Dashboard.Controllers.ScheduleTableViewModel>()
        .Name("scheduler")
        .Editable(editable => editable
            .EditRecurringMode(SchedulerEditRecurringMode.Dialog)
        .TemplateId("popup_editor")
        )
        .Selectable(false)
        .Events(e =>
        {
            e.Edit("scheduler_edit");
        })
     
     
    function scheduler_edit(e) {
        kendo.bind($("#example"), viewModel);
    }

     

    Thanks.

  3. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    621 posts

    Posted 21 Nov Link to this post

    Hello,

    Binding the DropDownList on editing is the appropriate approach in the described scenario.

    In case you have any other questions, please do not hesitate to contact us again. 

    Regards,
    Veselin Tsvetanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top