Kendo UI Grid内联行不更新模板列

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

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

这是我的数据源：

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

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

任何人都可以帮助我，我做错了什么？

谢谢！

---

好。 所以我想出了什么问题。

基本上，这是我绑定到多选控件的时候。

这是新的代码：

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

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

一旦这两个部分连接起来（对视图模型稍作修改），网格将保持与其状态保持同步）。

链接地址: http://www.djcxy.com/p/70433.html

上一篇: Kendo UI Grid Inline Row not Updating for Template Columns

下一篇: Kendo Grid UI edited value but not saved