How to bind datasource in kendo schedular multiselect

Question

Trying to connect multiselect in kendo schedular's custom view, but it didnt display data source data. data coming from server & stored inside resources. Other fields displayed ok. Is somebody can help to me with this?

Data Source

$scope.attendeesDS = new kendo.data.DataSource({
        type: "odata",
        transport: {
            read:
            {
                url: "odata/AttendeesOData",
                dataType: "json"
            }
        },
        schema: {
            data: function(data) {
                return data["value"];
            },
            total: function(data) {
                return data["odata.count"];
            },
            model: {
                fields: {
                    value: { from: "Id", type: "number" },
                    text: { from: "text", type: "string" },
                    color: { from: "color", type: "string" }
                }
            }
        },
        serverPaging: true,
        serverSorting: true,
        serverFiltering: true,
        pageSize: 15
    });

Scheduler Initialization

    $("#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",
            { type: "workWeek", selected: true },
            "week",
            "month",
            "agenda",
            { type: "timeline", eventHeight: 50 }
        ],
        timezone: "Etc/UTC",
        editable: {
            template: kendo.template($("#schedulerTemplate").html())
        },
        dataSource: {
            type: "odata-v4",
            batch: false,
            sync: function (e) {
                var scheduler = $("#ksheduler").data("kendoScheduler");
                if (scheduler) {
                    scheduler.refresh();
                    scheduler.dataSource.read();
                }
            },
            transport: {
                //cache: false,
                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",
                    data: function (response) {
                        if (response.Attendees == null) {
                            response.Attendees = [];
                        }
                        if (response.Clients == null) {
                            response.Clients = [];
                        }
                        if (response.Tutees == null) {
                            response.Tutees = [];
                        }
                        if (response.Placements == null) {
                            response.Placements = [];
                        }
                        return response;
                    },
                },
                create: {
                    url: "odata/ScheduleOData",
                    type: "Post",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    data: function (response) {
                        if (response.Attendees == null) {
                            response.Attendees = [];
                        }
                        if (response.Clients == null) {
                            response.Clients = [];
                        }
                        if (response.Tutees == null) {
                            response.Tutees = [];
                        }
                        if (response.Placements == null) {
                            response.Placements = [];
                        }
                        return response;
                    },
                },
                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" },
                        startTimezone: { from: "StartTimezone" },
                        endTimezone: { from: "EndTimezone" },
                        description: { from: "Description" },
                        recurrenceId: { from: "RecurrenceID", defaultValue: 0 },
                        recurrenceRule: { from: "RecurrenceRule" },
                        recurrenceException: { from: "RecurrenceException" },
                        isAllDay: { type: "boolean", from: "IsAllDay" },
                        isInterview: { type: "boolean", from: "IsInterview", title: "Interview", defaultValue: true },
                        isSession: { type: "boolean", from: "IsSession", title: "Session" },
                        attendees: { from: "Attendees", nullable: true },
                        clients: { from: "Clients", nullable: true },
                        tutees: { from: "Tutees", nullable: true },
                        placements: { from: "Placements", nullable: true },
                        ownerId: { from: "OwnerID", defaultValue: 0 },
                        location: { from: "Location" },
                        notes: { from: "Notes" },
                    }
                }
            },
        },
        resources: [
            {
                field: "attendees",
                dataSource: $scope.attendeesDS,
                multiple: true,
                dataTextField: "text",
                dataValueField: "id",
                title: "Tutors",
                nullable: true
            }
        ]
    });

Multiselect inside custom template

<div class="k-edit-label">
    <label for="Attendees">Tutors</label>
</div>
<div data-container-for="Attendees" class="k-edit-field">
    <select id="Attendees" multiple="multiple" name="Attendees"
            data-role="multiselect"
            data-bind="value: attendees"
            data-source="attendees"
            data-text-field="text"
            data-value-field="id"
            data-value-primitive="true"></select>
</div>

Answer 1

First of all the way you select the datasource, hmm i dont think it's correct, use this way instead :

You need to add edit events where you can add the datasource to the editable template on the scheduler.

edit: function(e) {
            debugger;
            var ownerId = e.container.find("#ownerId").data("kendoDropDownList");
            var attendeesId = e.container.find("#attendeesId").data("kendoMultiSelect");
            //bind the widget to the resouces
            ownerId.dataSource.data(e.sender.resources[0].dataSource.data());
            attendeesId.dataSource.data(e.sender.resources[1].dataSource.data());
          }

I have modified kendo dojo sample of scheduler where when you edit the event of the scheduler it will use an custom editable template and add a multiselect

I also modify kendo example and add multiselect to its custom template,

<div data-container-for="attendeesId" class="k-edit-field">
            <select id="attendeesId" data-bind="value:attendeesId" data-role="multiselect" data-value-field="id" data-text-field="name"/>
    </div>

And modify the resources data

resources: [
            {
              field: "ownerId",
              title: "Owner",
              dataSource: [
                { text: "Alex", value: 1, color: "#f8a398" },
                { text: "Bob", value: 2, color: "#51a0ed" },
                { text: "Charlie", value: 3, color: "#56ca85" }
              ]
            },{ 
              field: "attendeesId",
              title: "Attendees",
              dataSource:[
                            {name:"Brown",id:"1"},
                            {name:"Daniel",id:"2"},
                            {name:"John",id:"3"},
                            {name:"Hawk",id:"4"},
                            {name:"Borne",id:"6"},
                            {name:"Deryl",id:"7"},
                            {name:"Jack",id:"8"}
                            ]
            }

          ],

Edit : regarding your comment "I dont see in your example where defined attendeesId in model & how I can get already selected attendees."

Assuming you want to store the multiselect which datatype is array of object, i have read that currently kendo model cant handle complex datatype like object or array according to kendo forum, so the workaround on this refering to this link. You can store it on separate kendo observable and bind the observable object to your multiselect on edit function added this kendo.bind(e.container.find("#attendeesId"), viewModel);. And also take a look at the parameter map where i retrieve the selectedAttendees then add it into option.model then continue the process to Save/Update to the server

if (operation !== "read" && options.models) {
    if(typeof options.models !== "undefined"){
      options.models[0].selectedAttendees = viewModel.selectedAttendees;
      console.log("the models here :",options.models);
    }
    return {models: kendo.stringify(options.models)};
}

I also have modify my example on this new kendo dojo, where you can see that the console log of the options.models now have selectedAttendees attribute.