Question

我有一个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; }
}

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

任何人都可以帮我解决我的错误吗？

谢谢！

Answer 1

行。所以我弄清楚出了什么问题。

基本上，当我绑定到多选小部件时。

这是新代码：

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标记，并将其设置为用户拥有的角色。然后我在数据源中设置读取以获取所有角色。

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

Kendo UI网格内联行未更新模板列

1 个答案: