create (POST) passes empty model

[Andrew]

I am able to load events and they are properly populated on custom edit template. However, both create and update hold empty model objects. Here is code

<h2>CalendarByLab</h2>
<label id="currentRoom">@ViewBag.CurrentRoomIdAsString</label>

<div class="k-widget k-scheduler" id="scheduler"></div>
<script id="customEditorTemplate" type="text/x-kendo-template">

    <div class="k-edit-label"><label for="userId">User Id</label></div>
    <div data-container-for="userId" class="k-edit-field">
        <input type="text" class="k-input k-textbox" readonly name="userId" required="required" />
    </div>
    <div class="k-edit-label">
        <label for="start">Start Date</label>
    </div>
    <div data-container-for="start" class="k-edit-field">
        <input type="text"
               data-role="datetimepicker"
               data-interval="30"
               data-type="date"
               data-bind="value:start"
               name="start" />

        <span data-bind="text: startTimezone"></span>
        <span data-for="start" class="k-invalid-msg" style="display: none;"></span>
    </div>
    <div class="k-edit-label"><label for="end">End</label></div>
    <div data-container-for="end" class="k-edit-field">
        <input type="text" data-type="date" data-role="datetimepicker" data-bind="value:end" name="end" data-datecompare-msg="End date should be greater than or equal to the start date" />
        <input type="text" data-type="date" data-role="datepicker" data-bind="value:end" name="end" data-datecompare-msg="End date should be greater than or equal to the start date" />
        <span data-bind="text: endTimezone"></span>
        <span data-bind="text: startTimezone, invisible: endTimezone"></span>
        <span data-for="end" class="k-invalid-msg" style="display: none;"></span>
    </div>
    <div class="k-edit-label"><label for="durationId">Duration</label></div>
    <div data-container-for="durationId" class="k-edit-field">
        <select id="durationId" data-bind="value:durationId" data-role="dropdownlist"
                data-value-field="value" data-text-field="text">
            <option value="30">30 min</option>
            <option value="60">1 hr</option>
            <option value="90">1:30 hr</option>
            <option value="120" selected>2:00 hrs</option>
        </select>
    </div>
    <div data-container-for="start" class="k-edit-field">
        <label> Members (first and last names) :</label>
    </div>
    <div class="k-edit-label"><label for="member1">Member 1:</label></div>
    <div data-container-for="member1" class="k-edit-field">
        <input type="text" class="k-input k-textbox" name="member1" required="required" data-bind="value:member1">
    </div>
    <div class="k-edit-label"><label for="member2">Member 2:</label></div>
    <div data-container-for="member2" class="k-edit-field">
        <input type="text" class="k-input k-textbox" name="member2" required="required" data-bind="value:member2">
    </div>
    <div class="k-edit-label"><label for="member3">Member 3:</label></div>
    <div data-container-for="member3" class="k-edit-field">
        <input type="text" class="k-input k-textbox" name="member3" data-bind="value:member3">
    </div>
    <div class="k-edit-label"><label for="member4">Member 4:</label></div>
    <div data-container-for="member4" class="k-edit-field">
        <input type="text" class="k-input k-textbox" name="member4" data-bind="value:member4">
    </div>
</script>
<script id="event-template" type="text/x-kendo-template">
   
        <p>
            #: kendo.toString(start, "hh:mm") # - #: kendo.toString(end, "hh:mm") #
        </p>
        <p>#: groupList #</p>
        <p>#: userId #</p>
   
</script>
<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);

            var scheduler = $("#scheduler").data("kendoScheduler");
            scheduler.one("dataBinding", function (e) {
                //prevent saving if server error is thrown
                e.preventDefault();
            })
        }
    }
