剑道网格内联多选 - 发布值答案

【问题标题】：Kendo Grid Inline MultiSelect - Posted Values剑道网格内联多选 - 发布值
【发布时间】：2016-08-18 22:13:49
【问题描述】：

我复制的功能非常接近这里看到的。 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

知道我应该如何设置它以使帖子参数可用吗？

更新

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

    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 错误，因为找不到多选。

【问题讨论】：

标签： kendo-grid kendo-multiselect kendo-editor

【解决方案1】：

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

读取动作 - 使用 MVC Wrapper

.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

【讨论】：

谢谢。我认为这是我需要的，但我没有使用 MVC 包装器。知道如何在 datasource.sync() 事件或传输的更新函数中通过这些函数运行数据吗？
您可以使用 transport.read.data 函数从 JS 发送附加参数，请参阅此处的 Kendo UI 文档。 docs.telerik.com/kendo-ui/api/javascript/data/…

【解决方案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) {
            }
        });
}

【讨论】：