使用剑道网格中的动态下拉菜单进行内联编辑

Question

我一直在尝试使用 kendo 网格使 nopCommerce 中的规范属性可编辑。

如果您不是 nop 人，只需考虑一个现有的剑道编辑网格，它有一个不可编辑的列，我想使用下拉菜单使该列可编辑。由于我正在编辑的数据的性质，每一行的下拉选项都会有所不同。

当前状态是该列在不处于编辑模式时正确显示。在编辑模式下，它会显示正确的值，但从未选择过任何值。更新似乎没有回传到服务器，有时（取决于我的尝试）会导致剑道内部的 javascript 错误。

我对剑道几乎一无所知，并且需要使用此下拉菜单进行更新。下面是一些代码片段（整个太长了）：

grid = $("#specificationattributes-grid").kendoGrid({
                    dataSource: {
                        type: "json",
                        transport: {
                            read: {
                                url: "@Html.Raw(Url.Action("ProductSpecAttrList", "Product", new { productId = Model.Id }))",
                                type: "POST",
                                dataType: "json"
                            },
                            update: {
                                url: "@Html.Raw(Url.Action("ProductSpecAttrUpdate", "Product"))",
                                type: "POST",
                                dataType: "json"
                            },
                            destroy: {
                                url: "@Html.Raw(Url.Action("ProductSpecAttrDelete", "Product"))",
                                type: "POST",
                                dataType: "json"
                            }
                        },
                        schema: {
                            data: "Data",
                            total: "Total",
                            errors: "Errors",
                            model: {
                                id: "Id",
                                fields: {
                                    //ProductId: { editable: false, type: "number" },
                                    SpecificationAttributeName: { editable: false, type: "string" },
                                    SpecificationAttributeOptionId: { editable: true, type: "number" },
                                    CustomValue: { editable: true, type: "string" },
                                    AllowFiltering: { editable: true, type: "boolean" },
                                    ShowOnProductPage: { editable: true, type: "boolean" },
                                    DisplayOrder: { editable: true, type: "number" },
                                    Id: { editable: false, type: "number" }
                                }
                            }
                        },
.......................
columns: [{
                            field: "SpecificationAttributeName",
                            title: "@T("Admin.Catalog.Products.SpecificationAttributes.Fields.SpecificationAttribute")",
                            width: 200
                        }, {
                            field: "SpecificationAttributeOptionId",
                            title: "@T("Admin.Catalog.Products.SpecificationAttributes.Fields.SpecificationAttributeOption")",
                            width: 200,
                            editor: renderDropDown, template: "#= getOptionValue(SpecificationAttributeName, SpecificationAttributeOptionId) #"
                        }, 

方法“getOptionValue”不包括在内，但基本上在它不处于编辑模式时将值转换为显示友好的标签。 "renderDropDown" 创建一个 kendoDropDownList，其中包含当前行的正确选项。

Answer 1

如果你返回一个 id，值对例如

"{\"SpecificationAttributeOptionId\":\"0\",\"SpecificationAttributeName\":\"XYZ\"},
 {\"SpecificationAttributeOptionId\":\"1\",\"SpecificationAttributeName\":\"ABC\"}"

然后需要指定dataTextField、dataValueField。否则如果你返回一个List 的string 如下，那么你不需要指定dataTextField，dataValueField 和kendo 将负责其余的。

"{\"SpecificationAttributeName\":\"XYZ\"},
 {\"SpecificationAttributeName\":\"ABC\"}"

希望这会有所帮助。

$("#SpecificationAttributeOptionId").kendoDropDownList({
        dataTextField: "SpecificationAttributeName",
        dataValueField: "SpecificationAttributeOptionId",
        dataSource: {
            transport: {
                read: {
                    url: "/ControllerName/GetDropDownValueFunction",
                    type: "POST",
                    contentType: "application/json",
                    dataType: "json"
                }
            }
        },
        height: 100
    });