This is a migrated thread and some comments may be shown as answers.
Custom Template not working with knockout
1 Answer 59 Views
This is a migrated thread and some comments may be shown as answers.
Alex
Top achievements
Rank 1
Alex asked on 10 Aug 2015, 10:39 PM

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

 

1 Answer, 1 is accepted

Sort by
0
Accepted
Vladimir Iliev
Telerik team
answered on 12 Aug 2015, 08:04 AM
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. Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Asked by
Alex
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Share this question
or