javascript - 如何在 C#/Razor/KendoUI 中使用嵌套的 DropDownList 创建网格？

Question

我将下面附加的网格从 JavaScript 重新键入到 Razor，但例如列“ActorInvoicingParamsFreePeriod”包含 DropDownList。我无法将其附加到网格。我只找到了 JavaScript 或没有 Kendo UI 的示例。我可以编写没有 DropDownList 的网格代码。你能帮帮我吗？

    function populateGridWithInvoicingMethod() {
        $("#grid").show();
        $("#grid").html("");
        $("#grid").kendoGrid({
            columns: [
            {
                field: "Name",
                title: "@CTA.DealerName",
            width: 100,
        },
        {
            field: "InvoicingPeriod",
            title: "@CTA.InvoicingMethod",
            values: InvoicingMethodEnumArray,
            editor: invoicingMethodDropDownEditor,
            width: 50
        },
        {
            field: "ActorInvoicingParamsNumberOfMonths",
            title: "@CTA.NumberOfMonths",
            format: "{0:d}",
            width: 30
        },
        {
            field: "ActorInvoicingParamsFreePeriod",
            title: "@CTA.StandardPackageFreeInvoicingPeriod",
            values: FreeInvoicingPeriodArray,
            editor: freeinvoicePeriodDropDownEditor,
            template: "#= ActorInvoicingParamsFreePeriod != -1 ? ActorInvoicingParamsFreePeriod : 'Not set' #",
            width: 30
        },
        {
            field: "ParentActorActorId",
            title: "@CTA.InvoicingRegion",
            values: InvoicingRegionArray,
            width: 30
        },
        {
            field: "ExportToGlif",
            title: "@CTA.ExportToGlif",
            template: '<input class="checkbox" type="checkbox" #= ExportToGlif ? checked="checked" : "" # disabled="disabled"/>',
            width: 20
        }
        ],
        dataSource: {
            transport: {
                read: {
                    url: baseUrl + "api/PriceListApi/GetInvoicingMethodList",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8"
                },
                update: {
                    url: baseUrl + "api/PriceListApi/UpdateInvoicingMethodList",
                    dataType: "json",
                    async: false,
                    type: "POST",
                    contentType: "application/json; charset=utf-8"
                },
                parameterMap: function (options, operation) {
                    if (operation !== "read" && options) {
                        return kendo.stringify(options);
                    } else {
                        return kendo.stringify(createInvoicingMethodRequest());
                    }
                }
            },
            schema: {
                model: {
                    id: "ActorId",
                    fields: {
                        Name: { editable: false },
                        ExportToGlif: { editable: false },
                        InvoicingPeriod: { editable: false },
                        ActorInvoicingParamsNumberOfMonths: { editable: false, type: "number" },
                        ActorInvoicingParamsFreePeriod: { editable: false, type: "number" },
                        ParentActorActorId: { editable: false, type: "number" }
                    }
                },
                data: function (response) {
                    var dataForDataSource = [];
                    var len = response.length;
                    for (var i = 0; i < len; i++) {
                        var obj = response[i];
                        obj.ParentActorActorId = obj.ParentActorActorId != null ? obj.ParentActorActorId : -1;
                        obj.ActorInvoicingParamsFreePeriod = obj.ActorInvoicingParamsFreePeriod != null ? obj.ActorInvoicingParamsFreePeriod : -1;
                        dataForDataSource.push(obj);
                    }
                    return dataForDataSource;
                },
            },
            error: onGridDataSourceError
        },
        onError: onGridError,
        editable: true,
        selectable: true,
        scrollable: false,
        pageable: {
            refresh: true,
            pageSize: 10
        }
    });
}

Answer 1

您可以通过添加外键列来实现这一点。

参见 http://demos.telerik.com/aspnet-mvc/grid/foreignkeycolumn举个例子。