jquery - 剣道UIグリッドが複数選択列を正しくロードしない

Question

Kendo UI グリッドの列の 1 つに 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>

しかし、今ではデータがアクション メソッドに正しくバインドされません!