Different templates for new / existing event

[Ferry]

Hello,

 

Im triyng to build a schedular that has a different template for an existing event, but also return the standard create event template when it's a new event.

 

var d = new Date();
    d.setHours((d.getHours() - 4), 0, 0, 0);
    $("#scheduler").kendoScheduler({
        date: new Date(),
        startTime: d,
        views: [
            "day",
            { type: "workWeek", selected: true },
            "week",
            "month",
            "agenda",
            { type: "timeline", eventHeight: 50 }
        ],
        editable: {
            template: function (
                if (e.taskId > 0) { // check if new or existing task by e.taskId
                    return $("#contactForm").html();
                }
                return // this is where i want to return the standard template.....
            }
        },
        edit: function (e) {
            var buttonsContainer = e.container.find(".k-edit-buttons");
            var cancelButton = buttonsContainer.find(".k-scheduler-cancel");
            var saveButton = buttonsContainer.find(".k-scheduler-update");
            saveButton.html($("#contactForm .k-buttons .add-button")[0]);
            cancelButton.html($("#contactForm .k-buttons .cancel-button")[0]);

        },
        timezone: "Etc/UTC",
        dataSource: {
            transport: {
                read: {
                    url: "/api/calendar/GetAgendaItems",
                    contentType: "application/json; charset=utf-8",
                    method: "GET",
                    dataType: "json",
                    isASPNETPost: false,
                    data: { EmployeeId: '71' }
                },
                update: {
                    url: "/api/calendar/UpdateAgendaItem",
                    method: "PUT",
                    dataType: "json"
                },
                create: {
                    url: "/api/calendar/CreateAgendaItem",
                    method: "",
                    dataType: "json"
                },
                destroy: {
                    url: "/api/calendar/AgendaItem",
                    method: "DELETE",
                    dataType: "json"
                },
                parameterMap: function (options, operation) {
                    console.log(kendo.stringify(options), operation);

                    if (operation !== "read" && options.models) {
                        return options.models[0];
                        //return kendo.stringify(options);
                    }
                    return options
                }
            },
            schema: {
                model: {
                    id: "taskId",
                    fields: {
                        taskId: { from: "taskID", type: "number" },
                        title: { from: "title", defaultValue: "No title", validation: { required: true } },
                        start: { type: "date", from: "startTime" },
                        end: { type: "date", from: "endTime" },
                        startTimezone: { from: "startTimezone" },
                        endTimezone: { from: "endTimezone" },
                        description: { from: "description" },
                        recurrenceId: { from: "recurrenceID" },
                        recurrenceRule: { from: "recurrenceRule" },
                        recurrenceException: { from: "recurrenceException" },
                        ownerId: { from: "ownerID" },
                        isAllDay: { type: "boolean", from: "isAllDay" }
                    }
                }
            }
        },
        resources: [
            {
                field: "ownerID",
                title: "HomeVisitor",
                dataSource: {
                    transport: {
                        read: {
                            url: "/api/calendar/GetEmployees",
                            method: "GET"
                        }
                    }
                }
            }
        ]
    });

 

[Ferry]

I just stumbled upon this post: http://www.telerik.com/forums/using-scheduler-resources-in-custom-editor 

what i did is the following:

 

created a new template in my html like so:

<script id="customEditorTemplate" type="text/x-kendo-template">
   <div class="k-edit-label"><label for="title">Title</label></div>
   <div data-container-for="title" class="k-edit-field">
       <input type="text" class="k-input k-textbox" name="title" required="required" data-bind="value:title">
     </div>
   <div class="k-edit-label">
       <label for="start">Start</label>
     </div>
   <div data-container-for="start" class="k-edit-field">
       <input type="text"
              data-role="datetimepicker"
              data-interval="15"
              data-type="date"
              data-bind="value:start,invisible:isAllDay"
              name="start"/>
       <input type="text" data-type="date" data-role="datepicker" data-bind="value:start,visible:isAllDay" 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,invisible:isAllDay" 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,visible:isAllDay" 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="isAllDay">All day event</label></div>
   <div data-container-for="isAllDay" class="k-edit-field">
       <input type="checkbox" name="isAllDay" data-type="boolean" data-bind="checked:isAllDay">
     </div>
   <div class="k-edit-label"><label for="recurrenceRule">Repeat</label></div>
   <div data-container-for="recurrenceRule" class="k-edit-field">
       <div data-bind="value:recurrenceRule" name="recurrenceRule" data-role="recurrenceeditor"></div>
     </div>
   <div class="k-edit-label"><label for="description">Description</label></div>
   <div data-container-for="description" class="k-edit-field">
       <textarea name="description" class="k-textbox" data-bind="value:description"></textarea>
     </div>
   <div class="k-edit-label"><label for="ownerId">Owner</label></div>
   <div data-container-for="ownerId" class="k-edit-field">
       <select id="ownerId" data-bind="value:ownerId" data-role="dropdownlist"
                       data-value-field="value" data-text-field="text">

     </select>
     </div>
   </script>

 

Then added this to my code in the edit + editable parameter:

editable: {
            template: function (e) {
                console.log(e);
                if (e.taskId > 0) {
                    return $("#contactForm").html();
                }
                return $("#customEditorTemplate").html();
            }
        },
        edit: function (e) {
            var ownerId = e.container.find("#ownerId").data("kendoDropDownList");
            var recurrenceEditor = e.container.find("[data-role=recurrenceeditor]").data("kendoRecurrenceEditor");

            recurrenceEditor.setOptions({
                start: e.event.start
            });

            //bind the widget to the resouces
            ownerId.dataSource.data(e.sender.resources[0].dataSource.data());

            var buttonsContainer = e.container.find(".k-edit-buttons");
            var cancelButton = buttonsContainer.find(".k-scheduler-cancel");
            var saveButton = buttonsContainer.find(".k-scheduler-update");
            saveButton.html($("#contactForm .k-buttons .add-button")[0]);
            cancelButton.html($("#contactForm .k-buttons .cancel-button")[0]);

        },

 

 

I'm still looking for a way to just return the default kendo template, because this would be way easier + cleaner to my code.

[Ivan Danchev]

Hello,

The problem with setting different templates to the Scheduler, one for editing an existing event and another for new events,  is that the template is initialized prior to the Scheduler's edit event firing. And that is the event in which you can check whether you are adding a new event or editing one. In other words you get the information (needed for setting one of the two templates) about the event in the edit event handler, but by that time the template (if one is set) is already initialized and you cannot set a new one in that handler.

Regards,
Ivan Danchev
Telerik by Progress