</script>
<script>

    $(function ()
    {
        $("#scheduler").kendoScheduler(
        {
            messages: {
                editor: {
                    editorTitle: "Reserve"
                }
            },
            allDaySlot: false,
            height: 600,
            date: new Date("2018/3/1"),
            startTime: new Date("2018/3/1 07:00 AM"),

            editable: {
                template: kendo.template($('#customEditorTemplate').html())
            },
            eventTemplate: $("#event-template").html(),
            views: [
                {
                    type: "day"
                }
            ],
            timezone: "Etc/UTC",
            group: {
                resources: ["Rooms"]
            },
            resources: [{
                dataSource: {
                    transport: {
                        read: {
                            url: "/Calendar/RemoteDataSource_GetRoom?RoomId=" + $('#currentRoom').text(),
                            dataType: "json",
                            contentType: "application/json; charset=utf-8"
                        }
                    }
                },
                name: "Rooms",
                title: "Room",
                field: "RoomId",
                dataTextField: "RoomNumber",
                dataValueField: "RoomId"
            }],
            dataSource:
            {            
                batch: true,
                transport: {
                    read: {
                        url: "/Calendar/Tasks_Read?RoomIdAsString=" + $('#currentRoom').text(),
                        dataType: "json",
                        contentType: "application/json; charset=utf-8"

                    },
                   update: {
                        url: "@Url.Action("Tasks_Update", "Calendar")",
                        dataType: "json",
                        contentType: "application/json; charset=utf-8",
                        type: "POST"
                    },
                    create: {
                        url: "@Url.Action("Tasks_Create", "Calendar")",
                        dataType: "json",
                        contentType: "application/json; charset=utf-8",
                        type: "POST"
                    },
                    destroy: {
                        url: "/Calendar/Tasks_Destroy",
                        dataType: "json",
                        contentType: "application/json; charset=utf-8"
                    },

                parameterMap: function (options, operation) {
                        if (operation === "read") {
                            var scheduler = $("#scheduler").data("kendoScheduler");

                            var result = {
                                start: scheduler.view().startDate(),
                                end: scheduler.view().endDate()
                            }

                            return kendo.stringify(result);
                        }

                        return kendo.stringify(options);
                    }
                },
                error: error_handler,
                schema:
                {
                    model:
                    {
                        id: "taskId",

                        fields:
                        {
                            taskId: { from: "TaskId" },
                            groupList: { from: "GroupList", defaultValue: "No members" },
                            start: { from: "Start", type:"date" },
                            end: { from: "End", type: "date" },

                            RoomId: { from: "RoomId", nullable: true },
                            userId: { from: "UserId", defaultValue: '222', type: "string" },
                            member1: { from: "Member1", defaultValue: '', type: "string" },
                            member2: { from: "Member2", defaultValue: '', type: "string" },
                            member3: { from: "Member3", defaultValue: '', type: "string" },
                            member4: { from: "Member4", defaultValue: '', type: "string" },
                            durationId: { from: "Duration", defaultValue: '120' }

                        }
                    }
                }
            }
        });
    });
</script>

Model class

namespace WebMVC.Models
{
    public class EventModel
    {
        public string TaskId { get; set; }
        public string RoomId { get; set; }
        public string GroupList { get; set; }
        
        public string Member1 { get; set; }
        public string Member2 { get; set; }
        public string Member3 { get; set; }
        public string Member4 { get; set; }

        public string Duration { get; set; }

        public string UserId { get; set; }

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

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

Controller

 

 public virtual JsonResult Tasks_Create([DataSourceRequest]DataSourceRequest request, EventModel task)
        {
            if (ModelState.IsValid)
            {
                var entity = new Booking()
                {
                    BookingId = new Guid(task.TaskId)
                };
            
            }
            return Json(new[] { task }.ToDataSourceResult(request, ModelState));

}

 

 

[Veselin Tsvetanov]

Hello Andrew,

As far as I can see you are setting the batch option of the Scheduler DataSource to true. This means, that the widget would send a collection of events to the server for create and for update. Therefore, you will need to accept that collection as a parameter in the action method:

public virtual JsonResult Tasks_Create([DataSourceRequest]DataSourceRequest request, IEnumerable<EventModel> models)
{

Also, the parameter map function should be altered as shown on the Scheduler index demo:

parameterMap: function (options, operation) {
    if (operation === "read") {
        var scheduler = $("#scheduler").data("kendoScheduler");

        var result = {
            start: scheduler.view().startDate(),
            end: scheduler.view().endDate()
        }

        return kendo.stringify(result);
    }

    return { models: kendo.stringify(options.models) };
}

I hope, that the above helps you. If you still face any issues with the above, I would suggest you to prepare and send us an isolated fully runnable sample project demonstrating the problem. This way we will be able to troubleshoot it locally and to provide you with the most appropriate assistance for this case.

Regards,
Veselin Tsvetanov
Progress Telerik