This is a migrated thread and some comments may be shown as answers.

Different templates for new / existing event

2 Answers 78 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Ferry
Top achievements
Rank 1
Ferry asked on 29 Mar 2017, 11:23 AM

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"
                        }
                    }
                }
            }
        ]
    });

 

2 Answers, 1 is accepted

Sort by
0
Ferry
Top achievements
Rank 1
answered on 29 Mar 2017, 11:33 AM

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.

0
Ivan Danchev
Telerik team
answered on 31 Mar 2017, 09:42 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Scheduler
Asked by
Ferry
Top achievements
Rank 1
Answers by
Ferry
Top achievements
Rank 1
Ivan Danchev
Telerik team
Share this question
or