jquery - kendo ui 网格未正确加载多选列

Question

我想要在我的 Kendo UI 网格中的一列中有一个 kendomultiselect。

        <div id="grid"></div>
    <script>
$(document).ready(function () {
    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") {
                            return options;
                        }
                    }
                },
                pageSize: 20,
                schema: {
                    model: {
                        id: "CustomerId",
                        fields: {
                            CustomerId: { editable: false },
                            CustomerName: { validation: { required: true } },
                            CountryCode: { validation: { required: true } },
                            CustomerERPId: { validation: { required: true } },
                            Suppliers: { validation: { required: true } },
                        }
                    }
                }
            });

            $("#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) {
            $('<input data-text-field="SupplierName" data-value-field="SupplierId" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoMultiSelect({
                    autoBind: true,
                    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< data.length; i++){#
            <li>#:data[i].SupplierName#</li>
            #}#
        </ul>
    </script>

但现在它不会将数据正确绑定到我的操作方法！

Answer 1

你的模板

"#=Suppliers.SupplierName#"

不起作用，因为 Suppliers 是一个元素数组。所以你需要类似的东西：

"#= Suppliers.map(function(el) { return el.SupplierName; }).join(', ') #"