grid multiselect post data data binding issue

Question

我正在使用他们的JS库构建一个Kendo UI Grid。这是我使用的代码：

 <div>
<div>
    <div id="grid"></div>
    <script>
        $(document).ready(function () {

            var Supplier = kendo.data.Model.define({
                id: "SupplierId",
                fields: {
                    SupplierId: { required : true},
                    PrefixCountryCode: { required: true },
                    SupplierName: { required: true }
                }
            });

            var customer = kendo.data.Model.define({
                id: "CustomerId",
                fields: {
                    CustomerId: { editable: false },
                    CustomerName: { validation: { required: true } },
                    CountryCode: { validation: { required: true } },
                    CustomerERPId: { validation: { required: true } },
                    Suppliers: {
                    }
                }
            });

            dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: '@Url.Action("GetCustomers", "Customer")',
                        dataType: "json"
                    },
                    update: {
                        url: '@Url.Action("SaveCustomer", "Customer")',
                        dataType: "json",
                        type: "POST"
                    },
                    destroy: {
                        url: '@Url.Action("RemoveCustomer", "Customer")',
                        dataType: "json",
                        type: "POST"
                    },
                    create: {
                        url: '@Url.Action("CreateCustomer", "Customer")',
                        dataType: "json",
                        type: "POST"
                    },
                    parameterMap: function (options, operation) {
                        if (operation !== "read") {
                            console.log(options);
                            return options;
                        }
                    }
                },
                pageSize: 20,
                schema: {
                    model: customer
                }
            });

            $("#grid").kendoGrid({
                dataSource: dataSource,
                navigatable: true,
                pageable: true,
                height: 550,
                toolbar: ["create"],
                columns: [
                    {
                        field: "CustomerName",
                        title: "CustomerName",
                        width: 200
                    }, {
                        field: "CountryCode",
                        title: "CountryCode",
                        width: 50
                    },
                    {
                        field: "CustomerERPId",
                        title: "CustomerERPId",
                        width: 100
                    },
                    {
                        field: "Suppliers",
                        title: "Suppliers",
                        width: 200,
                        editor: supplierMultiSelect, template: kendo.template($("#supplierTemplate").html())
                    },
                    { command: ["edit", "destroy"], title: "&nbsp;", width: "200px" }
                ],
                editable: "inline",
            });
        });

        function supplierMultiSelect(container, options) {
            console.log(options.field);
            $('<input data-text-field="SupplierName" data-value-field="SupplierId" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoMultiSelect({
                    autoBind: true,
                    dataTextField: "SupplierName",
                    dataValueField: "SupplierId",
                    dataSource: {
                        type: "json",
                        transport: {
                            read: {
                                url: '@Url.Action("GetSuppliers", "Customer")',
                                dataType: "json"
                            }
                        }
                    },
                });
        }
    </script>
    <script type="text/kendo" id="supplierTemplate">
        <ul>
            #for(var i = 0; i< Suppliers.length; i++){#
            <li>#:Suppliers[i].SupplierName#</li>
            #}#
        </ul>
    </script>
</div>

正如你所看到的，我在每行都有一个剑道多选。我得到的问题是，当我尝试更新值时，多选的值不会跟随控制器。在参数Map方法中我有一个控制台日志，在那里我可以看到网格发布到控制器的所有值都是正确的。

上面的图片来自我的Chrome控制台，我有3个多选模型存在于对象中，这是正确的。

在上图中，您可以看到我的控制器方法从帖子中获取的内容。 它从客户对象获取所有值，并且还获得有3个已发布的客户供应商。但是每个供应商的所有价值均为空。我想这与多选的绑定有关，但我无法弄清楚为什么它不起作用。 Plz帮忙！