Error using Multiselect inside Kendo UI Grid?

Question

I want to use a multiselect in my kendo grid. I am following the example as in the jsFiddle demo http://jsfiddle.net/OnaBai/Q2w7z/ in my application as below:

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"

        });

    }

but its showing an error at the line

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

Uncaught TypeError: undefined is not a function

whats the reason?

Answer 1

It is probably how you have weekdays declared in your dataSource

This will throw undefined is not a function

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

But if weekDays is declared as an array it will work.

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

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

Answer 2

The problem was with the template. For new records, weekdays is "". So the join was giving exception, so I changed it to

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

and its working fine