angularjs - KendoUI+AngularJS : 階層的なネストされたグリッドでインライン エディターのドロップダウン リストを表示する

Question

私は階層的にネストされた剣道グリッドを持っています。親グリッドには通貨のリストが表示され、各通貨には割り当てのリストがあります。どちらのグリッドにもインライン エディターがあります。通貨にはプロパティ「currencyName」があり、割り当てにはプロパティ「allocationName」があります。これらの両方のプロパティには、剣道ドロップダウン リスト エディターが必要です。

私のソリューションでは、currencyName のドロップダウンを取得できますが、allocationName ではテキスト ボックスを取得しています。以下はコードです：

HTML :

<div kendo-grid="ctrl.currencyKendoGrid" style="margin-top: 2em" k-options="ctrl.currencyGridOptions"></div>

Currency Grid DataSource: これは、別の親ファンド グリッドによって割り当てられています。資金グリッドには編集可能なポップアップ ウィンドウがあり、次のように編集イベントのデータ ソースである currencyKendoGrid を割り当てます。

edit: function (e) {
            if (e.model.currencies)
                ctrl.currencyKendoGrid.dataSource.data(e.model.currencies);
      }

通貨ドロップダウン データソース:

ctrl.currencyDataSource = new kendo.data.DataSource({
        type: "json",
        transport: {
            read: function (e) {
                DataSvc.getCurrencyData().then(function (response) {
                    e.success(response.data);
                });
            }
        }
    });

割り当てドロップダウン データソース:

ctrl.allocationsList = [{ allocName: "Cash", allocId: 1 }, { allocName: "Money Market", allocId: 2 }, { allocName: "TBill", allocId: 3 }, { allocName: "FX-Forward", allocId: 4 }];
    ctrl.allocationDataSource = new kendo.data.DataSource({
        type: "json",
        transport: {
            read: function (e) {
                e.success(ctrl.allocationsList);
            }
        }
    });

通貨グリッド オプション:

ctrl.currencyGridOptions = {
        dataSource: {
            schema: {
                model: {
                    fields: {
                        currency: { type: "string", editable: true }
                    }
                }
            }
        },
        editable: "inline",
        toolbar: [{
            name: 'create',
            text: 'Add Currency',
        }],
        columns: [
            {
                field: "currencyName", title: "Currency",
                editor: function (container, options) {
                    $('<input kendo-drop-down-list required k-data-text-field="\'currencyName\'" k-data-value-field="\'currencyName\'" k-data-source="ctrl.currencyDataSource" data-bind="value:' + options.field + '"/>')
                    .appendTo(container);
                }
            },
            { command: [{ name: "edit", text: "" }, { name: "destroy", text: "" }], title: "&nbsp;", width: "250px" }
        ],
        detailInit: detailInitCurrency,
        dataBound: function () {
            this.expandRow(this.tbody.find("tr.k-master-row").first());
        },
    }

割り当てグリッド オプション:

function detailInitCurrency(e) {
        if (e.data.allocations)
            ctrl.selectedCurrencyAllocations = e.data.allocations;

        $("<div/>").appendTo(e.detailCell).kendoGrid({
            dataSource: {
                transport: {
                    read: function (e) {
                        e.success(ctrl.selectedCurrencyAllocations);
                    },
                },
                filter: { field: "currencyId", operator: "eq", value: e.data.currencyId },
                schema: {
                    model: {
                        id: "allocationId",
                        fields: {
                            allocationId: { type: "number", editable: false },
                            allocationName: { type: "string", editable: true },
                        }
                    }
                }
            },
            editable: "inline",
            toolbar: [{
                name: 'create',
                text: 'Add Allocation',
            }],
            columns: [
                {
                    field: "allocationName", title: "Allocation",
                    editor: function (container, options) {
                        $('<input kendo-drop-down-list required k-data-text-field="\'currencyName\'" k-data-value-field="\'currencyName\'" k-data-source="ctrl.allocationDataSource" data-bind="value:' + options.field + '"/>')
                        .appendTo(container);
                    }
                },
                { command: [{ name: "edit", text: "" }, { name: "destroy", text: "" }], title: "", width: "250px" }
            ]
        });
    }

出力:

問題を単純化するために多くの不要なコードを削除したため、見落としている可能性のあるコードを教えてください。