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>

 

Any pointers?

[Russell]

This is the JSON returned from the get_rooms service

 

[{"RoomID":1,"SMTPAddress":"[e-mail]","ResourceName":"Benone","ResourceColour":"#6495ED"},{"RoomID":2,"SMTPAddress":"[e-mail]","ResourceName":"Murlough","ResourceColour":"#008B8B"},{"RoomID":3,"SMTPAddress":"[e-mail]","ResourceName":"Tyrella","ResourceColour":"#9932CC"}]

[Petar]

Hi Russell,

Thank you for sharing the definition of the Scheduler and the used template. Based on the provided information I would assume that the issue is related to the MeetingView model but this is only an assumption. 

Can you share the mentioned above model and the Rooms_Create controller?

Regards,

Petar
Progress Telerik

[Russell]

public class MeetingViewModel : ISchedulerEvent
{
    public string MeetingID { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }

    private DateTime start;
    public DateTime Start
    {
        get
        {
            return start;
        }
        set
        {
            start = value.ToUniversalTime();
        }
    }

    public string StartTimezone { get; set; }

    private DateTime end;

    public DateTime End
    {
        get
        {
            return end;
        }
        set
        {
            end = value.ToUniversalTime();
        }
    }

    public string EndTimezone { get; set; }

    public string RecurrenceRule { get; set; }
    public int? RecurrenceID { get; set; }
    public string RecurrenceException { get; set; }
    public bool IsAllDay { get; set; }
    public string Timezone { get; set; }

    public int? RoomID { get; set; }

    public List<string> Attendees { get; set; }

    public Meeting ToEntity()
    {
        var meeting = new Meeting
        {
            MeetingID = MeetingID,
            Title = Title,
            Start = Start,
            StartTimezone = StartTimezone,
            End = End,
            EndTimezone = EndTimezone,
            Description = Description,
            IsAllDay = IsAllDay,
            RecurrenceRule = RecurrenceRule,
            RecurrenceException = RecurrenceException,
            RecurrenceID = RecurrenceID,
            RoomID = RoomID
        };

        return meeting;
    }
}

 

Controller

public ActionResult Index()
{
    return View();
}

public JsonResult Get_Locations()
{
    Dictionary<int, string> locations = this.Service.GetAllMeetingLocations();
    var anon = locations.Select(x => new { dataValueField = x.Key, dataTextField = x.Value }).ToList();

    return Json(anon, JsonRequestBehavior.AllowGet);
}

public JsonResult Rooms_Get([DataSourceRequest] DataSourceRequest request, int locationId)
{
    if (locationId == 0)
        return null;

    List<MeetingResourceDTO> rooms = this.Service.GetMeetingRoomsByLocation(locationId);
    return Json(rooms, JsonRequestBehavior.AllowGet);
}

public JsonResult Rooms_Read([DataSourceRequest] DataSourceRequest request, int locationId)
{
    if (locationId == 0)
        return null;

    List<MeetingViewModel> meetings = this.Service.GetCalendarMeetings(locationId);
    return Json(meetings.ToDataSourceResult(request));
}

public JsonResult Rooms_Create([DataSourceRequest] DataSourceRequest request, MeetingViewModel meeting)
{
    string meetingId = this.Service.CreateCalenderMeeting(meeting);
    return Json(new { MeetingId = meetingId, ResourceId = meeting.RoomID });
}

[Russell]

Should show you this method also:

public List<MeetingResourceDTO> GetMeetingRoomsByLocation(int locationId)
        {
            List<MeetingResourceDTO> rooms = new List<MeetingResourceDTO>();
            rooms = this.CaseMaintenanceService.GetMeetingRoomsByLocation(locationId);

            return rooms;
        }

[Petar]

Hi Russell,

I can't see anything that can be the reason why you don't get the Room ID. 

Attached to my reply you will find a runnable project that demonstrates а Scheduler with fully working CRUD operations. I would suggest comparing the implementation of this project to the implementation of the project you are working on. Take a closer look at the custom template definition. 

Another thing you can try is to check the network request made to the controller and see if the RoomID is actually sent to it. This network request can be observed from the Developer tools -> Network tab in your browser.

Regards,
Petar
Progress Telerik