如何在C#/ Razor / KendoUI中使用嵌套的DropDownList创建Grid?

时间:2014-10-13 13:45:42

标签: javascript c# kendo-ui kendo-grid kendo-asp.net-mvc

我将下面附带的网格从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
        }
    });
}

1 个答案:

答案 0 :(得分:0)

您可以通过添加外键列来实现此目的。

有关示例,请参阅http://demos.telerik.com/aspnet-mvc/grid/foreignkeycolumn