Question

我有一个分层嵌套的Kendo网格。父网格显示货币列表，每种货币都有一个分配列表。两个网格都有一个内联编辑器。货币有一个属性'currencyName'，分配有一个属性'allocationName'。这两个属性都需要有一个kendo下拉列表编辑器。

在我的解决方案中，我能够获得currencyName的下拉列表，但是对于allocationName，我得到一个文本框。以下是代码：

HTML：

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

货币网格数据源：这是由另一个母基金网格分配的。资金网格有一个可编辑的弹出窗口，并在编辑事件中为currencyKendoGrid分配它的数据源，如下所示。

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

货币DropDown DataSource：

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

分配DropDown DataSource：

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" }
            ]
        });
    }

输出：

请随意指出我可能错过的任何代码，因为我删除了许多不必要的代码以保持问题的简单。

KendoUI + AngularJS：显示分层嵌套网格中内联编辑器的下拉列表

0 个答案: