如何在剑道调度多选中绑定数据源

Question

尝试在 kendo schedular 的自定义视图中连接多选，但它没有显示数据源数据。数据来自服务器并存储在资源中。其他字段显示正常。有人可以帮我解决这个问题吗？

数据源

$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
    });

调度器初始化

    $("#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
            }
        ]
    });

自定义模板内的多选

<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

首先你选择数据源的方式，嗯我不认为它是正确的，改用这种方式：

您需要添加编辑事件，您可以在其中将数据源添加到调度程序上的可编辑模板中。

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());
          }

我已修改kendo dojo 调度程序示例，当您编辑调度程序的事件时，它将使用自定义可编辑模板并添加多选

我还修改了剑道示例并将多选添加到其自定义模板中，

<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>

并修改资源数据

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"}
                            ]
            }

          ],

编辑：关于您的评论“我在您的示例中没有看到在模型中定义的参加者 ID 以及如何获得已选择的参加者。”

假设您要存储数据类型为对象数组的多选， 我已经读到当前剑道模型无法根据kendo forum 处理复杂的数据类型，如对象或数组，因此有关此问题的解决方法请参阅link。您可以将其存储在单独的kendo observable 上，并将可观察对象绑定到添加此kendo.bind(e.container.find("#attendeesId"), viewModel); 的编辑功能上的多选。并查看参数映射，我在其中检索 selectedAttendees 然后将其添加到 option.model 然后继续保存/更新到服务器的过程

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)};
}

我还在这个新的kendo dojo 上修改了我的示例，您可以在其中看到 options.models 的控制台日志现在具有 selectedAttendees 属性。