Custom Template with Databound Resources

[Russell]

Hi guys

I've been having some problems with kendo scheduler passing the data from the create new meeting moal popup to the controller.  I have an MVC solution where the user should select a location, my control will call off to the server to get a list of resources for that location.  All working as expected except that my custom template for the modal popup won't pass the RoomID to the controller to create a new meeting room.

 

Here is some of my code.

Razor MVC

@(Html.Kendo().Scheduler<MeetingViewModel>()
                                .Name("scheduler")
                                .Date(startOfWeek)
                                .StartTime(startOfWeek.AddHours(8))
                                .EndTime(startOfWeek.AddHours(18))
                                .Height(670)
                                .AllDaySlot(false)
                                .Editable(e => e.TemplateId("customTemplate").Destroy(false).Create(true).Move(false).Resize(false).Update(false))
                                //.Editable(e => e.Destroy(false).Create(true).Move(false).Resize(false))
                                .Events(e =>
                                {
                                    e.Save("scheduler_save");
                                })
                                .Views(views =>
                                {
                                    views.DayView(x => x.DateHeaderTemplate("<span class='k-link k-nav-day'>#=kendo.toString(date, 'dd/MM')#</span>"));
                                    views.WeekView(weekView => weekView.Selected(true).DateHeaderTemplate("<span class='k-link k-nav-day'>#=kendo.toString(date, 'dd/MM')#</span>"));
                                })
                                .Timezone("Etc/GMT")
                                .Resources(resource =>
                                {
                                    resource.Add(m => m.RoomID)
                                    .Title("Room")
                                    .DataTextField("ResourceName")
                                    .DataValueField("RoomID")
                                    .DataColorField("ResourceColour")
                                    .Multiple(false)
                                    .DataSource(x => x.Read(s => s.Data("GetRoomFromDropdown").Action("Rooms_Get", "ExchangeCalendar", new { Area = string.Empty })));
                                })
                .DataSource(d => d
                .Events(x => x.RequestEnd("check_response"))
                    .Model(m =>
                    {
                        m.Id(f => f.MeetingID);
                        m.Field(f => f.Title).DefaultValue("No title");
                        m.RecurrenceId(f => f.RecurrenceID);
                        m.Field(f => f.Title).DefaultValue("No title");
                    })
                .Read(x => x.Data("GetRoomFromDropdown").Action("Rooms_Read", "ExchangeCalendar", new { Area = string.Empty }))
                .Create("Rooms_Create", "ExchangeCalendar", new { Area = string.Empty })
                )
)

 

CustomTemplate

@*TEMPLATE FOR MODAL POPUP*@
<script id="customTemplate" type="text/x-kendo-template">
    <div class="k-edit-label">
        <label for="title">Title</label>
    </div>

    <div class="k-edit-field" data-container-for="title">
        <input type="text" class="k-input k-textbox" name="title" data-bind="value: title" />
    </div>

    <div class="k-edit-label">
        <label for="start">Start</label>
    </div>
    <div class="k-edit-field" data-container-for="start">
        <span style="display: none;" class="k-widget k-datetimepicker k-header">
            <span class="k-picker-wrap k-state-default">
                <input type="text" data-bind="value: start, invisible: isAllDay" data-role="datetimepicker" data-type="date" required="" name="start" data-timezone="Etc/UTC" style="width: 100%;" class="k-input" role="textbox" aria-haspopup="true" aria-expanded="false" aria-disabled="false" aria-readonly="false" aria-label="Current focused date is 6/10/2013 12:00:00 AM"><span class="k-select" unselectable="on"><span class="k-icon k-i-calendar" unselectable="on" role="button">select</span><span class="k-icon k-i-clock" unselectable="on" role="button">select</span></span>
            </span>
        </span><span style="" class="k-widget k-datepicker k-header"><span class="k-picker-wrap k-state-default"><input type="text" data-bind="value: start, visible: isAllDay" data-role="datepicker" data-type="date" required="" name="start" data-timezone="Etc/UTC" style="width: 100%;" class="k-input" role="textbox" aria-haspopup="true" aria-expanded="false" aria-disabled="false" aria-readonly="false" aria-label="Current focused date is Monday, June 10, 2013"><span class="k-select" unselectable="on" role="button"><span class="k-icon k-i-calendar" unselectable="on">select</span></span></span></span><span data-bind="    text: startTimezone"></span><span class="k-invalid-msg" data-for="start" style="display: none;"></span>
    </div>

    <div class="k-edit-label">
        <label for="end">End</label>
    </div>
    <div class="k-edit-field" data-container-for="end">
        <span style="display: none;" class="k-widget k-datetimepicker k-header">
            <span class="k-picker-wrap k-state-default">
                <input type="text" data-bind="value: end, invisible: isAllDay" data-role="datetimepicker" data-type="date" required="" name="end" data-timezone="Etc/UTC" style="width: 100%;" class="k-input" role="textbox" aria-haspopup="true" aria-expanded="false" aria-disabled="false" aria-readonly="false" aria-label="Current focused date is 6/10/2013 12:00:00 AM"><span class="k-select" unselectable="on"><span class="k-icon k-i-calendar" unselectable="on" role="button">select</span><span class="k-icon k-i-clock" unselectable="on" role="button">select</span></span>
            </span>
        </span><span style="" class="k-widget k-datepicker k-header"><span class="k-picker-wrap k-state-default"><input type="text" data-bind="value: end, visible: isAllDay" data-role="datepicker" data-type="date" required="" name="end" data-timezone="Etc/UTC" style="width: 100%;" class="k-input" role="textbox" aria-haspopup="true" aria-expanded="false" aria-disabled="false" aria-readonly="false" aria-label="Current focused date is Monday, June 10, 2013"><span class="k-select" unselectable="on" role="button"><span class="k-icon k-i-calendar" unselectable="on">select</span></span></span></span><span data-bind="    text: endTimezone"></span><span class="k-invalid-msg" data-for="end" style="display: none;"></span>
    </div>

    <div class="k-edit-label">
        <label for="roomID">Room</label>
    </div>

    <div data-container-for="RoomID" class="k-edit-field" id="resourcesContainer"></div>

        <script>
                jQuery(function () {
                    var container = jQuery("\#resourcesContainer");
                    var resources = jQuery("\#scheduler").data("kendoScheduler").resources;

                    console.log(resources[0].dataSource._data);

                    jQuery(kendo.format('<select data-bind="value: {0}" name="{0}">', resources[0].field))
                        .appendTo(container)
                        .kendoDropDownList({
                            dataTextField: resources[0].dataTextField,
                            dataValueField: resources[0].dataValueField,
                            dataSource: resources[0].dataSource,
                            valuePrimitive: resources[0].valuePrimitive,
                            optionLabel: "N1one",
                            template: kendo.format('<span class="k-scheduler-mark" style="background-color:\#= data.{0}?{0}:"none" \#"></span>\#={1}\#', resources[0].dataColorField, resources[0].dataTextField)
                        });
                })
            <\/script>
</script>

 

The Title, StartDate, EndDate are all coming through as the correct values but the RoomID is coming through NULL.

When I create a simple select like is passes the value correctly 

<select name="RoomID" data-bind="value:RoomID">
            <option value="2">Yo</option>
            <option value="4">Blah</option>
            <option value="6">Blah</option>
        </select>

 

 

[Petar]

Hi Russell,

As this ticket is a duplicate of this one, I will close the current thread.

Let's continue the discussion in the linked thread as the provided code is related to UI for ASP.NET MVC, not to Kendo UI for jQuery. 

Regards,
Petar
Progress Telerik