Custom Template not working with knockout

[Alex]

Hi there,

We trying to display a custom event template on my view but doesn't seem to work. I even tried using to custom editor but to no avail.

Please see my code below script:

define([
    'global/session',
    'services/logger'
],
    function (session, logger) {

        var vm = function () {
            var self = this;
            self.title = "All Reservations";
            self.table = null;

            self.session = session;
            self.config = {
                currentTimeMarker: false,
                allDaySlot: false,
                majorTimeHeaderTemplate: kendo.template("<strong>#=kendo.toString(date, 'h')#</strong><sup>00</sup>"),
                date: new Date(),
                startTime: new Date(getDateTime('07', getMonday(new Date()).getDate())),
                endTime: new Date(getDateTime('20', getMonday(new Date()).getDate())),
                mobile: true,
                //height: 700,
                views: [
                    "day",
                    { type: "week", selected: true },
                    //"month",
                    "agenda",
                    //"timeline"
                ],
                majorTick: 1440,
                minorTickCount: 1,
                editable: {
                    window: {
                        title: "My Custom Title",
                        animation: false,
                        template: $("#editor").html()
                        //open: myOpenEventHandler
                    }
                },
                eventTemplate: $("#eventTemplate").html(),
                dataBinding: function (e) {
                    var tables = $(".k-scheduler-times .k-scheduler-table");

                    //Required: remove only last table in dataBound when grouped
                    tables = tables.last();

                    var rows = tables.find("tr");

                    rows.each(function () {
                        $(this).children("th:last").hide();
                    });
                },
                dataSource: {
                    batch: true,
                    transport: {
                        read: {
                            url: "http://demos.telerik.com/kendo-ui/service/meetings",
                            dataType: "jsonp"
                        },
                        update: {
                            url: "http://demos.telerik.com/kendo-ui/service/meetings/update",
                            dataType: "jsonp"
                        },
                        create: {
                            url: "http://demos.telerik.com/kendo-ui/service/meetings/create",
                            dataType: "jsonp"
                        },
                        destroy: {
                            //Delete Meeting
                            url: "http://demos.telerik.com/kendo-ui/service/meetings/destroy",
                            dataType: "jsonp"
                        },
                        parameterMap: function(options, operation) {
                            if (operation !== "read" && options.models) {
                                return {models: kendo.stringify(options.models)};
                            }
                        }
                    },
                    schema: {
                        model: {
                            id: "meetingID",
                            fields: {
                                meetingID: { from: "MeetingID", type: "number" },
                                title: { from: "Title", defaultValue: "No title", validation: { required: true } },
                                start: { type: "date", from: "Start" },
                                end: { type: "date", from: "End" },
                                startTimezone: { from: "StartTimezone" },
                                endTimezone: { from: "EndTimezone" },
                                description: { from: "Description" },
                                recurrenceId: { from: "RecurrenceID" },
                                recurrenceRule: { from: "RecurrenceRule" },
                                recurrenceException: { from: "RecurrenceException" },
                                roomId: { from: "RoomID", nullable: true },
                                attendees: { from: "Attendees", nullable: true },
                                isAllDay: { type: "boolean", from: "IsAllDay" }
                            }
                        }
                    }
                },
                group: {
                    resources: ["Rooms"],
                    orientation: "vertical"
                },
                resources: [
                    {
                        field: "roomId",
                        name: "Rooms",
                        dataSource: [
                            { text: "Meeting Room 101", value: 1 },
                            { text: "Meeting Room 202", value: 2 },
                            { text: "Meeting Room 203", value: 3 },
                            { text: "Meeting Room 204", value: 4 },
                            { text: "Meeting Room 205", value: 5 },
                            { text: "Meeting Room 206", value: 6 },
                            { text: "Meeting Room 207", value: 7 }
                        ],
                        title: "Room"
                    }
                ],
                footer: false
            };

            self.activate = function () {

            };
            self.attached = function () {

            };
            self.deactivate = function () {
            };
        };

        return vm;
    });

 

And my html:

<div class="col-md-12">
    <h2 data-bind="text: title"></h2>
</div>
<div class="col-md-12">
    <div style="margin-bottom: 20px;" data-bind="kendoScheduler: config"></div>

    <!--For the display data-->
    <script id="eventTemplate" type="text/x-kendo-template">
        <div class="movie-template">
            <h3>#: title #</h3>
        </div>
    </script>

    <script id="editor" type="text/x-kendo-template">
        <h3>Edit meeting</h3>
        <p>
            <label>Title: <input data-bind="value: title" /></label>
        </p>
        <p>
            <label>Start: <input data-role="datetimepicker" data-bind="value: start" /></label>
        </p>
        <p>
            <label>End: <input data-role="datetimepicker" data-bind="value: end" /></label>
        </p>
    </script>
</div>

 

Your assistance would highly appreciated.

 Sincerely

 

[Vladimir Iliev]

Hello Alex,

I tried to reproduce the problem locally but to no avail – everything is working as expected on our side. Could you please check the following demo and let us know how it differs from your real setup? This would help us pinpoint the exact reason for this behavior.

• Scheduler: Knockout binding with custom templates

Regards,
Vladimir Iliev
Telerik