在 Kendo UI Grid 中使用多选时出错？答案

【问题标题】：Error using Multiselect inside Kendo UI Grid?在 Kendo UI Grid 中使用多选时出错？
【发布时间】：2014-07-15 20:44:54
【问题描述】：

我想在我的剑道网格中使用多选。我在我的应用程序中遵循 jsFiddle 演示 http://jsfiddle.net/OnaBai/Q2w7z/ 中的示例，如下所示：

var _weekdays = ["MONDAY", "TUESDAY", "WEDNESDAY", "THURSDAY", "FRIDAY", "SATURDAY", "SUNDAY"];       

    function weekDaysEditor(container, options) {
        $("<select multiple='multiple' data-bind='value : weekDays'/>")
                .appendTo(container)
                .kendoMultiSelect({
                    dataSource: _weekdays
                });
    }

    function DeviceAlarm() {
        var crudServiceBaseUrl = "/Ajax/AjaxHandler.aspx?";
        dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: crudServiceBaseUrl + "requesttype=GetDeviceAlarms&id=xyz",
                    dataType: "json"
                },

                update: {
                    url: crudServiceBaseUrl + "requesttype=UpdateDeviceAlarm",
                    dataType: "json"
                },

                parameterMap: function (options, operation) {
                    if (operation !== "read" && options.models) {
                        return { models: kendo.stringify(options.models) };
                    }
                }
            },
            batch: true,
            pageSize: 20,
            schema: {
                model: {
                    id: "alarmId",
                    fields: {
                        DeviceAlarmKey: { editable: false, nullable: true },
                        fitbitid: { editable: false, nullable: true },
                        DeviceId: { editable: false, nullable: true },
                        alarmId: { editable: false, nullable: true },
                        deleted: { type: "boolean" },
                        enabled: { type: "boolean" },
                        label: { editable: true, nullable: true },
                        recurring: { type: "boolean" },
                        snoozeCount: { editable: true, nullable: true },
                        snoozeLength: { editable: true, nullable: true },
                        syncedToDevice: { editable: false, nullable: true },
                        time: { editable: true, nullable: true },
                        vibe: { editable: true, nullable: true },
                        weekDays: { editable: true, nullable: true }
                    }
                }
            }
        });

        $("#Devices_Figures").kendoGrid({
            dataSource: dataSource,
            pageable: true,
            height: 400,
            toolbar: ["create"],
            columns: [
            {
                field: "time",
                title: "Time",

                width: 100
            },
            {
                field: "deleted",
                title: "Deleted",
                width: 80
            },
            {
                field: "enabled",
                title: "Enabled",
                width: 80
            },

            {
                field: "label",
                title: "Label",
                width: 110
            },
            {
                field: "recurring",
                title: "Recurring",
                width: 80
            },
            {
                field: "snoozeCount",
                title: "Snooze Count",
                width: 110
            },
            {
                field: "snoozeLength",
                title: "Snooze Length",
                width: 110
            },

            {
                field: "vibe",
                title: "vibe",
                width: 100
            },
            {
                field: "weekDays",
                title: "weekDays",
                editor: weekDaysEditor,
                width: 150,
                template: "#= weekDays.join(', ') #"
            },
            { command: ["edit", "destroy"], title: "&nbsp;", width: "200px" }],
            editable: "popup"

        });

    }

但它在该行显示错误

模板：“#= weekDays.join(', ') #”

Uncaught TypeError: undefined is not a function

什么原因？

【问题讨论】：

标签： jquery ajax kendo-ui

【解决方案1】：

这可能是您在数据源中声明工作日的方式

这会抛出 undefined is not a function

var dataSource = [
     { "weekDays": 'Wed'}
];

但如果将 weekDays 声明为数组，它将起作用。

var dataSource = [
     { "weekDays": ['Wed']}
];

http://jsbin.com/yacakema/1/edit?js,output

【讨论】：

【解决方案2】：

问题出在模板上。对于新记录，工作日是“”。所以加入异常，所以我将其更改为

template: "#= weekDays =='' ? '': weekDays.join('; ') #",

它的工作正常

【讨论】：