Question

我已向事件添加了图像属性，并更改了事件模板以在事件中显示图像。请查看demo申请。当我双击事件时，它会打开编辑事件弹出窗口而不会出现问题。但如果我双击空白区域添加新事件，控制台会显示以下错误，事件将消失。

Uncaught ReferenceError: image is not defined

有什么想法吗？

问候，

朱丽兰

Answer 1

为此，您需要定义自定义模板，因为kendo调度程序不支持其他字段而不是资源。

<script type="text/x-kendo-template" id="schedulerTemplate">
    <div class="k-edit-label">
        <label for="Title">Title</label>
    </div>
    <div data-container-for="title" class="k-edit-field">
        <input class="k-textbox" data-bind="value:title" name="Title" type="text" required="required" />
    </div>

    <div class="k-edit-label">
        <label for="Start">Start</label>
    </div>
    <div data-container-for="start" class="k-edit-field">
        <input id="start" name="start" required="required" style="z-index: inherit;" type="datetime"
               data-bind="value:start,invisible:isAllDay"
               data-format="d/M/yyyy h:mm tt"
               data-role="datetimepicker" />

        <input name="start" required="required" type="date" style="z-index: inherit;"
               data-bind="value:start,visible:isAllDay"
               data-format="d/M/yyyy"
               data-role="datepicker" />

        <span data-bind="text: startTimezone"></span>
        <span data-for="start" class="k-invalid-msg"></span>
    </div>

    <div class="k-edit-label">
        <label for="End">End</label>
    </div>
    <div data-container-for="end" class="k-edit-field">

        <input id="end" name="end" required="required" style="z-index: inherit;" type="datetime"
               data-bind="value:end,invisible:isAllDay"
               data-format="d/M/yyyy h:mm tt"
               data-role="datetimepicker" />

        <input name="end" required="required" type="date" style="z-index: inherit;"
               data-bind="value:end,visible:isAllDay"
               data-format="d/M/yyyy"
               data-role="datepicker" />

        <span data-bind="text: endTimezone"></span>
        <span data-for="end" class="k-invalid-msg"></span>
    </div>

    </script>

计划程序初始化

$("#ksheduler").kendoScheduler({
            date: new Date(),
            startTime: new Date("2015/1/1 07:00 AM"),
            dateHeaderTemplate: kendo.template("<strong>#=kendo.toString(date, 'd/M')#</strong>"),
            height: 600,
            views: [
                "day",
                "week",
            ],
            timezone: "Etc/UTC",
            majorTick: 60,
            minorTickCount: 1,
            editable: {
                template: kendo.template($("#schedulerTemplate").html())
            },
            eventTemplate: $("#event-template").html(),
            dataSource: {
                type: "odata-v4",
                batch: false,
                sync: function (e) {
                    var scheduler = $("#ksheduler").data("kendoScheduler");
                    if (scheduler) {
                        scheduler.refresh();
                        scheduler.dataSource.read();
                    }
                },
                transport: {
                    read: {
                        url: "odata/ScheduleOData",
                        dataType: "json",
                        contentType: "application/json; charset=utf-8",
                    },
                    update: {
                        url: "odata/ScheduleOData",
                        type: "Post",
                        dataType: "json",
                        contentType: "application/json; charset=utf-8",
                    },
                    create: {
                        url: "odata/ScheduleOData",
                        type: "Post",
                        dataType: "json",
                        contentType: "application/json; charset=utf-8"
                    },
                    destroy: {
                        url: function (data) {
                            return "odata/ScheduleOData(" + data.Id + ")";
                        },
                        type: "Delete",
                        dataType: "json",
                        contentType: "application/json; charset=utf-8",
                    },
                    parameterMap: function (data, operation) {
                        if (operation == "destroy") {
                            return; // kendo.stringify(data);
                        }
                        var d = kendo.data.transports.odata.parameterMap(data, operation);
                        delete d.$inlinecount; // <-- remove inlinecount parameter    
                        delete d.$callback;
                        return d;
                    }
                },
                schema: {
                    data: function (data) {
                        return data["value"];
                    },
                    total: function (data) {
                        return data['@odata.count'];
                    },
                    model: {
                        id: "taskId",
                        fields: {
                            taskId: { from: "Id", type: "number" },
                            title: { from: "Title", defaultValue: "Interview", validation: { required: true } },
                            start: { type: "date", from: "StartDate" },
                            end: { type: "date", from: "EndDate" },
                            isAllDay: { type: "boolean", from: "IsAllDay", title: "Is all day" },
                        }
                    }
                },
            },
            resources: [
            ],
            edit: function (e) {
                // here is the logic for initialization controls on edit/create
            }
        });

Answer 2

我找到了处理此问题的解决方案，您可以修改模板以检查图像是否存在，然后才显示它：

eventTemplate: "<div class='k-event-template'>#if (data.image) {# <img src='#= image #'>#}# #= title #</div>",

谢谢，

朱丽兰

事件图像中的Kendo UI调度程序错误

2 个答案: