Kendo 网格内联多选 - 发布值

Question

我正在复制与此处所见非常接近的功能。 https://onabai.wordpress.com/2013/07/17/kendoui-multiselect-in-a-grid-yes-we-can/

我有 Kendo 带有内联多选编辑器字段的网格。我有一个 datasource.sync() 事件在更改该多选时启动。我遇到的问题是数据在 post 变量中的排列方式。

我在 FireFox 中使用 FireBug。我可以像这样在 sync() 事件中设置一个函数来查看我的多选字段中的值。

console.log(this.value());

这将用于我称为 "RoleCode" 的字符串数组字段。无论如何，控制台日志会显示应有的值，例如

A, OU

但是，当我查看对我的控制器的 Post 调用和参数时，我发现 RoleCode 字段是重复的，这就是我的控制器无法识别方法签名的原因。例如，这是我在 FireBug...

中看到的

ID  123
Field1  TextFromField1
RoleCode[1][RoleCode]  OU
RoleCode[]  A

知道我应该如何设置它以便 post 参数可用吗？

更新

现在我只是更改了更新函数以将多选值作为逗号分隔的字符串发送。我可以在控制器中处理它们。我不太喜欢这个设置，但在我找到如何正确发送 posted 值之前，这就是我要做的。

    update: {
            url: "Home/GridUpdate",
            type: "POST",
            dataType: "json",
            data: function () {
                //Grid does not post multiselect array correctly, need to convert to a string
                var rolesString = $("#gridRoleList").data("kendoMultiSelect").value().toString();
                return { rolesString: rolesString };
            },
            complete: function (e) {
                setTimeout(function () {
                    refreshGrid();
                }, 300);
            },
            success: function (result) {
                // notify the data source that the request succeeded
                options.success(result);
            },
            error: function (result) {
                // notify the data source that the request failed
                options.error(result);
            }
        },

更新 2

实际上这不是一个好主意，因为如果我在网格中编辑另一个字段，我会收到一个 js 错误，因为找不到多选。

Answer 1

看起来你的问题可以通过序列化后发送数据来解决

读取操作 - 使用 MVC 包装器

.Create(create => create.Action("Create", "Home").Data("serialize"))

JS代码

<script type="text/javascript">

function serialize(data) {
    debugger;
    for (var property in data) {
        if ($.isArray(data[property])) {
            serializeArray(property, data[property], data);
        }
    }
}

function serializeArray(prefix, array, result) {
    for (var i = 0; i < array.length; i++) {
        if ($.isPlainObject(array[i])) {
            for (var property in array[i]) {
                result[prefix + "[" + i + "]." + property] = array[i][property];
            }
        }
        else {
            result[prefix + "[" + i + "]"] = array[i];
        }
    }
}


</script>

Please refer here for complete source code

Answer 2

我是这样解决的。在编辑器功能的更改事件中，我用多选的值更新了模型的值。然后数据作为这样的字符串数组正确发布。

ID  123
Field1  TextFromField1
RoleCode[]  A
RoleCode[]  OU

我的网格编辑器功能

function roleMultiSelectEditor(container, options) {
    $('<input id = "gridRoleList" name="' + options.field + '"/>')
        .appendTo(container)
        .kendoMultiSelect({
            dataTextField: "RoleCode",
            dataValueField: "RoleCode",
            autoBind: true,    
            change: function (e) {
                //Applies the value of the multiselect to the model.RoleCode field
                //Necessary to correctly post values to controller
                options.model.RoleCode = this.value();
                processGridMultiSelectChange();
            },
            dataSource: {
                type: "json",
                transport: {
                    read: {
                        dataType: "json",
                        url: baseUrl + "api/DropDownData/RoleList",
                    },
                }
            },
            dataBound: function (e) {
            }
        });
}

Kendo 网格内联多选 - 发布值

Kendo Grid Inline MultiSelect - Posted Values

kendo-grid

kendo-multiselect

kendo-editor