剑道UI网格内联行不更新模板列

Question

我有一个剑道UI网格，设置为使用内联编辑。网格中的一列使用模板和编辑器。当我对该列进行更改并为该行单击Update时，不会调用数据源中的更新。

该列在显示模式下显示以逗号分隔的文本列表，在编辑模式下显示多选择框。

这是我的数据源:

var userDataSource = new kendo.data.DataSource({
        autoSync: true,
        transport: {
            read: {
                url: "@Url.Action("ManagedUsers", "Manage")" + $("#suppliers").val(),
                dataType: "json"
            },
            update: {
                url: "@Url.Action("UpdateUser", "Manage")",
                type: "POST"
            },
            destroy: {
                url: "@Url.Action("DestroyUser", "Manage")",
                type: "POST"
            }
        },
        schema: {
            model: { id: "Id" },
            fields: {
                Id: { editable: false, nullable: true },
                Email: { validation: { required: true } },
                IsAdmin: { type: "boolean" },
                IsManager: { type: "boolean" },
                SupplierRoles: { type: "object" }
            }
        }
    });

和我的网格:

var userGrid = $("#userGrid").kendoGrid({
        columns: [{
            field: "Email",
            width: "35%"
        },
        {
            field: "SupplierRoles",
            title: "Roles",
            template: "#= displayUserSupplierRoles(data.SupplierRoles) #",
            editor: userSupplierRoleMultiSelectEditor,
            filterable: false,
            sortable: false
        },
        {
            field: "IsAdmin",
            title: "Admin",
            hidden: "@{(!Model.User.IsAdmin).ToString().ToLower();}",
            template: "#=IsAdmin ? 'Yes' : 'No' #",
            width: "10%"
        },
        {
            field: "IsManager",
            title: "Manager",
            hidden: "@{(!Model.User.IsManagerForCurrentSupplier).ToString().ToLower();}",
            template: "#=IsManager ? 'Yes' : 'No' #",
            width: "12%"
        },
        { command: ["edit", "destroy"], width: "20%" }],
        dataSource: userDataSource,
        noRecords: true,
        messages: {
            noRecords: "There are no users to manage"
        },
        editable: "inline",
        pageable: {
            pageSize: 10
        },
        sortable: true,
        filterable: true,
        scrollable: true,
        resizable: true
    });

多选择列的编辑器函数定义为:

function userSupplierRoleMultiSelectEditor(container, options) {
        var selectedRoles = [];
        for (var key in options.model.SupplierRoles) {
            if (options.model.SupplierRoles[key].HasRole) {
                selectedRoles.push(options.model.SupplierRoles[key].Id);
            }
        }
        $("<select data-placeholder='Select roles...'></select>")
            .appendTo(container)
            .kendoMultiSelect({
                dataTextField: "Name",
                dataValueField: "Id",
                dataSource: {
                    data: options.model.SupplierRoles,
                    schema: {
                        model: { id: "Id" }
                    }
                }
            }).data("kendoMultiSelect")
            .value(selectedRoles);
    }

根据用户操作填充网格，并在此函数中完成:

function listUserManagedUsers() {
        $.ajax({
            url: "@Url.Action("ManagedUsers", "Manage")" + "?supplierName=" + $("#suppliers").val(),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                $("#userGrid").data("kendoGrid").dataSource.data(data);
            }
        });
    }

为完整起见，我将包括网格的视图模型:

public class ManagedUserViewModel
{
    public string Id { get; set; }
    public string Email { get; set; }
    public bool IsAdmin { get; set; }
    public bool IsManager { get; set; }
    public List<UserSupplierRole> SupplierRoles { get; set; }
}
public class UserSupplierRole
{
    public int Id { get; set; }
    public string Name { get; set; }
    public bool HasRole { get; set; }
}

在编辑模式下，更改电子邮件并单击Update将调用数据源上的Update。更改多选后，按下update不会触发对数据源的更新调用。

谁能告诉我我做错了什么?

谢谢!

Answer 1

OK。所以我知道出了什么问题。

实际上，当我绑定到multiselect小部件时。

下面是新代码:

function userSupplierRoleMultiSelectEditor(container, options) {
        $("<select data-placeholder='Select roles...' multiple='multiple' data-bind='value:SupplierRoles'></select>")
            .appendTo(container)
            .kendoMultiSelect({
                dataTextField: "Name",
                dataValueField: "Id",
                dataSource: {
                    transport: {
                        read: function(op) {
                            var roleCache = localStorage.getItem("roles");
                            if (roleCache != null || roleCache != undefined) {
                                op.success(JSON.parse(roleCache));
                            } else {
                                $.ajax({
                                    url: "@Url.Action("Roles", "Manage")",
                                    contentType: "application/json; charset=utf-8",
                                    dataType: "json",
                                    success: function (data) {
                                        localStorage.setItem("roles", JSON.stringify(data));
                                        op.success(data);
                                    }
                                });
                            }
                        }
                    }
                }
            });
    }

我向select标记添加了data-bind属性，并将其设置为用户拥有的角色。然后，我在数据源中设置读取以获取所有角色。

一旦这两个部分连接起来(稍微改变一下视图模型)，网格将与其状态保持同步。